Introduction – AngularJS
Misko Hevery, a Google employee, developed AngularJS. First version 1.0 of AngularJS was released in 2012. Now AngularJS is fully supported by Google. HTML is extended by AngularJS. It provided new attributes to HTML. AngularJS is good for Single Page Applications (SPAs). AngularJS is a Javascript framework. Angular Directives extend the HTML attributes. AngularJS extends HTML with data-ng-directives or ng-directives. The ng-app: It defines an AngularJS application. The ng-model: It binds the value of HTML controls like input, select, text area etc to application data. The ng-bind: This directive binds application data to the HTML view to display output. For […]
Expressions – AngularJS
AngularJS expressions contain operators,literals, and variables. AngularJS expressions can be written inside HTML while JavaScript expressions can’t be. AngularJS expressions do not support conditionals, loops, and exceptions. AngularJS expressions support filters. Expressions are written inside double curly braces. They contain variables, literals and operators. For example: {{exp}} {{23-19}} , {{11+89}}, {{stateName +’ ‘+cityName}} <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <body> <div ng-app=""> <span>Expression sum: {{ 23 + 2 }}</span> </div> </body> </html> Try ng-bind: ng-bind directive can be used to bind the innerHTML to the value returned from an expression. Example without ng-bind: <div ng-app="" ng-init="a=10;b=50"> […]
Modules – AngularJS
Modules are containers for appication controller. They contain different parts of an application. <div ng-app="firstApp" ng-controller="firstCtroller"> {{ state + " " + city }} </div> <script> var app = angular.module("firstApp", []); app.controller("firstCtroller", function($scope) { $scope.state = "Hyderabad"; $scope.city = "Sikandrabad"; }); </script> Try In above example $scope. Adding Custom Directive: You can add custom directive to your application. There are certain rules to define custom directives. you nee do create module and then you can add directive to that module. <div ng-app="appOne" custom-directive></div><script> var app = angular.module("appOne", []); app.directive("customDirective", function() { return { template : "<span id='newspan' style='color:GREEN'>Hello […]
Directives – AngularJS
Using Directives you can extend HTML attributes. In AngularJS you can define your own directives while it has its own set of directives. In angularJS, directives start with ng- prefix like ng-app, ng-init, ng-model etc. <div ng-app="" ng-init="a=10;b=50"> <p>Result: {{ a * b }}</p> </div> Try Using ng-bind: <div ng-app="" ng-init="a=10;b=50"> <p ng-bind="a * b"></p> </div> Try Data Binding in AngularJS: Using ng-model directive it binds AngularJS expressions with AngularJS data. Repeating nodes: ng-repeat directive is used to repeat HTML elements in AngularJS. <span ng-app=”” ng-init=”states=[‘UP’,’MP’,’HYD’]”> <ul> <li ng-repeat=”a in states”> {{ a }} </li> </ul> </span> Try […]
Models – AngularJS
Using ng-model directive you bind value of input controls to the application data. <html> <body> <div ng-app=""> <p>My Name: <input type="text" ng-model="mname"></p> <span ng-bind="mname"></span> </div> </body> </html> Try Validating Input using ng-model: ng-model can be used to validate user input values. <form ng-app="" name="frm1"> Quantity: <input type="number" name="quantity" ng-model="text"> <span ng-show="frm1.quantity.$error.number">Invalid quantity. Numeric expected.</span> </form> Try You can get status of application data using ng-model directive. <form ng-app="" name="frm1"> Quantity: <input type="number" name="quantity" ng-model="text"> <span ng-show="frm1.quantity.$error.number">Invalid quantity. Numeric expected.</span> <br>Status: {{frm1.quantity.$valid}} </form> Try ng-model provides css according to status. <style> input.ng-empty { background-color: lightblue; } </style> <form […]
Controllers – AngularJS
Controllers are used to control the flow of data in AngularJS application. ng-controller directive is used to define controller. Controllers are JavaScript objects that contain attributes and functions. Attributes are also called as properties. $scope object is used to invoke the controller. $scope refers to the application which uses the application. We are creating a simple Controller here: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="firstApp" ng-controller="firstCtroller"> {{ state + " " + city }} <div>Full Address: {{address}}</div> </div> <script> var app = angular.module("firstApp", []); app.controller("firstCtroller", function($scope) { $scope.state = "Hyderabad"; $scope.city = "Sikandrabad"; $scope.address = $scope.state + " " + $scope.city; }); </script> […]
Scope – AngularJS
Scope joins the view and the controller. There are 3 parts of AngularJS program: Model, View and Controller. $scope is JavaScript Object that contains Model data(properties and methods) and is accessible to view and controller. $scope is passed as argument in controller. It should be first argument. Functions can also be defined in $scope object. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="firstApp" ng-controller="firstCtroller"> Enter state name: <input type = "text" ng-model = "addr.state"><br> Enter city name: <input type = "text" ng-model = "addr.city"><br> Address name: <input type = "text" ng-model = "addr.address()"><br> <div >Address name: {{addr.address()}}</div> <div ng-bind="addr.address()"></div> </div> <script> var app = […]
Filters – AngularJS
AngularJS provides Filter to modify data in view. There are different types of filters as per requirement. uppercase : uppercase filter is used to transform data into upper case. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="firstApp" ng-controller="firstCtroller"> Enter state name: <input type = "text" ng-model = "addr.state"><br> <div >State name: {{addr.state | uppercase}}</div> </div> <script> var app = angular.module("firstApp", []); app.controller('firstCtroller', function($scope) { $scope.addr = { state: "Hyderabad" }; }); </script> Try lowercase : lowercase filter is used to transform data into lower case. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="firstApp" ng-controller="firstCtroller"> Enter state name: <input type = "text" ng-model = "addr.state"><br> <div >State name: {{addr.state […]
Services – AngularJS
Services are JavaScript functions that are designed to perform some specific operation. These services can be called by controllers and filters etc. There are many built in service available in AngularJS. You can also design Your own custom services. Some of built-in service are: $location $http $timeout – Works as window.setTimeout in javascript. $interval – works as window.setInterval in javascript etc Using $location service: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="customapp" ng-controller="serviceCtrl"> <span> {{url}} </span> </div> <script> var app = angular.module('customapp', []); app.controller('serviceCtrl', function($scope,$location) { $scope.url = $location.absUrl() }); </script> Try Using $http Service: $http service is used most often in AngularJS application. […]
AJAX Http – AngularJS
$http service is used to get data from remote server. It makes HTTP request to get data. Following are methods available in $http service: .get() .put() .post() .delete() .head() .jsonp() .patch() These are called short cut methods. See bellow example using method .get() <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="customapp" ng-controller="serviceCtrl"> <span> {{response}} </span> </div> <script> var Myapp = angular.module('customapp', []); Myapp.controller('serviceCtrl', function($scope,$http) { $http.get("tryit/angularjs/hello.html").then(function (responseData) { $scope.response = responseData.data; }); }); </script> Try In expandable format .get() can be written as given example: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> <div ng-app="customapp" ng-controller="serviceCtrl"> <span> {{response}} </span> </div> <script> var Myapp = angular.module('customapp', []); Myapp.controller('serviceCtrl', function($scope,$http) { $http.get({ […]
