AngularJS—学习总结
2018-03-09 17:42
148 查看
没用过，现在学vue的比较多，主要想学习ionic：一个用来开发混合手机应用的，开源的，免费的代码库。(HTML5 Hybrid Mobile App Framework)，因为ionic 是基于Angular语法的
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
{{ quantity * cost }} 和 <span ng-bind="quantity * cost"></span> 表达一样的
currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)
(1)表达式中添加过滤器
(2)向指令添加过滤器
(3)过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
AngularJS 实例
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
演示地址：http://www.runoob.com/try/try.php?filename=try_ng_filters_input
(4)自定义过滤器
以下实例自定义一个过滤器 reverse，将字符串反转：
AngularJS 实例
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
使用格式：
// 简单的 GET 请求，可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
简写方法
POST 与 GET 简写方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
实例
<body ng-app="">
<div ng-include="'runoob.htm'"></div>
</body>
尝试一下
步骤如下：
runoob.htm 文件代码：
<h1>菜鸟教程</h1>
<p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>
(2)包含 AngularJS 代码
ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码:
sites.htm 文件代码：
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>
包含的文件 "sites.htm" 中有 AngularJS 代码，它将被正常执行：
sites.htm 文件代码：
<div ng-app="myApp" ng-controller="sitesCtrl">
<div ng-include="'sites.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
$http.get("sites.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
$dirty 表单有填写记录
$invalid 字段内容合法的
$error
$invalid 字段内容是非法的
$pristine 表单没有填写记录
演示地址：http://www.runoob.com/try/try.php?filename=try_ng_validate
ng-app 定义应用程序的根元素。
ng-bind 绑定 HTML 元素到应用程序数据
ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template 规定要使用模板替换的文本内容
ng-blur 规定 blur 事件的行为
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
ng-class 指定 HTML 元素使用的 CSS 类
ng-class-even 类似 ng-class，但只在偶数行起作用
ng-class-odd 类似 ng-class，但只在奇数行起作用
ng-click 定义元素被点击时的行为
ng-cloak 在应用正要加载时防止其闪烁
ng-controller 定义应用的控制器对象
ng-copy 规定拷贝事件的行为
ng-csp 修改内容的安全策略
ng-cut 规定剪切事件的行为
ng-dblclick 规定双击事件的行为
ng-disabled 规定一个元素是否被禁用
ng-focus 规定聚焦事件的行为
ng-hide 隐藏或显示 HTML 元素
ng-href 为 the <a> 元素指定链接
ng-if 如果条件为 false 移除 HTML 元素
ng-include 在应用中包含 HTML 文件
ng-init 定义应用的初始化值
ng-jq 定义应用必须使用到的库，如：jQuery
ng-keydown 规定按下按键事件的行为
ng-keypress 规定按下按键事件的行为
ng-keyup 规定松开按键事件的行为
ng-list 将文本转换为列表 (数组)
ng-model 绑定 HTML 控制器的值到应用数据
ng-model-options 规定如何更新模型
ng-mousedown 规定按下鼠标按键时的行为
ng-mouseenter 规定鼠标指针穿过元素时的行为
ng-mouseleave 规定鼠标指针离开元素时的行为
ng-mousemove 规定鼠标指针在指定的元素中移动时的行为
ng-mouseover 规定鼠标指针位于元素上方时的行为
ng-mouseup 规定当在元素上松开鼠标按钮时的行为
ng-non-bindable 规定元素或子元素不能绑定数据
ng-open 指定元素的 open 属性
ng-options 在 <select> 列表中指定 <options>
ng-paste 规定粘贴事件的行为
ng-readonly 指定元素的 readonly 属性
ng-repeat 定义集合中每项数据的模板
ng-selected 指定元素的 selected 属性
ng-show 显示或隐藏 HTML 元素
ng-src 指定 <img> 元素的 src 属性
ng-srcset 指定 <img> 元素的 srcset 属性
ng-style 指定元素的 style 属性
ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件
ng-value 规定 input 元素的值
API 描述
angular.lowercase() 将字符串转换为小写
angular.uppercase() 将字符串转换为大写
angular.copy() 数组或对象深度拷贝
angular.forEach() 对象或数组的迭代函数
2：比较
API 描述
angular.isArray() 如果引用的是数组返回 true
angular.isDate() 如果引用的是日期返回 true
angular.isDefined() 如果引用的已定义返回 true
angular.isElement() 如果引用的是 DOM 元素返回 true
angular.isFunction() 如果引用的是函数返回 true
angular.isNumber() 如果引用的是数字返回 true
angular.isObject() 如果引用的是对象返回 true
angular.isString() 如果引用的是字符串返回 true
angular.isUndefined() 如果引用的未定义返回 true
angular.equals() 如果两个对象相等返回 true
3：JSON
API 描述
angular.fromJson() 反序列化 JSON 字符串
angular.toJson() 序列化 JSON 字符串
4：基础
API 描述
angular.bootstrap() 手动启动 AngularJS
angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module() 创建，注册或检索 AngularJS 模块
什么是服务？
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
【服务Service】
1、内置服务：
要用服务，必须要把服务名通过controller的构造函数的参数注入进来！！！
系统内置的服务，统一使用$开头， 服务中的属性和方法统一使用$$开头！！！ 自定义服务时，需注意与系统服务的写法区分开；
* $location： 返回当前页面的URL地址信息，是一个对象；
* $http： 向服务器发送请求，类似于JQuery中的Ajax；
* $timeout： 相当于 setTimeout();
* $interval： 相当于setInterval();
2：自定义服务（相当于声明一个函数）
* 第一个参数是服务名：
* 第二个参数是自定义服务的构造函数。 我们自定义的服务，本质是一个对象。
* 对象的属性 ，可以在构造函数中，使用this.属性 表示；
* 对象的方法 ，可以在构造函数中，使用this.方法 表示；
举例如下：自定义服务：将十进制数转化为16进制
app.service("hexafy",function(){this.gongneng = "将十进制数转化为16进制";
this.func = function(num){
return num.toString(16);
}
})
在过滤器中调用服务！！也必须在声明过滤器的外层构造函数中，注入服务名称！！！
.filter("filter2",function('hexafy',$location){
return function(num){
return hexafy.func(num);
}
})
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
1：如何使用 Scope
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
AngularJS 实例
控制器中的属性对应了视图上的属性：
<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}}。
2：Scope 概述
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
AngularJS 实例
如果你修改了视图，模型和控制器也会相应更新：
<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>
3：根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 实例
创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：
<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>
wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant
value
1：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);
}
});
2：factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.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);
}
});
3: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;
};
});
});
4:constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
mainApp.constant("configParam", "constant value");
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
路由设置对象
$routeProvider.when(url,{
template:string, //在ng-view中插入简单的html内容
templateUrl:string, //在ng-view中插入html模版文件
controller:string,function / array, //在当前模版上执行的controller函数
controllerAs:string, //为controller指定别名
redirectTo:string,function, //重定向的地址
resolve:object<key,function> //指定当前controller所依赖的其他模块
});
<html>
<head>
<meta charset="utf-8">
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>实例解析：
1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令。
<div ng-view></div>
该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。
一：简介
AngularJS 是一个 JavaScript 框架。它可通过 <script> 标签添加到 HTML 页面。AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
1：表达式
AngularJS 表达式写在双大括号内：{{ expression }}。它们可以包含文字、运算符和变量。AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
{{ quantity * cost }} 和 <span ng-bind="quantity * cost"></span> 表达一样的
2:过滤器
过滤器可以使用一个管道字符（|）添加到表达式和指令中。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)
(1)表达式中添加过滤器
(2)向指令添加过滤器
(3)过滤输入
输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。
filter 过滤器从数组中选择一个子集：
AngularJS 实例
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
演示地址：http://www.runoob.com/try/try.php?filename=try_ng_filters_input
(4)自定义过滤器
以下实例自定义一个过滤器 reverse，将字符串反转：
AngularJS 实例
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.msg = "Runoob";
});
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
3:$http
是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。使用格式：
// 简单的 GET 请求，可以改为 POST
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});
简写方法
POST 与 GET 简写方法格式：
$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
4:AngularJS 包含
(1)可以使用 ng-include 指令来包含 HTML 内容:实例
<body ng-app="">
<div ng-include="'runoob.htm'"></div>
</body>
尝试一下
步骤如下：
runoob.htm 文件代码：
<h1>菜鸟教程</h1>
<p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>
(2)包含 AngularJS 代码
ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码:
sites.htm 文件代码：
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>
包含的文件 "sites.htm" 中有 AngularJS 代码，它将被正常执行：
sites.htm 文件代码：
<div ng-app="myApp" ng-controller="sitesCtrl">
<div ng-include="'sites.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
$http.get("sites.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
5：AngularJS 验证属性
AngularJS 表单和控件可以验证输入的数据。$dirty 表单有填写记录
$invalid 字段内容合法的
$error
$invalid 字段内容是非法的
$pristine 表单没有填写记录
演示地址：http://www.runoob.com/try/try.php?filename=try_ng_validate
二：AngularJS 指令
指令 描述ng-app 定义应用程序的根元素。
ng-bind 绑定 HTML 元素到应用程序数据
ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template 规定要使用模板替换的文本内容
ng-blur 规定 blur 事件的行为
ng-change 规定在内容改变时要执行的表达式
ng-checked 规定元素是否被选中
ng-class 指定 HTML 元素使用的 CSS 类
ng-class-even 类似 ng-class，但只在偶数行起作用
ng-class-odd 类似 ng-class，但只在奇数行起作用
ng-click 定义元素被点击时的行为
ng-cloak 在应用正要加载时防止其闪烁
ng-controller 定义应用的控制器对象
ng-copy 规定拷贝事件的行为
ng-csp 修改内容的安全策略
ng-cut 规定剪切事件的行为
ng-dblclick 规定双击事件的行为
ng-disabled 规定一个元素是否被禁用
ng-focus 规定聚焦事件的行为
ng-hide 隐藏或显示 HTML 元素
ng-href 为 the <a> 元素指定链接
ng-if 如果条件为 false 移除 HTML 元素
ng-include 在应用中包含 HTML 文件
ng-init 定义应用的初始化值
ng-jq 定义应用必须使用到的库，如：jQuery
ng-keydown 规定按下按键事件的行为
ng-keypress 规定按下按键事件的行为
ng-keyup 规定松开按键事件的行为
ng-list 将文本转换为列表 (数组)
ng-model 绑定 HTML 控制器的值到应用数据
ng-model-options 规定如何更新模型
ng-mousedown 规定按下鼠标按键时的行为
ng-mouseenter 规定鼠标指针穿过元素时的行为
ng-mouseleave 规定鼠标指针离开元素时的行为
ng-mousemove 规定鼠标指针在指定的元素中移动时的行为
ng-mouseover 规定鼠标指针位于元素上方时的行为
ng-mouseup 规定当在元素上松开鼠标按钮时的行为
ng-non-bindable 规定元素或子元素不能绑定数据
ng-open 指定元素的 open 属性
ng-options 在 <select> 列表中指定 <options>
ng-paste 规定粘贴事件的行为
ng-readonly 指定元素的 readonly 属性
ng-repeat 定义集合中每项数据的模板
ng-selected 指定元素的 selected 属性
ng-show 显示或隐藏 HTML 元素
ng-src 指定 <img> 元素的 src 属性
ng-srcset 指定 <img> 元素的 srcset 属性
ng-style 指定元素的 style 属性
ng-submit 规定 onsubmit 事件发生时执行的表达式
ng-switch 规定显示或隐藏子元素的条件
ng-value 规定 input 元素的值
三：AngularJS 全局 API
1：转换API 描述
angular.lowercase() 将字符串转换为小写
angular.uppercase() 将字符串转换为大写
angular.copy() 数组或对象深度拷贝
angular.forEach() 对象或数组的迭代函数
2：比较
API 描述
angular.isArray() 如果引用的是数组返回 true
angular.isDate() 如果引用的是日期返回 true
angular.isDefined() 如果引用的已定义返回 true
angular.isElement() 如果引用的是 DOM 元素返回 true
angular.isFunction() 如果引用的是函数返回 true
angular.isNumber() 如果引用的是数字返回 true
angular.isObject() 如果引用的是对象返回 true
angular.isString() 如果引用的是字符串返回 true
angular.isUndefined() 如果引用的未定义返回 true
angular.equals() 如果两个对象相等返回 true
3：JSON
API 描述
angular.fromJson() 反序列化 JSON 字符串
angular.toJson() 序列化 JSON 字符串
4：基础
API 描述
angular.bootstrap() 手动启动 AngularJS
angular.element() 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
angular.module() 创建，注册或检索 AngularJS 模块
四：AngularJS 服务(Service)
AngularJS 中你可以创建自己的服务，或使用内建服务。什么是服务？
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
【服务Service】
1、内置服务：
要用服务，必须要把服务名通过controller的构造函数的参数注入进来！！！
系统内置的服务，统一使用$开头， 服务中的属性和方法统一使用$$开头！！！ 自定义服务时，需注意与系统服务的写法区分开；
* $location： 返回当前页面的URL地址信息，是一个对象；
* $http： 向服务器发送请求，类似于JQuery中的Ajax；
* $timeout： 相当于 setTimeout();
* $interval： 相当于setInterval();
2：自定义服务（相当于声明一个函数）
* 第一个参数是服务名：
* 第二个参数是自定义服务的构造函数。 我们自定义的服务，本质是一个对象。
* 对象的属性 ，可以在构造函数中，使用this.属性 表示；
* 对象的方法 ，可以在构造函数中，使用this.方法 表示；
举例如下：自定义服务：将十进制数转化为16进制
app.service("hexafy",function(){this.gongneng = "将十进制数转化为16进制";
this.func = function(num){
return num.toString(16);
}
})
在过滤器中调用服务！！也必须在声明过滤器的外层构造函数中，注入服务名称！！！
.filter("filter2",function('hexafy',$location){
return function(num){
return hexafy.func(num);
}
})
五：AngularJS Scope(作用域)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
1：如何使用 Scope
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
AngularJS 实例
控制器中的属性对应了视图上的属性：
<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}}。
2：Scope 概述
AngularJS 应用组成如下：
View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
scope 是模型。
scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
AngularJS 实例
如果你修改了视图，模型和控制器也会相应更新：
<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>
3：根作用域
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。
$rootScope 可作用于整个应用中。是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
AngularJS 实例
创建控制器时，将 $rootScope 作为参数传递，可在应用中使用：
<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>
六：AngularJS 依赖注入
什么是依赖注入wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖
AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：
value
factory
service
provider
constant
value
1：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);
}
});
2：factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。
// 定义一个模块
var mainApp = angular.module("mainApp", []);
// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.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);
}
});
3: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;
};
});
});
4:constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。
mainApp.constant("configParam", "constant value");
七：AngularJS 路由
AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
路由设置对象
$routeProvider.when(url,{
template:string, //在ng-view中插入简单的html内容
templateUrl:string, //在ng-view中插入html模版文件
controller:string,function / array, //在当前模版上执行的controller函数
controllerAs:string, //为controller指定别名
redirectTo:string,function, //重定向的地址
resolve:object<key,function> //指定当前controller所依赖的其他模块
});
<html>
<head>
<meta charset="utf-8">
</head>
<body ng-app='routingDemoApp'>
<h2>AngularJS 路由应用</h2>
<ul>
<li><a href="#/">首页</a></li>
<li><a href="#/computers">电脑</a></li>
<li><a href="#/printers">打印机</a></li>
<li><a href="#/blabla">其他</a></li>
</ul>
<div ng-view></div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<script>
angular.module('routingDemoApp',['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
</script>
</body>
</html>实例解析：
1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
angular.module('routingDemoApp',['ngRoute'])
3、使用 ngView 指令。
<div ng-view></div>
该 div 内的 HTML 内容会根据路由的变化而变化。
4、配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。
module.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{template:'这是首页页面'})
.when('/computers',{template:'这是电脑分类页面'})
.when('/printers',{template:'这是打印机页面'})
.otherwise({redirectTo:'/'});
}]);
AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- AngularJs学习总结
- :angularjs学习总结(~~很详细的教程) 很不错的一篇帖子 适合快速了解angularjs整体结构 有个整体印象
- 关于AngularJs中的路由学习总结
- angularjs学习总结一(表达式、指令、模型)
- angularjs学习总结(~~很详细的教程) 适合快速了解angularjs整体结构 有个整体印象
- angularjs学习总结(~~很详细的教程)
- 前端MVC学习总结（三）——AngularJS服务、路由、内置API、jQueryLite
- angularjs学习总结 详细教程（转载）
- angularjs学习总结 详细教程
- angularjs学习总结 详细教程
- 学习angularjs的总结与心得-作用域
- AngularJs学习总结－了解基本特性（－）
- angularjs学习总结 详细教程
- Angularjs 学习笔记总结之二
- AngularJS学习总结
- angularjs学习总结 详细教程
- AngularJS学习总结
- angularjs学习总结 详细教程
- 学习angularjs的总结与心得-hide/show
- AngularJS学习总结