Aug
10
AngularJS – Cart Application ”; Previous Next We are providing an example of Cart app. To develop this app, we have used HTML, CSS and AngularJS. Source code available at here Print Page Previous Next Advertisements ”;
Category: angularjs
AngularJS – Chart Application ”; Previous Next We are providing an example of Chart app. To develop this app, we have used HTML, CSS, chat.js and AngularJS. Source code available at here Print Page Previous Next Advertisements ”;
Aug
10
AngularJS – Forms
AngularJS – Forms ”; Previous Next AngularJS enriches form filling and validation. We can use ng-click event to handle the click button and use $dirty and $invalid flags to do the validation in a seamless way. Use novalidate with a form declaration to disable any browser-specific validation. The form controls make heavy use of AngularJS events. Let us have a look at the events first. Events AngularJS provides multiple events associated with the HTML controls. For example, ng-click directive is generally associated with a button. AngularJS supports the following events − ng-click ng-dbl-click ng-mousedown ng-mouseup ng-mouseenter ng-mouseleave ng-mousemove ng-mouseover ng-keydown ng-keyup ng-keypress ng-change ng-click Reset data of a form using on-click directive of a button. <input name = “firstname” type = “text” ng-model = “firstName” required> <input name = “lastname” type = “text” ng-model = “lastName” required> <input name = “email” type = “email” ng-model = “email” required> <button ng-click = “reset()”>Reset</button> <script> function studentController($scope) { $scope.reset = function() { $scope.firstName = “Mahesh”; $scope.lastName = “Parashar”; $scope.email = “[email protected]”; } $scope.reset(); } </script> Validate Data The following can be used to track error. $dirty − states that value has been changed. $invalid − states that value entered is invalid. $error − states the exact error. Example The following example will showcase all the above-mentioned directives. testAngularJS.htm Live Demo <html> <head> <title>Angular JS Forms</title> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = “mainApp” ng-controller = “studentController”> <form name = “studentForm” novalidate> <table border = “0”> <tr> <td>Enter first name:</td> <td><input name = “firstname” type = “text” ng-model = “firstName” required> <span style = “color:red” ng-show = “studentForm.firstname.$dirty && studentForm.firstname.$invalid”> <span ng-show = “studentForm.firstname.$error.required”>First Name is required.</span> </span> </td> </tr> <tr> <td>Enter last name: </td> <td><input name = “lastname” type = “text” ng-model = “lastName” required> <span style = “color:red” ng-show = “studentForm.lastname.$dirty && studentForm.lastname.$invalid”> <span ng-show = “studentForm.lastname.$error.required”>Last Name is required.</span> </span> </td> </tr> <tr> <td>Email: </td><td><input name = “email” type = “email” ng-model = “email” length = “100” required> <span style = “color:red” ng-show = “studentForm.email.$dirty && studentForm.email.$invalid”> <span ng-show = “studentForm.email.$error.required”>Email is required.</span> <span ng-show = “studentForm.email.$error.email”>Invalid email address.</span> </span> </td> </tr> <tr> <td> <button ng-click = “reset()”>Reset</button> </td> <td> <button ng-disabled = “studentForm.firstname.$dirty && studentForm.firstname.$invalid || studentForm.lastname.$dirty && studentForm.lastname.$invalid || studentForm.email.$dirty && studentForm.email.$invalid” ng-click=”submit()”>Submit</button> </td> </tr> </table> </form> </div> <script> var mainApp = angular.module(“mainApp”, []); mainApp.controller(”studentController”, function($scope) { $scope.reset = function() { $scope.firstName = “Mahesh”; $scope.lastName = “Parashar”; $scope.email = “[email protected]”; } $scope.reset(); }); </script> </body> </html> Output Open the file testAngularJS.htm in a web browser and see the result. Print Page Previous Next Advertisements ”;
Aug
10
AngularJS – Views
AngularJS – Views ”; Previous Next AngularJS supports Single Page Application via multiple views on a single page. To do this, AngularJS has provided ng-view and ng-template directives, and $routeProvider services. ng-view Directive The ng-view directive simply creates a place holder where a corresponding view (HTML or ng-template view) can be placed based on the configuration. Usage Define a div with ng-view within the main module. <div ng-app = “mainApp”> … <div ng-view></div> </div> ng-template Directive The ng-template directive is used to create an HTML view using script tag. It contains id attribute which is used by $routeProvider to map a view with a controller. Usage Define a script block with type as ng-template within the main module. <div ng-app = “mainApp”> … <script type = “text/ng-template” id = “addStudent.htm”> <h2> Add Student </h2> {{message}} </script> </div> $routeProvider Service The $routeProvider is a key service which sets the configuration of URLs, maps them with the corresponding HTML page or ng-template, and attaches a controller with the same. Usage 1 Define a script block with type as ng-template within the main module. <div ng-app = “mainApp”> … <script type = “text/ng-template” id = “addStudent.htm”> <h2> Add Student </h2> {{message}} </script> </div> Usage 2 Define a script block with main module and set the routing configuration. var mainApp = angular.module(“mainApp”, [”ngRoute”]); mainApp.config([”$routeProvider”, function($routeProvider) { $routeProvider .when(”/addStudent”, { templateUrl: ”addStudent.htm”, controller: ”AddStudentController” }) .when(”/viewStudents”, { templateUrl: ”viewStudents.htm”, controller: ”ViewStudentsController” }) .otherwise ({ redirectTo: ”/addStudent” }); }]); The following points are important to be considered in the above example − $routeProvider is defined as a function under config of mainApp module using key as ”$routeProvider”. $routeProvider.when defines a URL “/addStudent”, which is mapped to “addStudent.htm”. addStudent.htm should be present in the same path as main HTML page. If the HTML page is not defined, then ng-template needs to be used with id=”addStudent.htm”. We used ng-template. “otherwise” is used to set the default view. “controller” is used to set the corresponding controller for the view. Example The following example shows the use of all the above-mentioned directives. testAngularJS.htm Live Demo <html> <head> <title>Angular JS Views</title> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js”> </script> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = “mainApp”> <p><a href = “#addStudent”>Add Student</a></p> <p><a href = “#viewStudents”>View Students</a></p> <div ng-view></div> <script type = “text/ng-template” id = “addStudent.htm”> <h2> Add Student </h2> {{message}} </script> <script type = “text/ng-template” id = “viewStudents.htm”> <h2> View Students </h2> {{message}} </script> </div> <script> var mainApp = angular.module(“mainApp”, [”ngRoute”]); mainApp.config([”$routeProvider”, function($routeProvider) { $routeProvider .when(”/addStudent”, { templateUrl: ”addStudent.htm”, controller: ”AddStudentController” }) .when(”/viewStudents”, { templateUrl: ”viewStudents.htm”, controller: ”ViewStudentsController” }) .otherwise({ redirectTo: ”/addStudent” }); }]); mainApp.controller(”AddStudentController”, function($scope) { $scope.message = “This page will be used to display add student form”; }); mainApp.controller(”ViewStudentsController”, function($scope) { $scope.message = “This page will be used to display all the students”; }); </script> </body> </html> Output Open the file testAngularJS.htm in a web browser and see the result. Print Page Previous Next Advertisements ”;
Aug
10
AngularJS – Upload File
AngularJS – Upload File ”; Previous Next We are providing an example of Upload File. To develop this app, we have used HTML, CSS and AngularJS. Following example shows about how to upload the file using AngularJS. Live Demo <html> <head> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </script> </head> <body ng-app = “myApp”> <div ng-controller = “myCtrl”> <input type = “file” file-model = “myFile”/> <button ng-click = “uploadFile()”>upload me</button> </div> <script> var myApp = angular.module(”myApp”, []); myApp.directive(”fileModel”, [”$parse”, function ($parse) { return { restrict: ”A”, link: function(scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind(”change”, function() { scope.$apply(function() { modelSetter(scope, element[0].files[0]); }); }); } }; }]); myApp.service(”fileUpload”, [”$https:”, function ($https:) { this.uploadFileToUrl = function(file, uploadUrl) { var fd = new FormData(); fd.append(”file”, file); $https:.post(uploadUrl, fd, { transformRequest: angular.identity, headers: {”Content-Type”: undefined} }) .success(function() { }) .error(function() { }); } }]); myApp.controller(”myCtrl”, [”$scope”, ”fileUpload”, function($scope, fileUpload) { $scope.uploadFile = function() { var file = $scope.myFile; console.log(”file is ” ); console.dir(file); var uploadUrl = “/fileUpload”; fileUpload.uploadFileToUrl(file, uploadUrl); }; }]); </script> </body> </html> Result Open above saved code file in a web browser. See the result. Print Page Previous Next Advertisements ”;
Aug
10
AngularJS – Directives
AngularJS – Directives ”; Previous Next AngularJS directives are used to extend HTML. They are special attributes starting with ng-prefix. Let us discuss the following directives − ng-app − This directive starts an AngularJS Application. ng-init − This directive initializes application data. ng-model − This directive defines the model that is variable to be used in AngularJS. ng-repeat − This directive repeats HTML elements for each item in a collection. ng-app directive The ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application when the web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application. In the following example, we define a default AngularJS application using ng-app attribute of a <div> element. <div ng-app = “”> … </div> ng-init directive The ng-init directive initializes an AngularJS Application data. It is used to assign values to the variables. In the following example, we initialize an array of countries. We use JSON syntax to define the array of countries. <div ng-app = “” ng-init = “countries = [{locale:”en-US”,name:”United States”}, {locale:”en-GB”,name:”United Kingdom”}, {locale:”en-FR”,name:”France”}]”> … </div> ng-model directive The ng-model directive defines the model/variable to be used in AngularJS Application. In the following example, we define a model named name. <div ng-app = “”> … <p>Enter your Name: <input type = “text” ng-model = “name”></p> </div> ng-repeat directive The ng-repeat directive repeats HTML elements for each item in a collection. In the following example, we iterate over the array of countries. <div ng-app = “”> … <p>List of Countries with locale:</p> <ol> <li ng-repeat = “country in countries”> {{ ”Country: ” + country.name + ”, Locale: ” + country.locale }} </li> </ol> </div> Example The following example shows the use of all the above-mentioned directives. testAngularJS.htm Live Demo <html> <head> <title>AngularJS Directives</title> </head> <body> <h1>Sample Application</h1> <div ng-app = “” ng-init = “countries = [{locale:”en-US”,name:”United States”}, {locale:”en-GB”,name:”United Kingdom”}, {locale:”en-FR”,name:”France”}]”> <p>Enter your Name: <input type = “text” ng-model = “name”></p> <p>Hello <span ng-bind = “name”></span>!</p> <p>List of Countries with locale:</p> <ol> <li ng-repeat = “country in countries”> {{ ”Country: ” + country.name + ”, Locale: ” + country.locale }} </li> </ol> </div> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </script> </body> </html> Output Open the file testAngularJS.htm in a web browser. Enter your name and see the result. Print Page Previous Next Advertisements ”;
AngularJS – Internationalization ”; Previous Next AngularJS supports inbuilt internationalization for three types of filters : Currency, Date, and Numbers. We only need to incorporate corresponding java script according to locale of the country. By default, it considers the locale of the browser. For example, for Danish locale, use the following script − <script src = “https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js”> </script> Example Using Danish Locale testAngularJS.htm Live Demo <html> <head> <title>Angular JS Forms</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = “mainApp” ng-controller = “StudentController”> {{fees | currency }} <br/><br/> {{admissiondate | date }} <br/><br/> {{rollno | number }} </div> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </script> <script src = “https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js”> </script> <script> var mainApp = angular.module(“mainApp”, []); mainApp.controller(”StudentController”, function($scope) { $scope.fees = 100; $scope.admissiondate = new Date(); $scope.rollno = 123.45; }); </script> </body> </html> Output Open the file testAngularJS.htm in a web browser and see the result. Example Using Browser Locale testAngularJS.htm Live Demo <html> <head> <title>Angular JS Forms</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = “mainApp” ng-controller = “StudentController”> {{fees | currency }} <br/><br/> {{admissiondate | date }} <br/><br/> {{rollno | number }} </div> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </script> <!– <script src = “https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js”> </script> –> <script> var mainApp = angular.module(“mainApp”, []); mainApp.controller(”StudentController”, function($scope) { $scope.fees = 100; $scope.admissiondate = new Date(); $scope.rollno = 123.45; }); </script> </body> </html> Output Open the file testAngularJS.htm in a web browser and see the result. Print Page Previous Next Advertisements ”;
AngularJS – Login Application ”; Previous Next We are providing an example of Login app. To develop this app, we have used HTML, CSS and AngularJS. Source code available at here Print Page Previous Next Advertisements ”;
Aug
10
AngularJS – Tables
AngularJS – Tables ”; Previous Next Table data is generally repeatable. The ng-repeat directive can be used to draw table easily. The following example shows the use of ng-repeat directive to draw a table − <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat = “subject in student.subjects”> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> Table can be styled using CSS Styling. <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> Example The following example shows the use of all the above-mentioned directives. testAngularJS.htm Live Demo <html> <head> <title>Angular JS Table</title> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”></script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = “mainApp” ng-controller = “studentController”> <table border = “0”> <tr> <td>Enter first name:</td> <td><input type = “text” ng-model = “student.firstName”></td> </tr> <tr> <td>Enter last name: </td> <td> <input type = “text” ng-model = “student.lastName”> </td> </tr> <tr> <td>Name: </td> <td>{{student.fullName()}}</td> </tr> <tr> <td>Subject:</td> <td> <table> <tr> <th>Name</th>. <th>Marks</th> </tr> <tr ng-repeat = “subject in student.subjects”> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> </td> </tr> </table> </div> <script> var mainApp = angular.module(“mainApp”, []); mainApp.controller(”studentController”, function($scope) { $scope.student = { firstName: “Mahesh”, lastName: “Parashar”, fees:500, subjects:[ {name:”Physics”,marks:70}, {name:”Chemistry”,marks:80}, {name:”Math”,marks:65}, {name:”English”,marks:75}, {name:”Hindi”,marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + ” ” + studentObject.lastName; } }; }); </script> </body> </html> Output Open the file testAngularJS.htm in a web browser and see the result. Print Page Previous Next Advertisements ”;
Aug
10
AngularJS – Includes
AngularJS – Includes ”; Previous Next HTML does not support embedding HTML pages within the HTML page. To achieve this functionality, we can use one of the following options − Using Ajax − Make a server call to get the corresponding HTML page and set it in the innerHTML of HTML control. Using Server Side Includes − JSP, PHP and other web side server technologies can include HTML pages within a dynamic page. Using AngularJS, we can embed HTML pages within an HTML page using ng-include directive. <div ng-app = “” ng-controller = “studentController”> <div ng-include = “”main.htm””></div> <div ng-include = “”subjects.htm””></div> </div> Example tryAngularJS.htm Live Demo <html> <head> <title>Angular JS Includes</title> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </script> <style> table, th , td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; } </style> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = “mainApp” ng-controller = “studentController”> <div ng-include = “”/angularjs/src/include/main.htm””></div> <div ng-include = “”/angularjs/src/include/subjects.htm””></div> </div> <script> var mainApp = angular.module(“mainApp”, []); mainApp.controller(”studentController”, function($scope) { $scope.student = { firstName: “Mahesh”, lastName: “Parashar”, fees:500, subjects:[ {name:”Physics”,marks:70}, {name:”Chemistry”,marks:80}, {name:”Math”,marks:65}, {name:”English”,marks:75}, {name:”Hindi”,marks:67} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + ” ” + studentObject.lastName; } }; }); </script> </body> </html> main.htm <table border = “0”> <tr> <td>Enter first name:</td> <td><input type = “text” ng-model = “student.firstName”></td> </tr> <tr> <td>Enter last name: </td> <td><input type = “text” ng-model = “student.lastName”></td> </tr> <tr> <td>Name: </td> <td>{{student.fullName()}}</td> </tr> </table> subjects.htm <p>Subjects:</p> <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat = “subject in student.subjects”> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> </table> Output To execute this example, you need to deploy testAngularJS.htm, main.htm, and subjects.htm to a web server. Open the file testAngularJS.htm using the URL of your server in a web browser and see the result. Print Page Previous Next Advertisements ”;