Angular1.x 基础总结

官方文档：Guide to AngularJS Documentation   w3shools    angularjs教程  wiki   《AngularJS权威教程》

Introduction

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.

The AngularJS framework works by first reading the HTML page, which has embedded into it additional custom tag attributes. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

AngularJS Extends HTML

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上)

AngularJS Directives

As you have already seen, AngularJS directives are HTML attributes with an ng prefix.(特殊的HTML attributes)

AngularJS Expressions

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 Applications

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 Expressions(表达式)

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.

AngularJS Expressions vs. JavaScript Expressions

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.

表达式和 eval(javascript) 非常相似，但是由于表达式由AngularJS来处理，它们有以下显著不同的特性：

 所有的表达式都在其所属的作用域内部执行，并有访问本地 $scope 的权限；

 如果表达式发生了 TypeError 和 ReferenceError 并不会抛出异常

 不允许使用任何流程控制功能（条件控制，例如 if/eles ）；

 可以接受过滤器和过滤器链。

对表达式进行的任何操作，都会在其所属的作用域内部执行，因此可以在表达式内部调用那些限制在此作用域内的变量，并进行循环、函数调用、将变量应用到数学表达式中等操作。

AngularJS Modules

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.(控制器总是属于一个模块)

Creating a Module

AngularJS允许我们使用 angular.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.

Adding a Controller

Add a controller to your application, and refer to the controller with the ng-controller directive:

Adding a 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 Directives

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.

在HTML中要用内置指令 ng-app 标记出应用的根节点。这个指令需要以属性的形式来使用，因此可以将它写到任何位置。

内置指令是打包在AngularJS内部的指令。所有内置指令的命名空间都使用 ng 作为前缀。为了防止命名空间冲突，不要在自定义指令前加 ng 前缀。

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix ng-.(指令是一些被“扩展”了的html属性)

通过AngularJS模块API中的 .directive() 方法，我们可以通过传入一个字符串和一个函数来注册一个新指令。

Data Binding(数据绑定)

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".

指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径

AngularJS ng-model Directive

ng-model的作用主要是双向绑定，纯粹输出的话用{{}}方法就可以了

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. 

The ng-model Directive

With the ng-model directive you can bind the value of an input field to a variable(变量) created in AngularJS.

Two-Way Binding(双向绑定)

The binding goes both ways. If the user changes the value inside the input field, the AngularJS property will also change its value:

Create New Directives(自定义/添加新指令)

走进AngularJs(三)自定义指令-----（上）    隔离 Scope 数据交互

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 name  标签
A for Attribute         属性
C for Class               类
M for Comment        注释

自定义指令的属性：   

restrict、template、templateUrl、replace、transclude、scope

restrict:

以元素（E）、属性（A）、类（C）或注释（M）的格式来调用指令

replace: 

将 replace 设置为 true      我们可以将自定义标签从生成的DOM中完全移除掉，并只留下由模版生成的链接。

scope:

实际上创造的是隔离作用域。本质上，意味着指令有了一个属于自己的 $scope 对象，

不能像上面的例子那样，在作用域对象内部直接设置(scope属性内部) someProperty 属性，要在DOM中像之前提到过的那样，像给函数传递参数一样，通过属性(类似于dom结构的元素，在属性中)来设置值

directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互。这三种分别是

  • @ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串，因为 dom 属性是字符串。
  • & 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
  • = 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

ng 内置指令

AngularJS提供了一系列内置指令。其中一些指令重载了原生的HTML元素，比如 <form> 和<a> 标签，当在HTML中使用标签时，并不一定能明确看出是否在使用指令。

其他内置指令通常以 ng 为前缀，很容易识别

基础的内置ng指令：

布尔属性：

布尔属性代表一个 true 或 false 值。当这个属性出现时，这个属性的值就是 true （无论实际定义的值是什么）。如果未出现，这个属性的值就是 false 。

ng-disabled:

ng-readonly:

ng-checked:

ng-selected:

ng-href:

ng-src:

在指令中使用子作用域

ng-app 为AngularJS应用创建 $rootScope 

ng-controller 则会以 $rootScope 或另外一个ng-controller 的作用域为原型创建新的子作用域。

ng-app  任何具有 ng-app 属性的DOM元素将被标记为 $rootScope 的起始点。$rootScope 是作用域链的起始点，任何嵌套在 ng-app 内的指令都会继承它。

ng-controller 内置指令 ng-controller 的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作和模型都定义在 $rootScope 上。

模型指的是 $scope 上保存的包含瞬时状态数据的JavaScript对象。持久化状态的数据应该保存到服务中，服务的作用是处理模型的持久化。

