AngularJS – Translate Application ”; Previous Next We are providing an example of Translate app. To develop this app, we have used HTML, CSS, translate.js and AngularJS. Source code available at here Print Page Previous Next Advertisements ”;
AngularJS – Ajax ”; Previous Next AngularJS provides $http control which works as a service to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $http can be used to get the data from server in the following manner − function studentController($scope,$https:) { var url = “data.txt”; $https:.get(url).success( function(response) { $scope.students = response; }); } Here, the file data.txt contains student records. $http service makes an ajax call and sets response to its property students. students model can be used to draw tables in HTML. Examples data.txt [ { “Name” : “Mahesh Parashar”, “RollNo” : 101, “Percentage” : “80%” }, { “Name” : “Dinkar Kad”, “RollNo” : 201, “Percentage” : “70%” }, { “Name” : “Robert”, “RollNo” : 191, “Percentage” : “75%” }, { “Name” : “Julian Joe”, “RollNo” : 111, “Percentage” : “77%” } ] testAngularJS.htm Live Demo <html> <head> <title>Angular JS Includes</title> <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 = “” ng-controller = “studentController”> <table> <tr> <th>Name</th> <th>Roll No</th> <th>Percentage</th> </tr> <tr ng-repeat = “student in students”> <td>{{ student.Name }}</td> <td>{{ student.RollNo }}</td> <td>{{ student.Percentage }}</td> </tr> </table> </div> <script> function studentController($scope,$http) { var url = “/data.txt”; $http.get(url).then( function(response) { $scope.students = response.data; }); } </script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js”> </script> </body> </html> Output To execute this example, you need to deploy testAngularJS.htm and data.txt file 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 ”;
AngularJS – In-line Application ”; Previous Next We are providing an example of in-line app. To develop this app, we have used HTML, CSS and AngularJS. Using this app, we can change the in-line text as shown below − Source code available at here Print Page Previous Next Advertisements ”;
AngularJS – Dependency Injection ”; Previous Next Dependency Injection is a software design in which components are given their dependencies instead of hard coding them within the component. It relieves a component from locating the dependency and makes dependencies configurable. It also helps in making components reusable, maintainable and testable. AngularJS provides a supreme Dependency Injection mechanism. It provides following core components which can be injected into each other as dependencies. Value Factory Service Provider Constant Value Value is a simple JavaScript object, which is required to pass values to the controller during config phase (config phase is when AngularJS bootstraps itself). //define a module var mainApp = angular.module(“mainApp”, []); //create a value object as “defaultInput” and pass it a data. mainApp.value(“defaultInput”, 5); … //inject the value in the controller using its name “defaultInput” mainApp.controller(”CalcController”, function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); Factory Factory is a function which is used to return value. It creates a value on demand whenever a service or a controller requires it. It generally uses a factory function to calculate and return the value. //define a module var mainApp = angular.module(“mainApp”, []); //create a factory “MathService” which provides a method multiply to return multiplication of two numbers mainApp.factory(”MathService”, function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); //inject the factory “MathService” in a service to utilize the multiply method of factory. mainApp.service(”CalcService”, function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); … Service Service is a singleton JavaScript object containing a set of functions to perform certain tasks. Service is defined using service() function and it is then injected into the controllers. //define a module var mainApp = angular.module(“mainApp”, []); … //create a service which defines a method square to return square of a number. mainApp.service(”CalcService”, function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); //inject the service “CalcService” into the controller mainApp.controller(”CalcController”, function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); Provider Provider is used by AngularJS internally to create services, factory, etc. during the config phase. The following script can be used to create MathService that we created earlier. Provider is a special factory method with get() method which is used to return the value/service/factory. //define a module var mainApp = angular.module(“mainApp”, []); … //create a service using provider which defines a method square to return square of a number. mainApp.config(function($provide) { $provide.provider(”MathService”, function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); }); Constant Constants are used to pass values at the config phase considering the fact that value cannot be used during the config phase. mainApp.constant(“configParam”, “constant value”); Example The following example shows the use of all the above-mentioned directives − testAngularJS.htm Live Demo <html> <head> <title>AngularJS Dependency Injection</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = “mainApp” ng-controller = “CalcController”> <p>Enter a number: <input type = “number” ng-model = “number” /></p> <button ng-click = “square()”>X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </script> <script> var mainApp = angular.module(“mainApp”, []); mainApp.config(function($provide) { $provide.provider(”MathService”, function() { this.$get = function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }; }); }); mainApp.value(“defaultInput”, 5); mainApp.factory(”MathService”, function() { var factory = {}; factory.multiply = function(a, b) { return a * b; } return factory; }); mainApp.service(”CalcService”, function(MathService) { this.square = function(a) { return MathService.multiply(a,a); } }); mainApp.controller(”CalcController”, function($scope, CalcService, defaultInput) { $scope.number = defaultInput; $scope.result = CalcService.square($scope.number); $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script> </body> </html> Output Open testAngularJS.htm in a web browser and see the result. Print Page Previous Next Advertisements ”;
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 ”;
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 ”;
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 ”;
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 ”;
AngularJS – Custom Directives ”; Previous Next Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using “directive” function. A custom directive simply replaces the element for which it is activated. AngularJS application during bootstrap finds the matching elements and do one time activity using its compile() method of the custom directive then process the element using link() method of the custom directive based on the scope of the directive. AngularJS provides support to create custom directives for following type of elements. Element directives − Directive activates when a matching element is encountered. Attribute − Directive activates when a matching attribute is encountered. CSS − Directive activates when a matching css style is encountered. Comment − Directive activates when a matching comment is encountered. Understanding Custom Directive Define custom html tags. <student name = “Mahesh”></student><br/> <student name = “Piyush”></student> Define custom directive to handle above custom html tags. var mainApp = angular.module(“mainApp”, []); //Create a directive, first parameter is the html element to be attached. //We are attaching student html tag. //This directive will be activated as soon as any student element is encountered in html mainApp.directive(”student”, function() { //define the directive object var directive = {}; //restrict = E, signifies that directive is Element directive directive.restrict = ”E”; //template replaces the complete element with its text. directive.template = “Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>”; //scope is used to distinguish each student element based on criteria. directive.scope = { student : “=name” } //compile is called during application initialization. AngularJS calls it once when html page is loaded. directive.compile = function(element, attributes) { element.css(“border”, “1px solid #cccccc”); //linkFunction is linked with each element with scope to get the element specific data. var linkFunction = function($scope, element, attributes) { element.html(“Student: <b>”+$scope.student.name +”</b> , Roll No: <b>”+$scope.student.rollno+”</b><br/>”); element.css(“background-color”, “#ff00ff”); } return linkFunction; } return directive; }); Define controller to update the scope for directive. Here we are using name attribute”s value as scope”s child. mainApp.controller(”StudentController”, function($scope) { $scope.Mahesh = {}; $scope.Mahesh.name = “Mahesh Parashar”; $scope.Mahesh.rollno = 1; $scope.Piyush = {}; $scope.Piyush.name = “Piyush Parashar”; $scope.Piyush.rollno = 2; }); Example Live Demo <html> <head> <title>Angular JS Custom Directives</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app = “mainApp” ng-controller = “StudentController”> <student name = “Mahesh”></student><br/> <student name = “Piyush”></student> </div> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js”> </script> <script> var mainApp = angular.module(“mainApp”, []); mainApp.directive(”student”, function() { var directive = {}; directive.restrict = ”E”; directive.template = “Student: <b>{{student.name}}</b> , Roll No: <b>{{student.rollno}}</b>”; directive.scope = { student : “=name” } directive.compile = function(element, attributes) { element.css(“border”, “1px solid #cccccc”); var linkFunction = function($scope, element, attributes) { element.html(“Student: <b>”+$scope.student.name +”</b> , Roll No: <b>”+$scope.student.rollno+”</b><br/>”); element.css(“background-color”, “#ff00ff”); } return linkFunction; } return directive; }); mainApp.controller(”StudentController”, function($scope) { $scope.Mahesh = {}; $scope.Mahesh.name = “Mahesh Parashar”; $scope.Mahesh.rollno = 1; $scope.Piyush = {}; $scope.Piyush.name = “Piyush Parashar”; $scope.Piyush.rollno = 2; }); </script> </body> </html> Output Open textAngularJS.htm in a web browser. See the result. Print Page Previous Next Advertisements ”;
AngularJS – Todo Application ”; Previous Next We are providing an example of Todo app. To develop this app, we have used HTML, CSS and AngularJS. We have included javascripts such as angular-route.js, and base.js. Source code available at here Print Page Previous Next Advertisements ”;