Introduction to AngularJS
AngularJS is a JavaScript framework. It can be added to HTML pages via the <script> tag.
AngularJS extends HTML through directives and binds data to HTML through expressions.
AngularJS is a JavaScript framework
AngularJS is a JavaScript framework. It is a library written in JavaScript.
AngularJS is published as a JavaScript file, which can be added to web pages through the script tag:
 | ##We recommend placing the script at the bottom of the <body> element. This will improve page loading speed because HTML loading is not subject to script loading. |
|---|
https://github.com/angular/angular.js/releases
AngularJS extends HTMLAngularJS extends HTML through
ng-directives. The
ng-app directive defines an AngularJS application.
ng-model directive binds element values (such as the value of an input field) to the application.
ng-bind directive binds application data to an HTML view.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>名字 : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>Run Instance»Click the "Run Instance" button to view the online instance
ng-app directive tells AngularJS that the <div> element is the "owner" of the AngularJS application. The
ng-model directive binds the value of the input field to the application variable name. The
ng-bind directive binds the application variable name to the innerHTML of a paragraph.
| ##If you remove the | ng-appdirective, the HTML The expression will be displayed directly and the result of the expression will not be calculated. |
|---|
| HTML5 allows extended (homemade) attributes, starting with data-. AngularJS attributes start with ng-, but you can use data-ng- to make the page valid for HTML5. |
|---|
With valid HTML5:
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div data-ng-app="" data-ng-init="firstName='John'"> <p>姓名为 <span data-ng-bind="firstName"></span></p> </div> </body> </html>
Run Instance»
Click the "Run Instance" button View online examples
AngularJS expression
AngularJS expressions are written within double curly brackets: {{ expression }}.
AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.
AngularJS will "output" data where the expression is written.
AngularJS Expressions Much like JavaScript Expressions: They can contain literals, operators, and variables.
Instance{{ 5 + 5 }} or {{ firstName + " " + lastName }}
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>我的第一个表达式： {{ 5 + 5 }}</p>
</div>
</body>
</html>Run Example»
Click the "Run Example" button to view the online example
##AngularJS ApplicationAngularJS
Module Defines the AngularJS application.
AngularJSController (Controller) Used to control AngularJS applications.
ng-app directive defines the application, ng-controller defines the controller.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<p>尝试修改以下表单。</p>
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
</body>
</html>Run Instance»Click "Run Instance" Button to view online examples
$scope.lastName= "Doe";
});