AngularJS Data Binding(数据绑定)

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会记录数据模型所包含的数据在任何特定时间点的值（在Hello World例子中就是name 的值），而不是原始值。

当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。

Data Model(数据模型)

AngularJS applications usually have a data model. The data model is a collection(集合) of data available for the application.

数据模型对象（model object）是指 $scope 对象。 $scope 对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。

HTML View(HTML视图)

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.

  • 1  use the ng-bind directive, which will bind the innerHTML of the element to the specified model property:
  • 2  use double braces {{ }} to display content from the model:

  • 3   use the ng-model directive on HTML controls to bind the model to the view.

Two-way Binding(双向绑定)

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

------------------------------------------------------------------------------

(官方资料)Understanding Controllers

In AngularJS, a Controller is defined by a JavaScript constructor function(控制器是由js构造器函数生成的) that is used to augment the AngularJS Scope.

When a Controller is attached to the DOM via the ng-controller directive, AngularJS will instantiate a new Controller object(), using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.

使用ng-controller，就会实例化出来一个控制器对象。会生成一个新的子作用域对象，并作为$scope传给控制器函数。

If the controller has been attached using the controller as syntax then the controller instance will be assigned to a property on the new scope.

如果使用controller as，控制器实例会被传给新的作用域，作为$scope的一个属性。

Use controllers to:

  • Set up the initial state of the $scope object.
  • Add behavior to the $scope object.

Do not use controllers to:

  • Manipulate DOM(操作dom) — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. AngularJS has databinding for most cases and directives to encapsulate manual DOM manipulation.
  • Format input — Use AngularJS form controls instead.
  • Filter output — Use AngularJS filters instead.
  • Share code or state across controllers — Use AngularJS services instead.
  • Manage the life-cycle of other components (for example, to create service instances).

Setting up the initial state of a $scope object

Typically, when you create an application you need to set up the initial state for the AngularJS $scope. You set up the initial state of a scope by attaching properties to the $scope object. The properties contain the view model (the model that will be presented by the view). All the $scope properties will be available to the template at the point in the DOM where the Controller is registered(控制器注册在dom的哪里，哪里的视图模型及子元素都能获取到$scope的属性).

The following example demonstrates creating a GreetingController, which attaches a greeting property containing the string 'Hola!' to the $scope:

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

We create an AngularJS Module, myApp, for our application(我们给我们的应用生成了一个Angular 模块). Then we add the controller's constructor function to the module using the .controller() method. This keeps the controller's constructor function out of the global scope(我们在模块上面加上了控制器的构造函数，用的 .controller() 方法，这样控制器的构造函数就不在全局作用域之外了).

We have used an inline injection annotation to explicitly specify the dependency of the Controller on the $scope service provided by AngularJS. See the guide on Dependency Injection for more information.

We attach our controller to the DOM using the ng-controller directive. The greeting property can now be data-bound to the template:

<div ng-controller="GreetingController">
  {{ greeting }}
</div>

Adding Behavior to a Scope Object

In order to react to events or execute computation in the view we must provide behavior to the scope. We add behavior to the scope by attaching methods to the $scope object. These methods are then available to be called from the template/view.

(在$scope对象上添加方法，然后就可以在模板/视图中进行调用了)

The following example uses a Controller to add a method, which doubles a number, to the scope:

var myApp = angular.module('myApp',[]);

myApp.controller('DoubleController', ['$scope', function($scope) {
  $scope.double = function(value) { return value * 2; };
}]);

Once the Controller has been attached to the DOM, the double method can be invoked in an AngularJS expression in the template:

<div ng-controller="DoubleController">
  Two times <input ng-model="num"> equals {{ double(num) }}
</div>

As discussed in the Concepts section of this guide, any objects (or primitives) assigned to the scope become model properties. Any methods assigned to the scope are available in the template/view, and can be invoked via AngularJS expressions and ng event handler directives (e.g. ngClick)(可以通过表达式或事件 进行 调用).

 

 

 

 

 

 

AngularJS controllers control the data(控制着angularjs的数据) of AngularJS applications.

AngularJS controllers are regular JavaScript Objects.(常规的js对象)

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。

当我们在页面上创建一个新的控制器时，AngularJS会生成并传递一个新的 $scope 给这个控制器。可以在这个控制器里初始化 $scope 。

控制器可以将与一个独立视图相关的业务逻辑封装在一个独立的容器中。尽可能地精简控制器是很好的做法。

AngularJS同其他JavaScript框架最主要的一个区别就是，控制器并不适合用来执行DOM操作、格式化或数据操作，以及除存储数据模型之外的状态维护操作。它只是视图和$scope 之间的桥梁。

