Various concepts of AngularJS are discussed.<\/p>\n
AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:<\/p>\n
<script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js”><\/script><\/p>\n
AngularJS extends HTML with ng-directives. The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.<\/p>\n
Example<\/strong><\/p>\n <!DOCTYPE html><\/p>\n <html><\/p>\n <script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js”><\/script><\/p>\n <body><\/p>\n <div ng-app=””><\/p>\n <p>Name: <input type=”text” ng-model=”name”><\/p><\/p>\n <p ng-bind=”name”><\/p><\/p>\n <\/div><\/p>\n <\/body><\/p>\n <\/html><\/p>\n Example explained:<\/p>\n AngularJS starts automatically when the web page has loaded. The ng-app directive tells AngularJS that the <div> element is the “owner” of an AngularJS application.<\/p>\n The ng-model directive binds the value of the input field to the application variable name. The ng-bind directive binds the innerHTML of the <p> element to the application variable name.<\/p>\n AngularJS directives are HTML attributes with an ng prefix. The ng-init directive initializes AngularJS application variables.<\/p>\n Example<\/strong><\/p>\n <div ng-app=”” ng-init=”firstName=’Demo'”><\/p>\n <p>The name is <span ng-bind=”firstName”><\/span><\/p><\/p>\n <\/div><\/p>\n AngularJS expressions are written inside double braces: {{ expression }}. AngularJS will “output” data exactly where the expression is written:<\/p>\n Example<\/strong><\/p>\n <!DOCTYPE html><\/p>\n <html><\/p>\n <script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js”><\/script><\/p>\n <body><\/p>\n <div ng-app=””><\/p>\n <p>My first expression: {{ 5 + 5 }}<\/p><\/p>\n <\/div><\/p>\n <\/body><\/p>\n <\/html><\/p>\n AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.<\/p>\n Example<\/strong><\/p>\n <!DOCTYPE html><\/p>\n <html><\/p>\n <script src=”https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js”><\/script><\/p>\n <body><\/p>\n <div ng-app=””><\/p>\n <p>Name: <input type=”text” ng-model=”name”><\/p><\/p>\n <p>{{name}}<\/p><\/p>\n <\/div><\/p>\n <\/body><\/p>\n <\/html><\/p>\n AngularJS modules define AngularJS applications. AngularJS controllers control AngularJS applications. The ng-app directive defines the application, the ng-controller directive defines the controller.<\/p>\n Example<\/strong><\/p>\n <div ng-app=”myApp” ng-controller=”myCtrl”><\/p>\n First Name: <input type=”text” ng-model=”firstName”><br><\/p>\n Last Name: <input type=”text” ng-model=”lastName”><br><\/p>\n <br><\/p>\n Full Name: {{firstName + ” ” + lastName}}<\/p>\n <\/div><\/p>\n <script><\/p>\n var app = angular.module(‘myApp’, []);<\/p>\n app.controller(‘myCtrl’, function($scope) {<\/p>\n $scope.firstName= “Demo”;<\/p>\n $scope.lastName= “User”;<\/p>\n });<\/p>\n <\/script><\/p>\n AngularJS modules define applications:<\/p>\n AngularJS Module<\/strong><\/p>\n var app = angular.module(‘myApp’, []);<\/p>\n AngularJS controllers control applications:<\/p>\n AngularJS Controller<\/strong><\/p>\n app.controller(‘myCtrl’, function($scope) {<\/p>\n $scope.firstName= “Demo”;<\/p>\n $scope.lastName= “User”;<\/p>\n });<\/p>\n","protected":false},"excerpt":{"rendered":" Various concepts of AngularJS are discussed. AngularJS and Javascript AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. AngularJS is a JavaScript framework. It is a library written in JavaScript. AngularJS is distributed as…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8417],"tags":[8419],"class_list":["post-72288","page","type-page","status-publish","hentry","category-angular-js-web-development","tag-angularjs-concepts"],"acf":[],"yoast_head":"\nAngularJS Directives<\/h4>\n
AngularJS Expressions<\/h4>\n
AngularJS Applications<\/h4>\n