AngularJS – Timer Application ”; Previous Next We are providing an example of Timer app. To develop this app, we have used HTML, CSS, Timer.js and AngularJS. Source code available at here Print Page Previous Next Advertisements ”;
AngularJS – Questions and Answers ”; Previous Next AngularJS Questions and Answers has been designed with a special intention of helping students and professionals preparing for various Certification Exams and Job Interviews. This section provides a useful collection of sample Interview Questions and Multiple Choice Questions (MCQs) and their answers with appropriate explanations. Sr.No. Question/Answers Type 1 AngularJS Interview Questions This section provides a huge collection of AngularJS Interview Questions with their answers hidden in a box to challenge you to have a go at them before discovering the correct answer. 2 AngularJS Online Quiz This section provides a great collection of AngularJS Multiple Choice Questions (MCQs) on a single page along with their correct answers and explanation. If you select the right option, it turns green; else red. 3 AngularJS Online Test If you are preparing to appear for a Java and AngularJS Framework related certification exam, then this section is a must for you. This section simulates a real online test along with a given timer which challenges you to complete the test within a given time-frame. Finally you can check your overall test score and how you fared among millions of other candidates who attended this online test. 4 AngularJS Mock Test This section provides various mock tests that you can download at your local machine and solve offline. Every mock test is supplied with a mock test key to let you verify the final score and grade yourself. Print Page Previous Next Advertisements ”;
AngularJS – Drag Application ”; Previous Next We are providing an example of Drag app. To develop this app, we have used HTML, CSS, ngDraggable.js and AngularJS. Source code available at here Print Page Previous Next Advertisements ”;
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 ”;
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 ”;
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 ”;
AngularJS – Bootstrap Application ”; Previous Next We are providing an example of Bootstrap app. To develop this app, we have used HTML, CSS and AngularJS. Source code available at here Print Page Previous Next Advertisements ”;
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 ”;