前 言
AngularJS，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到 HTML 页面。
1AngularJS的表达式
AngularJS 使用 表达式 把数据绑定到 HTML.
AngularJS 表达式写在双大括号内：{{ expression }}。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
AngularJS 将在表达式书写的位置"输出"数据。
AngularJS 表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量。
实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}.
实例
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body> <div ng-app=""> ????<p>我的第一个表达式: {{ 5 + 5 }}</p></div> </body></html>2AngularJS的模块
模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块
创建模块
可以通过 AngularJS 的 angular.module 函数来创建模块：
<div ng-app="myApp">...</div><script>var app = angular.module("myApp", []); </script>"myApp" 参数对应执行应用的 HTML 元素。
现在你可以在 AngularJS 应用中添加控制器，指令，过滤器等
添加控制器
可以使用 ng-controller 指令来添加应用的控制器:
<div ng-app="myApp" ng-controller="myCtrl">{{ firstName + " " + lastName }}</div><script>var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) { ???$scope.firstName = "John"; ???$scope.lastName = "Doe";});</script>添加指令
AngularJS 提供了很多内置的指令，你可以使用它们来为你的应用添加功能。
完整的指令内容可以参阅 AngularJS 参考手册。
此外，你可以使用模块来为你应用添加自己的指令：
<div ng-app="myApp" runoob-directive></div><script>var app = angular.module("myApp", []);app.directive("runoobDirective", function() { ???return { ???????template : "我在指令构造器中创建!" ???};});</script>模块和控制器包含在 JS 文件中
通常 AngularJS 应用程序将模块和控制器包含在 JavaScript 文件中。
在以下实例中， "myApp.js" 包含了应用模块的定义程序， "myCtrl.js" 文件包含了控制器：
<!DOCTYPE html><html><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script><body><div ng-app="myApp" ng-controller="myCtrl">{{ firstName + " " + lastName }}</div><script src="myApp.js"></script><script src="myCtrl.js"></script></body></html>3内AngularJs的scSCOPE（作用域）
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上
如何使用 Scope
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
<div ng-app="myApp" ng-controller="myCtrl"><h1>{{carname}}</h1></div><script>var app = angular.module(‘myApp‘, []);app.controller(‘myCtrl‘, function($scope) { ???$scope.carname = "Volvo";});</script当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}.
如果你修改了视图，模型和控制器也会相应更新.
<div ng-app="myApp" ng-controller="myCtrl"> ???<input ng-model="name"> ???<h1>{{greeting}}</h1> ???<button ng-click=‘sayHello()‘>点我</button> ???</div> <script>var app = angular.module(‘myApp‘, []);app.controller(‘myCtrl‘, function($scope) { ???$scope.name = "Runoob"; ???$scope.sayHello = function() { ???????$scope.greeting = ‘Hello ‘ + $scope.name + ‘!‘; ???};});</script>Scope 作用范围
了解你当前使用的 scope 是非常重要的。
在以上两个实例中，只有一个作用域 scope，所以处理起来比较简单，但在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。
<div ng-app="myApp" ng-controller="myCtrl"><ul> ???<li ng-repeat="x in names">{{x}}</li></ul></div><script>var app = angular.module(‘myApp‘, []);app.controller(‘myCtrl‘, function($scope) { ???$scope.names = ["Emil", "Tobias", "Linus"];});</script>根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
<div ng-app="myApp" ng-controller="myCtrl"><h1>{{lastname}} 家族成员:</h1><ul> ???<li ng-repeat="x in names">{{x}} {{lastname}}</li></ul></div><script>var app = angular.module(‘myApp‘, []);app.controller(‘myCtrl‘, function($scope, $rootScope) { ???$scope.names = ["Emil", "Tobias", "Linus"]; ???$rootScope.lastname = "Refsnes";});</script>4内AngularJs的依赖注入
什么是依赖注入
wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖.
value
Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：
// 定义一个模块var mainApp = angular.module("mainApp", []);// 创建 value 对象 "defaultInput" 并传递数据mainApp.value("defaultInput", 5);...// 将 "defaultInput" 注入到控制器mainApp.controller(‘CalcController‘, function($scope, CalcService, defaultInput) { ??$scope.number = defaultInput; ??$scope.result = CalcService.square($scope.number); ?????$scope.square = function() { ?????$scope.result = CalcService.square($scope.number); ??}});factory
factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
// 定义一个模块var mainApp = angular.module("mainApp", []);// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbersmainApp.factory(‘MathService‘, function() { ??var factory = {}; ?????factory.multiply = function(a, b) { ?????return a * b ??} ??return factory;}); // 在 service 中注入 factory "MathService"mainApp.service(‘CalcService‘, function(MathService){ ??this.square = function(a) { ?????return MathService.multiply(a,a); ??}});provider
AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory
// 定义一个模块var mainApp = angular.module("mainApp", []);...// 使用 provider 创建 service 定义一个方法用于计算两数乘积mainApp.config(function($provide) { ??$provide.provider(‘MathService‘, function() { ?????this.$get = function() { ????????var factory = {}; ???????????????????factory.multiply = function(a, b) { ???????????return a * b; ?????????} ????????return factory; ?????}; ??});})AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。
自动化双向数据绑定AngularJs---入门
原文地址：http://www.cnblogs.com/zzzzyy/p/7669851.html