AngularJS is a JavaScript framework. It can be added to HTML pages via the http://cdn.bootcss.com/angular.js/1.3.14/angular.min.js">>
AngularJS extends HTML
AngularJS extends HTML through a series of ng-directives.
The ng-app directive defines the AngularJS application.
The ng-model directive binds the value of the HTML control to the data model.
The ng-bind directive binds model data to the HTML view.
<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body>
Example description:
AngularJS automatically starts execution when the page is loaded.
The ng-app directive tells AngularJS that the
The ng-model directive binds the value of the input tag to the variable name.
The ng-bind directive binds the value of the variable name to the innerHTML attribute of the
element.
AngularJS Commands
As you can see, AngularJS directives are a set of HTML attributes starting with ng.
AngularJS Application variables can be initialized through the ng-init directive.
<div ng-app="" ng-init="firstName='John'"> <p>The name is <span ng-bind="firstName"></span></p> </div>
Equivalent code:
<div data-ng-app="" data-ng-init="firstName='John'"> <p>The name is <span data-ng-bind="firstName"></span></p> </div>
Note You can use the prefix data-ng- instead of ng- to ensure that the HTML on the page is valid.
You will learn more AngularJS directives in later chapters.
AngularJS expression
AngularJS expressions are written in double braces: {{ expression statement }}.
AngularJS will accurately "output" the expression as the calculated result, for example:
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html>
AngularJS expressions bind data to HTML in the same way as the ng-bind directive.
<!DOCTYPE html> <html> <script src="angular.min.js"></script> <body> <div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p>{{name}}</p> </div> </body> </html>
You will learn more about AngularJS expressions in the following chapters.
AngularJS Application
The AngularJS module defines AngularJS Applications.
AngularJS controllers control the behavior of AngularJS Applications.
The ng-app directive is used to specify the application, and the ng-controller directive is used to specify the controller.
<div ng-app="myApp" ng-controller="myCtrl"> First Name: <input type="text" ng-model="firstName"><br> Last Name: <input type="text" ng-model="lastName"><br> <br> Full Name: {{firstName + " " + lastName}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; }); </script>
AngularJS module definition applications:
var app = angular.module('myApp', []); AngularJS控制器控制AngularJS Applications的行为: app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe"; });
You will learn more about modules and controllers in the following chapters.