控制器嵌套（作用域包含作用域）

AngularJS应用的任何一个部分，无论它渲染在哪个上下文中，都有父级作用域存在。对于ng-app 所处的层级来讲，它的父级作用域就是 $rootScope 。

有一个例外：在指令内部创建的作用域被称作孤立作用域。

除了孤立作用域外，所有的作用域都通过原型继承而来，也就是说它们都可以访问父级作用域。

AngularJS Controllers

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).

Controller Methods

The example above demonstrated a controller object with two properties: lastName and firstName.

A controller can also have methods (variables as functions):

AngularJS Scope(作用域)

 

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.

应用的作用域是和应用的数据模型相关联的，同时作用域也是表达式执行的上下文。 $scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。

作用域是应用状态的基础。基于动态绑定，我们可以依赖视图在修改数据时立刻更新 $scope ，也可以依赖 $scope 在其发生变化时立刻重新渲染视图。

作用域提供了监视数据模型变化的能力。

将应用的业务逻辑都放在控制器中，而将相关的数据都放在控制器的作用域中，这是非常完美的架构。

How to Use the Scope?

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}}.

Understanding the Scope

If we consider an AngularJS application to consist of:

  • View, which is the HTML.
  • Model, which is the data available for the current view.
  • Controller, which is the JavaScript function that makes/changes/removes/controls the data.

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.

Know Your Scope

It is important to know which scope you are dealing with, at any time.

视图和 $scope 的世界

AngularJS启动并生成视图时，会将根 ng-app 元素同 $rootScope 进行绑定。 $rootScope 是所有 $scope 对象的最上层。

$scope 对象就是一个普通的JavaScript对象，我们可以在其上随意修改或添加属性。

$scope 对象在AngularJS中充当数据模型，但与传统的数据模型不一样， $scope 并不负责处理和操作数据，它只是视图和HTML之间的桥梁，它是视图和控制器之间的胶水。$scope 的所有属性，都可以自动被视图访问到。

作用域能做什么

作用域有以下的基本功能：
 提供观察者以监视数据模型的变化；
 可以将数据模型的变化通知给整个应用，甚至是系统外的组件；
 可以进行嵌套，隔离业务功能和数据；
 给表达式提供运算时所需的执行环境

我们可以不将变量设置在 $rootScope 上，而是用控制器显式创建一个隔离的子 $scope 对象，把它设置到这个子对象上。

$scope 的生命周期

每当事件被处理时， $scope 就会对定义的表达式求值。

一、创建

在创建控制器或指令时，AngularJS会用 $injector 创建一个新的作用域，并在这个新建的控制器或指令运行时将作用域传递进去。

二、链接

当Angular开始运行时，所有的 $scope 对象都会附加或者链接到视图中。所有创建 $scope 对象的函数也会将自身附加到视图中。这些作用域将会注册当Angular应用上下文中发生变化时需要运行的函数。这些函数被称为 $watch 函数，Angular通过这些函数获知何时启动事件循环

二、更新

当事件循环运行时，它通常执行在顶层 $scope 对象上（被称作 $rootScope ），每个子作用域都执行自己的脏值检测。每个监控函数都会检查变化。如果检测到任意变化$scope 对象就会触发指定的回调函数。

四、销毁

当一个 $scope 在视图中不再需要时，这个作用域将会清理和销毁自己。尽管永远不会需要清理作用域（因为Angular会为你处理），但是知道是谁创建了这个作用域还是有用的，因为你可以使用这个 $scope 上叫做 $destory() 的方法来清理这个作用域。

指令和作用域

指令在AngularJS中被广泛使用，指令通常不会创建自己的 $scope ，但也有例外。比如ng-controller 和 ng-repeat 指令会创建自己的子作用域并将它们附加到DOM元素上

AngularJS Filters

Filters can be added in AngularJS to format data.

过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器。

在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。

在JavaScript代码中可以通过 $filter 来调用过滤器。

表单验证

要使用表单验证，首先要确保表单像上面的例子一样有一个 name 属性。

 

 

 

AngularJS Services

In AngularJS you can make your own service, or use one of the many built-in services.

What is a Service?

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(依赖，需要传入控制器函数中).

Why use Services?

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.

常用service

$rootService

Every application has a single root scope(一个“根作用域”). All other scopes are descendant scopes of the root scope. Scopes provide separation between the model and the view, via a mechanism for watching the model for changes. They also provide event emission/broadcast and subscription facility. 

AngularJS Events

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.

AngularJS Routing

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.

 

posted on 2016-07-19 17:55  kevin4dev  阅读(1428)  评论(0)  编辑  收藏  举报

导航