标签：
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 extends HTML with ng-directives.(指令)
The ng-app directive defines(定义/声明了angularjs应用) 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(视图).
例子：
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
Example explained:
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.
The ng-model directive binds the value of the input field to the application variable name.(指令ng-model把input的值绑定到了angularjs应用的变量name上)
The ng-bind directive binds the innerHTML of the <p> element to the application variable name.(指令ng-bind把<p>绑定到了angularjs应用的变量name上)
As you have already seen, AngularJS directives are HTML attributes with an ng prefix.(特殊的HTML attributes)
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS will "output" data exactly where the expression is written:
AngularJS expressions bind AngularJS data to HTML the same way as the ng-bind directive.
AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines the controller.
AngularJS binds data to HTML using Expressions.(把angularJS的数据绑定到html上面 用的是expression)
AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS expressions can also be written inside a directive(用指令): ng-bind="expression".
AngularJS will resolve the expression(解析), and return the result exactly where the expression is written.
AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.
Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.(字母，操作符，变量)
Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
AngularJS expressions support filters, while JavaScript expressions do not.
An AngularJS module defines an application.(定义了一个应用)
The module is a container for the different parts of an application.
The module is a container for the application controllers.
Controllers always belong to a module.(控制器总是属于一个模块)
A module is created by using the AngularJS function angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
The "myApp" parameter refers to an HTML element in which the application will run(应用将会在哪个元素内部运行).
Now you can add controllers, directives, filters, and more, to your AngularJS application.
Add a controller to your application, and refer to the controller with the ng-controller directive:
AngularJS has a set of built-in directives which you can use to add functionality(增加功能) to your application.
In addition you can use the module to add your own directives to your applications:
AngularJS lets you extend HTML with new attributes(算是angularjs语境下新的特性) called Directives.
AngularJS has a set of built-in directives which offers functionality to your applications.
AngularJS also lets you define your own directives.
AngularJS directives are extended HTML attributes with the prefix ng-.(指令是一些被“扩展”了的html属性)
The {{ firstName }} expression, in the example above, is an AngularJS data binding expression.
Data binding in AngularJS binds AngularJS expressions with AngularJS data.(表达式和数据绑定在一起)
{{ firstName }} is bound with ng-model="firstName".
New directives are created by using the .directive function.
You can restrict your directives to only be invoked by some of the methods.
The legal restrict values are:
E for Element nameA for AttributeC for ClassM for Comment ng-model的作用主要是双向绑定，纯粹输出的话用{{}}方法就可以了
The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
With the ng-model directive you can bind the value of an input field to a variable(变量) created in AngularJS.
The binding goes both ways. If the user changes the value inside the input field, the AngularJS property will also change its value:
Data binding in AngularJS is the synchronization between the model and the view. 数据绑定在Angularjs中指的是数据模型和视图之间的绑定
Data binding in AngularJS is the synchronization between the model and the view.(视图和模型的绑定)
AngularJS applications usually have a data model. The data model is a collection(集合) of data available for the application.
The HTML container where the AngularJS application is displayed, is called the view.
The view has access(接触，获取) to the model, and there are several ways of displaying model data in the view.
ng-bind directive, which will bind the innerHTML of the element to the specified model property:{{ }} to display content from the model:3 use the ng-model directive on HTML controls to bind the model to the view.
Data binding in AngularJS is the synchronization between the model and the view.
When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.(数据模型变化，视图就会变化；视图变化，数据模型立即变化)
This happens immediately and automatically, which makes sure that the model and the view is updated at all times.
AngularJS controllers control the data(控制着angularjs的数据) of AngularJS applications.
AngularJS controllers are regular JavaScript Objects.(常规的js对象)
AngularJS applications are controlled by controllers.
The ng-controller directive defines the application controller.
A controller is a JavaScript Object, created by a standard JavaScript object constructor.
例子
<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>
Application explained:
The AngularJS application is defined by ng-app="myApp". The application runs inside the <div>.
The ng-controller="myCtrl" attribute is an AngularJS directive. It defines a controller.
The myCtrl function is a JavaScript function.
AngularJS will invoke the controller with a $scope(对象) object.
In AngularJS, $scope is the application object (the owner of application variables and functions(拥有变量和函数)).
The controller creates two properties (variables) in the scope (firstName and lastName).
The ng-model directives bind the input fields to the controller properties (firstName and lastName).
The example above demonstrated a controller object with two properties: lastName and firstName.
A controller can also have methods (variables as functions):
The scope is the binding part(连接部分) between the HTML (view) and the JavaScript (controller).(视图和控制器)
The scope is an object with the available properties and methods(属性和方法).
The scope is available for both the view and the controller.
pass the $scope object as an argument:
When adding properties to the $scope object in the controller, the view (HTML) gets access to these properties.
In the view, you do not use(不用前缀)the prefix $scope, you just refer to a propertyname, like {{carname}}.
If we consider an AngularJS application to consist of:
Then the scope is the Model.
The scope is a JavaScript object with properties and methods, which are available for both the view and the controller.
It is important to know which scope you are dealing with, at any time.
Filters can be added in AngularJS to format data.
In AngularJS you can make your own service, or use one of the many built-in services.
In AngularJS, a service is a function, or object, that is available for, and limited to, your AngularJS application.
In order to use the service in the controller, it must be defined as a dependency(依赖，需要传入控制器函数中).
For many services, like the $location service, it seems like you could use objects that are already(早就存在在dom中的) in the DOM, like thewindow.location object, and you could, but it would have some limitations, at least for your AngularJS application.
AngularJS constantly supervises your application, and for it to handle changes and events properly, AngularJS prefers that you use the $location service instead of the window.location object.
AngularJS has its own HTML events directives.
The event directives allows us to run AngularJS functions at certain user events.
An AngularJS event will not overwrite an HTML event, both events will be executed.
The ngRoute module helps your application to become a Single Page Application(SPA单页应用).
The ngRoute module routes your application to different pages without reloading the entire application.
Your application needs a container to put the content provided by the routing.This container is the ng-view directive.
标签：
原文地址：http://www.cnblogs.com/oneplace/p/5635797.html
