AngularJS

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #rust #docker #macos #cli #pytorch #security #openai #open-source

(★ 77)

Angular框架使用 from start to end ^_^ :heart_eyes:

AngularJS 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Angular-tutorial code by SangJingRui

## 控制器

| Controller ||
| --------- | --------- |
|[Angular控制器](https://wscats.github.io/angular-tutorial/angular控制器.html)|[Angular表达式](https://wscats.github.io/angular-tutorial/angular表达式.html)|
|[Angular事件广播](https://wscats.github.io/angular-tutorial/angular事件广播.html)|[Angular基于$window的数据通信](https://wscats.github.io/angular-tutorial/angular基于$window的数据通信.html)|
|[Angular表达式执行函数](https://wscats.github.io/angular-tutorial/Angular表达式执行方法.html)||

## 双向数据绑定
| bi-directional data binding |
| --------- |
|[Angular的$watch,$apply和$digest](https://wscats.github.io/angular-tutorial/angular的$watch,$apply和$digest.html)|

## 服务
| Service | |
| --------- | --------- |
|[Angular自定义服务的常用方法](https://github.com/Wscats/angular-tutorial/blob/gh-pages/%E5%B8%B8%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9C%8D%E5%8A%A1%E6%96%B9%E6%B3%95.md)|[Angular部分服务demo](https://wscats.github.io/angular-tutorial/部分服务demo.html)|
|[Angular自定义Canvas画图服务](https://wscats.github.io/angular-tutorial/Angular自定义Canvas画图服务.html)|[Angular自定义http服务 面向对象封装](https://wscats.github.io/angular-tutorial/自定义http服务.html)|
|[Angular的provider方法配置服务](https://wscats.github.io/angular-tutorial/angular的provider配置服务.html)||

## 组件与指令
| Directive | |
| --------- | --------- |
|[Angular自定义手势指令](https://wscats.github.io/angular-tutorial/自定义手势事件.html)|[Angular自定义轮播图组件](https://wscats.github.io/angular-tutorial/自定义directive轮播图.html)|
|[Angular自定义下拉刷新组件1](https://wscats.github.io/angular-tutorial/下拉刷新.html)|[Angular自定义下拉刷新组件2](https://wscats.github.io/angular-tutorial/Angular自定义下拉刷新组件.html)|
|[Angular内置指令](https://wscats.github.io/angular-tutorial/Angular内置指令.html)|[Angular自定义点击返回顶部指令](https://wscats.github.io/angular-tutorial/angular自定义点击返回顶部指令.html)|
|[Angular实现选项卡(1)](https://wscats.github.io/angular-tutorial/angular实现选项卡.html)|[Angular实现选项卡(2)](https://wscats.github.io/angular-tutorial/angular实现选项卡2.html)|
|[Angular封装swiper轮播图](https://wscats.github.io/angular-tutorial/angular封装swiper轮播图组件.html)|[Angular中使用ng-switch](https://wscats.github.io/angular-tutorial/ngSwitch.html)|
|[Angular的ng-transclude](https://wscats.github.io/angular-tutorial/angular的ng-transclude.html)|[Angular侧边栏组件](https://wscats.github.io/angular-tutorial/angular实现侧边栏组件.html)|

| Component | |
| --------- | --------- |
|[Angular的component方法](https://wscats.github.io/angular-tutorial/Angular的component方法.html)||

## 路由
| Router | |
| --------- | --------- |
|[Angular路由嵌套](https://wscats.github.io/angular-tutorial/UI路由嵌套DEMO.html)|[Angular路由单页多个ui-view](https://wscats.github.io/angular-tutorial/uiRoute/index.html)|

## 过滤器
| Filter | |
| --------- | --------- |
|[Angular内置过滤器](https://wscats.github.io/angular-tutorial/angular自带过滤器.html)|[Angular自定义关键词检索过滤器(1)](https://wscats.github.io/angular-tutorial/自定义关键词检索过滤器.html)|
|[Angular自定义关键词检索过滤器(2)](https://wscats.github.io/angular-tutorial/自定义关键词检索过滤器(2).html)|[limitTo实现分页](https://wscats.github.io/angular-tutorial/limitTo实现分页.html)|
|[Angular自定义关键词检索过滤器(简版)](https://wscats.github.io/angular-tutorial/自定义关键词检索过滤器(简版).html)||

## 动画
| Animate | |
| --------- | --------- |
|[Angular ng-animate动画1](https://wscats.github.io/angular-tutorial/ng-animate动画.html)|[Angular ng-animate动画2](https://wscats.github.io/angular-tutorial/ng-animate动画2.html)|

## API
| API |
| --------- |
[Angular常用api接口](https://wscats.github.io/angular-tutorial/angular常用api接口.html)|

## 表单验证
| FORM |
| --------- |
|[Angular表单验证](https://wscats.github.io/angular-tutorial/angular表单验证.html)|

## 项目
| Guess you like | |
| --------- | --------- |
|[Angular商城Demo](https://wscats.github.io/angular-tutorial/spa/mobie-b2bdemo1/index.html)|[Angular的Cnode社区](https://wscats.github.io/angular-tutorial/spa/CNode/index.html)|
|[AngularStovepipe](https://wscats.github.io/angular-tutorial/spa/Stovepipe/index.html)|[Angular的新闻客户端](https://wscats.github.io/angular-tutorial/spa/TT/index.html)|
|[Angular商城Demo](https://wscats.github.io/angular-tutorial/spa/mobie-b2bdemo1/index.html)|[Angular的Cnode社区](https://wscats.github.io/angular-tutorial/spa/CNode/index.html)|
|[Angular内联编辑器](https://wscats.github.io/angular-tutorial/angularjs5examples/inline-editor/index.html)|[Angular即时搜索](https://wscats.github.io/angular-tutorial/angularjs5examples/instant-search/index.html)|
|[Angular导航菜单](https://wscats.github.io/angular-tutorial/angularjs5examples/navigation-menu/index.html)|[Angular订单表单](https://wscats.github.io/angular-tutorial/angularjs5examples/order-form/index.html)|
|[Angular切换网格](https://wscats.github.io/angular-tutorial/angularjs5examples/switchable-grid/index.html)|[Angular新闻＋WEUI DEMO](https://wscats.github.io/angular-tutorial/spa/news/index.html) [源码](https://github.com/Wscats/angular-tutorial/tree/gh-pages/spa/NodeServerAndApi-Weui-News)|
|[Angular+Weui单页面应用DEMO-每日笑话](https://wscats.github.io/angular-tutorial/weui每日笑话.html)||

## 文档
| Article | |
| --------- | --------- |
|[ng-repeat绑定事件和嵌套](https://github.com/Wscats/angular-tutorial/issues/21)|[Angular的post请求后台接受不了数据的解决方法](https://github.com/Wscats/angular-tutorial/issues/4)|
|[ionic总结](https://github.com/Wscats/angular-tutorial/issues/19)|[ui-route和ng-route](https://github.com/Wscats/angular-tutorial/issues/17)|
|[ng-options&&ng-switch](https://github.com/Wscats/angular-tutorial/issues/15)|[directive组件作用域](https://github.com/Wscats/angular-tutorial/issues/14)|
|[表单认证](https://github.com/Wscats/angular-tutorial/issues/13)|[$broadcast,$emit and $on](https://github.com/Wscats/angular-tutorial/issues/11)|
|[自定义过滤器](https://github.com/Wscats/angular-tutorial/issues/9)|[自定义手势指令ng-touch](https://github.com/Wscats/angular-tutorial/issues/8)|
|[ng-animate](https://github.com/Wscats/angular-tutorial/issues/7)|[单页面应用的技术点](https://github.com/Wscats/angular-tutorial/issues/3)|

## 其他
| Other | |
| --------- | --------- |
|[Angular三级联动(1)](https://wscats.github.io/angular-tutorial/%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8.html)|[Angular三级联动(2)](https://wscats.github.io/angular-tutorial/三级联动改进.html)|
|[Angular事件监听](https://wscats.github.io/angular-tutorial/事件监听.html)|[Angular事件广播](https://wscats.github.io/angular-tutorial/angular事件广播.html)|
|[Angular利用angular.module()实现模块化](https://wscats.github.io/angular-tutorial/angular模块化.html)|[Angular的form表单验证](https://wscats.github.io/angular-tutorial/form表单验证.html)|
|[Angular的ng-repeat嵌套](https://wscats.github.io/angular-tutorial/ng-repeat嵌套.html)|[NodeJs静态服务器](https://github.com/Wscats/angular-tutorial/tree/gh-pages/diyNodeServer)|
|[Angular利用angular.module()实现模块化2](https://wscats.github.io/angular-tutorial/angular模块化2.html)|[Angular+Webpack](https://github.com/Wscats/angular-tutorial/tree/gh-pages/angular%2Bwebpack)|
|[Angular中使用iframe](https://wscats.github.io/angular-tutorial/iframesdemo.html)|[百度定位DEMO](https://wscats.github.io/angular-tutorial/百度地图定位DEMO.html)|
|[Angular自定义cookie服务和ngCookie的使用](https://wscats.github.io/angular-tutorial/ngCookie.html)|[Angular调用百度API接口实现公交路线查询](https://wscats.github.io/angular-tutorial/angular调用百度API接口实现公交路线查询.html)|
|[Angular调用百度API接口实现公交号查询](https://wscats.github.io/angular-tutorial/angular调用百度API接口实现公交号查询.html)||

## JS基础
| JS基础 | |
| --------- | --------- |
|[Javascript的createElement](https://wscats.github.io/angular-tutorial/createElement.html)|[Javascript的createDocumentFragment](https://wscats.github.io/angular-tutorial/createDocumentFragment.html)|
|[Javascript的节点关系型API](https://github.com/Wscats/angular-tutorial/blob/gh-pages/js基础/节点关系型API/oaoafly.md)|[Javascript的节点创建型API](https://wscats.github.io/angular-tutorial/js基础/节点创建型API)|
|[Javascript的节点查询型API](https://wscats.github.io/angular-tutorial/js基础/节点查询型API)|[Javascript的页面修改型API](https://wscats.github.io/angular-tutorial/js基础/页面修改型API)|
|[像素帧动画](https://wscats.github.io/angular-tutorial/像素动画.html)|[jQuery模拟ng-repeat](https://wscats.github.io/angular-tutorial/jquery模拟ng-repeat.html)|
|[lessDemo](https://wscats.github.io/angular-tutorial/lessDemo.html)|[lessDemo的less文件](https://wscats.github.io/angular-tutorial/stylesheets/styles.less)|
|[图灵机器人](https://wscats.github.io/angular-tutorial/图灵机器人.html)|[sessionStorage和localStorage](https://wscats.github.io/angular-tutorial/sessionStoragelocalStorage.html)|

## HTML基础
| HTML基础 | |
| --------- | --------- |
|[video和audio标签Demo](https://wscats.github.io/angular-tutorial/h5+css3/video/video&&audio标签.html)|[canvas烟花效果](https://wscats.github.io/angular-tutorial/canvas烟花效果2.html)|
|[canvas烟花效果汇总](https://wscats.github.io/angular-tutorial/canvas烟花效果汇总.html)||

## CSS基础
| CSS基础 | |
| --------- | --------- |
|[css浮动](https://wscats.github.io/angular-tutorial/h5+css3/video/css浮动问题.html)|[flex布局](https://wscats.github.io/angular-tutorial/h5+css3/video/flex布局.html)|

## Install
angular版本1.0是在 2012年发布的。
angular是由 Google的员工从2009年开始着手开发。
是一个非常好的构想，该项目由Google支持，有一个全职的开发团队继续开发和维护这个库。

当然我们要体验这个框架，就得先进行安装，打开nodejs的命令行，然后输入以下代码下载angula框架
```javascript
npm install angular
```
**注意:如果在这个后面加上@的话，就是制定版本下载**
```javascript
npm install angular@X.X.X
```
jQuery(jQ)**工具库**,angular(ng)是**框架**,框架比库大一个等级，
1. 库是一堆封装的方法，
2. 框架是一个图纸，不仅提供方法，还提供实现的思路

jQ比较轻量级,ng比较重(大而全面)
1. 除了刚才npm下载
2. 我们还可以在[官网下载](https://angularjs.org/)或者[code.angularjs.org](https://code.angularjs.org/1.5.8/)
3. 或者使用[CDN](http://www.bootcdn.cn/angular.js/)

jQ和ng
1. 不要首先设计好你的页面，然后再通过DOM操作去修改它，先考虑数据驱动再考虑节点驱动
2. 不要使用angularjs去扩展jQuery，首先要以angularjs的思维进行思考，我们再考虑jQuery，不要让jQuery成为你的拐杖，否则永远掌握不了angularjs，**注意**这里不代表说用angular就不能用jQ，只是新手建议先思考用angular解决问题，而不是优先考虑jQ
3. 要以架构为中心进行思考，尝试模块化，组件化，封装服务，过滤器等方法解决问题，提高维护性，扩展性和复用性

有一点特别需要注意：如果页面中使用了jQuery和angular，那么一定要先加载jQuery框架，然后再加载angular

## Require
angular是一个 js框架。它是一个以js编写的库
在引入的时候**一般**使用未压缩版本
压缩和未压缩的区别在于，压缩的JS，是把一些变量名用简单的字符代替，然后把一些换行跟空格跟注释删掉

把Nodejs下载好的angular框架(未压缩版本)复制到项目JS目录，然后通过`script`标签引入angular框架到HTML页面中
```javascript
<script src="js/angular.js"></script>
```

## Module
angular是用模块化开发的，所以一般来说，一个angular程序就由一个主模块完成所有功能，一个主模块是由N个小模块组装成的
定义一个模块的方法就是`angular.module()`方法，接受两个参数
```javascript
angular.module("模块的名字",['引入分模块的名字'])
```
模块化开发，方便我们团队开发，方便分工合作，方便找出问题的根源
```javascript
//定义一个模块,是一个模块函数,主模块
angular.module("app1",['app2','app3'])
//小模块
angular.module("app2",[])
angular.module("app3",[])
```
ng-app作为一个属性值可以放在任何标签上，建议放在`<html>`和`<body>`标签上，放在那个标签上，那就是主模块控制那个标签的闭合作用域

**ng-app**就是整个程序的作用域
```javascript
ng-app="主模块的名字"
```

## Controller
定义控制器就是用`.controller()`在主模块的基础上链式调用，此函数第一个参数就是控制器的名字，第二个参数就是数组，数组里面放一个匿名函数，此匿名函数就是该控制器的逻辑

控制器是js对象，由标准的js对象的构造函数创建

**ng-controller**作为控制器的定义标签，放在ng-app闭合标签的范围内
```javascript
angular.module("demo",[])
	.controller("控制器的名字",[function(){
		//code 控制器的逻辑
	}])
	.controller("控制器的名字",[function(){
	}]);
```
oaoafly控制器和winds都是由demo主模块划分出来的小作用域（小地盘）
```javascript
<html ng-app="demo">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div ng-controller="oaoafly">

</div>
		<div ng-controller="winds">

</div>
	</body>
	<script>
		angular.module("demo",[])
			.controller("oaoafly",[function(){
				//code 控制器的逻辑
			}])
			.controller("winds",[function(){
			}]);
	</script>
</html>
```
在大型的应用程序中，通常是把控制器存储在外部文件中
只需要把 `<script>`标签中的代码复制到名为`xxxController.js`的外部文件中即可
```html
<html ng-app="demo">
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div ng-controller="oaoafly">

</div>
		<div ng-controller="winds">

</div>
	</body>
	<script src="controller/oaoaflyController.js"></script>
	<script src="controller/windsController.js"></script>
</html>
```
写控制器的几种方法
```javascript
//定义被angular控制器实例化的构造函数
function oaoaflyCtrl($scope){
	//code 控制器的逻辑
}
angular.module("demo",[])
	//(1)不建议这样写
	.controller("oaoafly",oaoaflyCtrl)
	//(2)不建议这样写 压缩代码的时候，注入的服务(形参)将被替换
	.controller("winds",function($scope){
	});
	//(3)建议这样写 用中括号把函数和服务收集在一起，函数一定要写在最后面
	//数组中的服务是字符串形式保留，一定要跟函数中的形参顺序一一对应
	.controller("winds",["$scope",function($scope){
	}]);
```
[Angular控制器DEMO](https://wscats.github.io/angular-tutorial/angular控制器.html)

## MVC MVVM
MVC是一种使用 **MVC**（Model View Controller 模型-视图-控制器）设计模式，该模型的理念被许多框架所吸纳，比如，后端框架（Struts、Spring MVC等）、前端框架（Angular、Backbone等）
如图所示：
![image](https://user-images.githubusercontent.com/17243165/26959998-7bcd4148-4d06-11e7-8882-b213d934f1c4.png)
**M**:model 模型也就是存取着数据(数据来自于后台ajax&jsonp$表单提交);

**C**:controller 控制器就是一个媒介，也就是连接着数据跟视图的一直无形手，是控制model与view之间的交互;

**V**:view 视图指的是HTML代码，也可以理解为页面呈现的状态。
```javascript
	M($scope绑定的值)--C-->V(ng-bind or {{}})
	V(ng-model)--C-->M($scope绑定的值)
```
**jQ**是基于节点驱动的:`$().val,$().text`

**ng**是基于数据驱动的:`ng-model,{{}}/ng-bind`

## Scope
定义完一个控制器后，在控制器的第二个参数(函数)里面注入一个`$scope`的形参，$scope就是控制所在范围的绑定的值

控制器的$scope（相当于作用域、控制范围）用来保存angular中model（模型）的对象

angular的controller控制器中，要想将model模型中的数据传递给view视图，angular规定依附在$scope上的数据才能传递给视图
`$scope`=>`{{}}`
`$scope.name`=>`{{name}}`

模型层 M
```javascript
$scope//是一个对象
$scope.name  = "laoxie";
$scope.age = 18
```
视图层 V
```html
<div ng-controller="abc">
	<p>{{name}}</p>
	<p>{{age}}</p>
</div>
```
控制层 C
```javascript
.controller("abc",function($scope){
	$scope//是一个对象
	$scope.name  = "Wscats Oaoafly";
	$scope.age = 18
})
```
## Expression
表达式：{{}},两个大括号可以放在任何地方(标签内，标签属性值内均可以)，只要$scope定义了，{{}}对应显示对应的值，也就是在表达式书写的位置**输出**数据

如果表达式把数据绑定到 HTML，此时与 `ng-bind`指令有异曲同工之妙

可以放在标签里面，可以放在属性值里面
```html
<p>{{name}}</p>
<p id="{{name}}">{{name}}</p>
<style>
	.blue{
		color: {{color}};
	}
</style>
```
angular表达式可以显示$scope定义的数据类型

### 字符串
```html
//model
$scope.str = "Hello Oaoafly";
//view
<p>{{str}}<p>
```

### 数字
```html
//model
$scope.num = 520;
//view
<p>{{num}}<p>
```

### 数组
```html
//model
$scope.arr = ["Hello,"Oaoafly"];
//view
<p>{{arr[1]}}<p>
```

### 布尔值
```html
//model
$scope.bool = true;
//view
<p>{{bool?"Oaoafly":"Wscats"}}<p>
```

### 对象
```html
//model
$scope.obj = {
	name:"Wscats"
};
//view
<p>{{obj.name}}<p>
```

angular表达式很像js表达式：它们可以包含文字、运算符和变量
```html
<p>{{5+2*0}}</p>
<p>{{"Oaoafly"+name}}</p>

<p>{{bool?"真":"假"}}</p>
```

## 引入JS的地方
如果把`script`放在`body`前面，那么就会先加载JS，因为一般JS比较大，所以阻塞这个HTML结构的渲染
反之，为了用户体验，就先加载HTML结构，再加载JS

一般我们也会把`link`放在`body`前面，因为CSS一般比较小，并且我们要渲染页面就先需要样式，不然排版就会混乱

## 指令
angular框架自带的一套属性值，往这个属性值放制定值就呈现不同逻辑，
angular写了一套新属性称为指令的东西来扩展HTML，可以理解为简化我们操作DOM方法的封装
```javascript
	ng-XX="" //内置指令都带有前缀ng-
	ng-app //告诉ng框架，<div>元素是ng应用程序 的"所有者"和"控制者"
	ng-controller //定义了应用程序控制器
	ng-init //初始化应用程序数据
	ng-click = "function"
	ng-bind = "name" ==> {{name}}
	ng-model = "" //此指令一般配合input select textarea标签使用
	ng-repeat = "array" "单项(名字随意) in 数组" 一般配合ul select table标签使用
	ng-show = "bool""接受一个布尔值" 如果为真则显示，反之则隐藏
	ng-if = "bool" ng-if直接把DOM节点删除，或者插入DOM节点，ng-if比ng-show效率高一点
	ng-class = "object" ng-class接受的对象，对象名就是这个类名，属性值就是布尔值，如果右边的布尔值为真，那左边的类就出现，反之就隐藏
	ng-src="{{路径}}"
	ng-href="{{路径}}"
	ng-switch="变量"配合ng-switch-when=""
```
引入JS的地方会影响表达式`{{}}`的效果，所以注意:
1. 你如果用`ng-bind`，那就可以把JS放在`body`下面(严谨用这种)
2. 如果用`{{}}`，那最好把JS放在`body`上面(喜欢偷懒用这种)

[Angular内置指令DEMO](https://wscats.github.io/angular-tutorial/Angular内置指令.html)
[详情可参考文档](http://www.runoob.com/angularjs/angularjs-reference.html)

## 双向绑定
Angular实现了双向绑定机制。所谓的**双向绑定**，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。即数据模型（Model）和视图（View）之间的双向绑定

### 脏检查机制原理
双向绑定的原理从脏检查机制开始说起
脏检查机制：Angular将双向绑定转换为一堆watch表达式，然后递归这些表达式检查是否发生过变化，如果变了则执行相应的watcher函数（指view上的指令，如ng-bind，ng-show等或是{{}}）。等到model中的值不再发生变化，也就不会再有watcher被触发，一个完整的digest循环就完成了。

脏检查机制的触发：Angular中在view上声明的事件指令，如：ng-click、ng-change等，会将浏览器的事件转发给$scope上相应的model的响应函数。等待相应函数改变model，紧接着触发脏检查机制刷新view。

所以，上文中的代码无法实现相应功能的原因就是缺乏触发Angular脏检查机制的条件，而手动添加了scope.$digest()使其执行了脏检查机制更新了view。
watch表达式：可以是一个函数、可以是$scope上的一个属性名，也可以是一个字符串形式的表达式。$watch函数所监听的对象叫做watch表达式。
watcher函数：指在view上的指令（ngBind，ngShow、ngHide等）以及{{}}表达式，他们所注册的函数。每一个watcher对象都包括：监听函数，上次变化的值，获取监听表达式的方法以及监听表达式，最后还包括是否需要使用深度对比（angular.equals()）。

>脏检查机制（dirty-checking）是实现双向数据绑定的重要基础

Angular中的$digest函数：当接受view上的事件指令转发的事件时，就会切换到Angular的上下文环境，来影响这类事件，$digest循环就会触发

Angular中的$digest函数：当接受view上的事件指令转发的事件时，就会切换到Angular的上下文环境，来影响这类事件，$digest循环就会触发。

遍历一遍所有的watcher函数就是一轮脏检查，执行完一轮之后，只要有watcher监听的值改变过，那么就会重新在进行一轮，直到所有的值都没有变化。从第一轮到所有数据稳定称为一个完整的$digest循环。当循环结束后，才把模型的变化结果更新到dom中去，防止频繁的dom操作。

我们已经知道什么时候以及怎么开始digest循环了，那么digest循环具体做了些什么？

在digest循环中，AngularJS会遍历整个$watch列表，所有watcher都会被触发，当一个wathcer被触发时，AngularJS会检测Scope模型相应的数据，如果它发生了变化，那么关联到该watcher的回调函数就会被触发。

如果执行了一次digest循环后某个值发生了变化，那么AngularJS会再次循环，直至不再有任何变化。这是因为你在$watch中更新某个值，如果该值对应的$watch已在这遍循环通过，AngularJS将检测不到变化无法更新。如果循环运行了10次或更多次，AngularJS会抛出异常并停止。（就算没有更新值，AngularJS也会多运行一次来确保没有改变，也就是至少运行两次）。

[参考Angular的$watch,$apply和$digest](https://wscats.github.io/angular-tutorial/angular%E7%9A%84$watch,$apply%E5%92%8C$digest.html)

## 服务
服务是一个函数或**单例对象**，就相当于我们可以在angular程序中封装好一些方法然后在需要用的时候注入到需要用到的地方(控制器，自定义过滤器，自定义指令和自定义服务中)，这样可以增强我们程序的扩展性和复用性

### 单例对象
>即无论这个服务被注入到任何地方，对象始终只有一个实例

服务被定义在一个模块中，所以其使用范围是可以被我们管理的。ng的避免全局变量污染意识非常强

[官方内置服务参考文档](https://docs.angularjs.org/api/ng#service)

在angular中有相当多内置服务，下面列出常用的一些内置服务

### $scope
`$scope`是控制器独有的服务，$scope是控制器的作用域，也就是用来绑定数据模型的一个服务

### $rootScope
是ng-app的作用域范围，它可以用在两个控制器之间传递数据，你可以把它看做ng的全局作用域

### $http
数据流动方向
```javascript
font-end v->c(ng-model/ng-bind/{{}})->m--$http-->back-end
back-end--$http-->m->c((ng-model/ng-bind/{{}}))-> v
```
$http 是angular中最常用的服务，用于服务器的数据传输，是对ajax，jsonp等方法的封装
```javascript
旧版:
$http.post("Wscats.php", {
	params: {}
})
.success(function(data){
	//成功的回调
})
.error(function(err){
	//失败的回调
})

新版:
$http({
	method:"get",
	url:"Oaoafly.php"
	params:{}
})
.then(function(data){
	//成功的回调
},function(err){
	//失败的回调
})
```
>Jsonp 跨域，它本质就是动态创建`script`标签,然后利用src这个属性值的跨域能力，实现数据请求

**注意**POST请求跟jQ是不一样的，jQ是返回字符串，ng返回对象，引入一个ngPost来去改写

### $sce
处理html为安全字符的一个服务

ng-bind-html输出html格式,配合$sce服务
```html
//view
<div ng-bind-html="html"></div>
//model
$scope.html = "<p>Hello Wscat</p>";
$scope.html = $sce.trustAsHtml($scope.html)
```

## $fiter服务
这个服务可以注入到过滤器或者控制器里面
```javascript
$filter("过滤器名字")("处理的数据","过滤器的参数")
```

### $location

$location提供地址栏相关的服务
```javascript
url = http://qiaole.sinaapp.com?#name=cccccc  
$location.absUrl();  
// http://qiaole.sinaapp.com?#name=cccccc  
$location.host();  
// qiaole.sinaapp.com  
$location.port();  
// 80  
$location.protocol();  
// http  
$location.url();  
// ?#name=cccccc
// 获取url参数  
$location.search().name;  
// or  
$location.search()['name'];
```
$location 服务，它可以使用 DOM 中存在的对象，类似 window.location 对象，但 window.location 对象在angular应用中有一定的局限性。
angular会一直监控应用，处理事件变化， angular使用 $location服务比使用 window.location对象更好。

### $timeout和$interval

1. $timeout服务对应了JS的window.setTimeout函数
2. $interval服务对应了JS的window.setInterval函数
```javascript
$scope.interval = 0;
$scope.timeout = 0;
$timeout(function(){
	$scope.timeout = 1;
},1000)
$interval(function(){
	$scope.interval++
},1000)
```

### $window和$document
1. $window服务对应了JS的全局window
2. $document服务对应了JS的document，用的时候注意要这样用$document[0]

## 自定义服务
![image](https://user-images.githubusercontent.com/17243165/26965226-634d2d9c-4d27-11e7-8696-7f0bdfd84a60.png)

### $provide(供应商)
$provide服务负责告诉Angular如何创造一个新的可注入的东西：即服务。服务会被叫做供应商的东西来定义，你可以使用$provide来创建一个供应商。你需要使用$provide中的provider()方法来定义一个供应商，同时你也可以通过要求$provide被注入到一个应用的config函数中来获得$provide服务。

### Constant
定义常量用的，它定义的值当然就不能被改变，它可以被注入到任何地方，但是不能被装饰器(decorator)装饰
```javascript
//constant定义常量
app.constant('c','Wscats is cat')
```

### Value
它可以是string,number甚至function,它和constant的不同之处在于，它可以被修改，不能被注入到config中，但是它可以被decorator装饰
```javascript
app.value('c','Wscats is cat')
```

### Factory
它是一个可注入的function，它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，这样angular在调用service时会用new关键字，而调用factory时只是调用普通的function，所以factory可以返回任何东西，而service可以不返回

factory可以返回任何东西，它实际上是一个只有$get方法的provider
```javascript
app.factory('Math', function() {
	var obj = {
		add: function(a, b) {
			return a + b;
		},
		multipy: function(a, b) {
			return a * b
		},
		num:1,
		str:"oaoafly.js"
	}
	return obj;
})
```

### Service
service其实一个构造器，但我们注入这个服务的时候，就会自动帮我们new，创建这个对象

它是一个可注入的构造器，在angular中它是单例的，用它在控制器中通信或者共享数据都很合适

在service里面可以不用返回东西，因为angular会调用new关键字来创建对象。返回一个自定义对象也不会出错，此时类似factory方法
```javascript
app.service('Math', function() {
	this.add = function(a, b) {
		return a + b;
	};
	this.multipy = function(a, b) {
		return a * b
	};
	this.num=1;
	this.str="wscats.php";
})
```

### Provider
provider是他们的老大，上面的几乎(除了constant)都是provider的封装，provider必须有一个$get方法，当然也可以说provider是一个可配置的factory

[Angular的provider配置服务](https://wscats.github.io/angular-tutorial/angular%E7%9A%84provider%E9%85%8D%E7%BD%AE%E6%9C%8D%E5%8A%A1.html)

Decorator
这个比较特殊，它不是provider,它是用来装饰其他provider的，而前面也说过，他不能装饰Constant，因为实际上Constant不是通过provider()方法创建的
```javacript
var app = angular.module('app', []);

app.value('movieTitle', 'The Matrix');

app.config(function ($provide) {
  $provide.decorator('movieTitle', function ($delegate) {
    return $delegate + ' - starring Keanu Reeves';
  });
});

app.controller('myController', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});
```
### 总结
所有的供应商都只被实例化一次，也就说他们都是单例的
除了constant，所有的供应商都可以被装饰器(decorator)装饰
1. value就是一个简单的可注入的值
2. service是一个可注入的构造器
3. factory是一个可注入的方法
4. decorator可以修改或封装其他的供应商，当然除了constant
5. provider是一个可配置的factory

[参考AngularJS中的Provider们：Service和Factory等的区别](https://segmentfault.com/a/1190000003096933)

## 控制器之间通信数据
1. [Angular基于$window的数据通信](https://wscats.github.io/angular-tutorial/angular%E5%9F%BA%E4%BA%8E$window%E7%9A%84%E6%95%B0%E6%8D%AE%E9%80%9A%E4%BF%A1.html)
2. [Angular事件广播](https://wscats.github.io/angular-tutorial/angular%E4%BA%8B%E4%BB%B6%E5%B9%BF%E6%92%AD.html)
3. $rootScope
4. 路由传参(跨页面跨路由的情况)
5. Cookies和本地存储
6. 基于服务器通信数据

### 通过事件通信数据

$broadcast:向下(子)广播事件
```javascript
$scope.$broadcast('事件名字', '传递的值');
```

$emit:向上(父)广播事件
```javascript
$scope.$emit('事件名字', '传递的值');
```

$on:接受广播事件
```javascript
$scope.$on('事件名字', function(event, data) {
	//data 就是传递过来的值
})
```
**发送事件**

向父控制器传递信息
```javascript
$scope.$emit('name', 'args');
```

向子控制器传递信息
```javascript
$scope.$broadcast('name', 'args');
```
1. name:事件的名字
2. args:事件所需要传递的参数

**接受事件**

接受来自于子或父传来的信息（仅此一个方法可以接受事件）
```javascript
$scope.$on('name',function(event,data){
//从$emit或者$broadcast中获取的args事件传递来的信息
})
```
|类型|方法|
|-|-|
|无直接关联的控制器|使用 $rootScope.$emit() 、 $rootScope.$boardcast() 或 $scope.$emit 来发出数据，通过 $rootScope.$on() 来获取数据|
|父控制器到子控制器|父控制器使用 $scope.$boradcast() 来发送数据，子控制器通过 $scope.$on() 来获取数据|
|子控制器至父控制器|子控制器使用 $scope.$emit() 来发送数据，父控制器通过 $scope.$on() 来获取数据|

### 通过服务通信数据
单例服务是 angular本身支持的数据和代码共享方式，因为是单例的，所有的控制器访问的便是同一份数据
```javascript
app.service("exchangeService", function() {
	return {
		//两个控制器共享的数据
		content: "Hello Oaoafly"
	}
})
```
定义一个空服务或者定义一个返回对象的服务，将`exchangeService`注入到不同的控制器中，控制器就可以都得到服务中的`content`，因为服务是单例的，所以
其中一个服务修改`content`数据，其他服务都会得到其新值，从而完成控制器之间的数据通信

也可以通过$window中定义一个storage的对象
```javascript
app.run(function($window) {
	//类似redux vuex
	$window.storage = {
	state: {
		//初始化的值
		name: "Oaoafly Wscats"
	}
}
```
然后注入到对应的服务中完成通信，通过`$scope.$watch`监听值的改变从而完成对应的逻辑
```javascript
app.controller("indexCtrl", function($scope, $window) {
	$scope.name = "Oaoafly";
	$scope.$watch("name", function() {
		$window.storage.name = $scope.name;
	})
})
app.controller("homeCtrl", function($scope, $window) {
	// 监听修改
	$scope.$watch(function() {
		return $window.storage.name;
	}, function(n) {
		$scope.name = n;
	});
})
```

## 自定义指令
```javascript
app.direcitve("指令的名字",自定义指令的函数(逻辑))
```
属性值形式则为指令，标签形式就是组件

使用驼峰命名法的时候注意，比如自定义`ngTouch`指令，使用则是`ng-touch`，使用`-`来代替驼峰命名法，AngularJS本身已经使用了`ng-`前缀，所以可以选择除此以外的名字，尽量少用ng作为指令的前缀
### restrict
ECMA:

|值|value|
|-|-|
|element|元素，标签|
|attribute|属性|
|class|类|
|m|注释|

如果不写就是默认所有形式都可以呈现,可以支持"EA"和"EAMC"

1. 尽量少用ng-XXX前缀自定义指令
2. 尽量少用HTML定义好的标签，比如header,footer,nav

### template和templateUrl
如果组件html结构比较简单我们用`template`，如果组件html结构比较复杂我们用`templateUrl`
templateUrl获取html所在的文件路径

### replace
接受一个布尔值
如果replace是真的话，那组件的标签会被html结构替换，如果replace是false的话，那么组件的标签名会出现，那方便我们分组管理这些组件

### controller
绑定指令内部使用的数据
```javascript
controller : ['$scope',function($scope){
	//共享数据存放在这里
	$scope.name = "Wscats";
	//使用this共享给其他指令 传递数据被transclude插槽中的子组件
	this.name = "Wscats";
}],
```

### transclude
[Angular的ng-transclude](https://wscats.github.io/angular-tutorial/angular的ng-transclude.html)

### link
link接受一个匿名函数，该匿名函数有三个形参(scope,ele,attr)
```javascript
link:function(scope,ele,attr){
	//link 无非就是组件的控制器 存放该组件数据模型
	//model
	scope.name = "lan";
	scope.text = "第一个组件，";
	scope.Click = function(){
	console.log("click")
	}
}
```

**scope**

link函数就是控制该组件的逻辑，可以给组件提供数据模型（对scope绑定字符串，布尔值，数字，函数...）
可以理解为组件内部的控制器

**ele**
>如果我们的项目里面用引用jQuery，我们可以把节点交给jq处理,$(ele),如果我们没有引入jQuery，那么我们就用jQLite
jQlite是jQuery的小型版本，两者是不冲突，下面就是jQlite的接口文档

共用的数据模型最好放到link函数里面定义，不共用的最好放到控制器里面

**attr**

获取该组件父节点的属性值，注意replace的取值，如果要拿组件replace的属性值最好把replace设置为`replace:false`
因为要获取自定义组件标签上的属性值，这样才有意义

### scope
1. true:除了第一次绑定的时候，父能影响子，子不能影响父
2. false:父子之间相互影响
3. {}:父子互不影响，就是独立作用域
false和{}是比较常用，默认scope就是false

**=**

双向数据绑定，注意此时name属性值的变量要带`{{}}`
```javascript
<wsscat2 name="{{name}}"></wsscat2>
```

```javascript
scope: {
     name:"="
},
```

**@**

当方向影响，父能影响子，但子不能影响父
`<wsscat2 name="name"></wsscat2>`

```javascript
scope: {
     name:"@"
},
```
一定要把绑定的值放在属性上面作为媒介
属性值不能设置为如`data-name`的`data-`前缀的值
如果是设置为`abc-name`等格式
组件里面`scope`属性传递的对象，里面的name属性值要遵守驼峰的写法

```javascript
scope: {
     name:"@abcName"
},
```

## 封装swiper的组件
我们可以使用指令`directive`或者组件`component`方法来封装swiper的组件
[下载Swiper完整安装包](https://pan.baidu.com/s/1kVBLmmF)
1. 把插件的html和css部分放在，templateUrl模板里面(视图)
2. 把插件的js部分放在link函数里面(逻辑)

[Angular封装swiper轮播图组件](https://wscats.github.io/angular-tutorial/angular%E5%B0%81%E8%A3%85swiper%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%BB%84%E4%BB%B6.html)

## 语法
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中
```javascript
{{num|过滤器的名字:参数}}
```

### currency
可以在后面接上其他参数来更改货币符号
```javascript
Model
$scope.num = 100000;
View
<p>{{num|currency : '¥'}}</p>
```

### date
```javascript
Model
$scope.date = 1477966081000;//时间戳(精确到毫秒)
View
<p>{{date|date:'yyyy/MM/dd hh:mm:ss EEEE'}}</p>
```

### orderBy和filter和limitTo
1. `orderBy`接受一个布尔值，实现排序
2. `filter`可以接受字符串，即需要筛选的键值名，也可以接受一个对象，实现筛选
3. `limitTo`接受两个数字，第一个数字是长度，第二个是索引值，可以用在数组也可以用在字符串截取上
```javascript
//Model
$scope.filter = "name";
$scope.orderBy = true;
$scope.names = [{
	name: 'Wscats',
	id: 1
}, {
	name: 'Oaoafly',
	id: 3
}, {
	name: 'Windiest',
	id: 2
}];
//View
<ul>
     <li ng-repeat="name in names|filter:filter|orderBy:'id':orderBy|limitTo:2">{{name.name}}</li>
</ul>
```

### uppercase和lowercase
```javascript
//Model
$scope.name = 'wSsCat';
//View
<p>{{name|uppercase}}</p>
<p>{{name|lowercase}}</p>
```

### json
json过滤器可以把一个js对象格式化为json字符串，没有参数,作用就和我们熟悉的`JSON.stringify()`一样，一般用于调试
```javascript
<p>{{obj|json}}</p>
```

### number
number过滤器可以为一个数字加上千位分割，像这样，123,456,789，同时接收一个参数，可以指定小float类型保留几位小数
```javascript
Model
$scope.num = 100000;
View
<p>{{num|number:2}}</p>
```

[Angular内置过滤器](https://wscats.github.io/angular-tutorial/angular%E8%87%AA%E5%B8%A6%E8%BF%87%E6%BB%A4%E5%99%A8.html)

## 自定义过滤器
```javascript
app.filter("过滤器名字",function("服务")){
	return function("传入需要处理的值"){
		return "返回处理完的值"
	}
}
```
[Angular自定义关键词检索过滤器](https://wscats.github.io/angular-tutorial/%E8%87%AA%E5%AE%9A%E4%B9%89%E5%85%B3%E9%94%AE%E8%AF%8D%E6%A3%80%E7%B4%A2%E8%BF%87%E6%BB%A4%E5%99%A8(%E7%AE%80%E7%89%88).html)

## 表单验证

[参考Angular表单验证DEMO](https://wscats.github.io/angular-tutorial/angular%E8%A1%A8%E5%8D%95%E9%AA%8C%E8%AF%81.html)

## 路由

### UI路由

### 引入JS文件
开始引入angular和ui-route的js文件
```javascript
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="angular-ui-router.js"></script>
```
与原生angular路由不同的是，ui路由用**ui-view**而不是**ng-view**
```javascript
<div ui-view></div>
```
在angular服务中注入**ui.router**模块
```javascript
var app = angular.module('wscats', ['ui.router']);
```
### 配置路由
用到**$stateProvider**和**$urlRouterProvider**两个服务
```javascript
/* 注入$stateProvider，$urlRouterProvider */
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
	/* 使用when来对一些不合法的路由进行重定向 */
	$urlRouterProvider.when('', '/main');
	/* 通过$stateProvider的state()函数来进行路由定义 */
	$stateProvider.state('main', {
		url: '/main',
		templateUrl: 'views/main.html',
		controller: 'mainCtrl'
	}).state('main.a', {
		url: '/pageMain1',
		templateUrl: 'views/pageMain1.html',
		controller: 'pageMain1Ctrl'
	})
}]);
```
主路由，路由地址为#/main
```javascript
app.controller('mainCtrl', function($scope) {
     $scope.name = 'Wscats';
})
```

main路由下的子路由，路由地址为#/main/pageMain1

```javascript
app.controller('pageMain1Ctrl',function($scope){
     $scope.name = 'Oaoafly'
})
```
### 嵌套路由
此时我们就可以在main.html上放第二个`ui-view`这里比原生好的地方在于可以嵌套路由
main.html
```html

{{name}}
<div ui-view></div>
```
pageMain1.html
```html

{{name}}
```

### 路由传参

我们在生成一个新的子控制器
```javascript
.state('main.b', {
       url: '/pageMain2/:id',
       templateUrl: 'views/pageMain2.html',
       controller: 'pageMain2Ctrl'
})
```

留意我们在url定义的路由中多了个`:id`，这样我们就可以在控制器之间传递参数
```javascript
url: '/pageMain2/:id'
```
在控制器中我们注入$state服务

```javascript
app.controller('pageMain2Ctrl', function($scope, $state) {
	$scope.name = 'Hello Wscats Oaoafly'
	console.log($state.params);
})
```

用`$state.params`就可以访问到路由上的参数
例如我们输入#/main/pageMain2/1，就会返回一个对象`Object {id: "1"}`

### 页面之间通信数据
### 路由之间通信数据

>不同页面之前的控制器之间通信数据

在url上传递和接受（拼接参数到url上，然后用$loacion.search()接受）
思路就如同在路由上配置以下代码
```javascript
.state('page2',{
	url:'/page2/:id/:name',//参数用:params的形式，多个参数的话用/隔开
	templateUrl:'template/page2.html',
	controller:'page2Ctrl'
})
```
然后在控制器中用$state服务接受
```javascript
app.controller("page2Ctrl",function($state){
	$state.params.id
	$state.params.name
})
```

### 一个视图多个ui-view

当一个视图拥有多个ui-view,例如下面这样，平时我们一般一个视图只有一个`ui-view`的情况
```html
<div ui-view name="first"></div>
<div ui-view name="second"></div>
```

当拥有多个这样的`ui-view`我们就要加上**name**属性，并绑定它到路由配置中的views属性，让子视图决定渲染到哪一个`ui-view`里面

```javascript
.state('main.a', {
	url: '/pageMain1',
	views: {
		"first": {
			templateUrl: 'views/pageMain1.html',
			controller: 'pageMain1Ctrl'
		}
	}
}).state('main.b', {
	url: '/pageMain2/:id',
	views: {
		"first": {
			templateUrl: 'views/pageMain2.html',
			controller: 'pageMain2Ctrl'
		}
	}
}).state('main.c', {
	url: '/pageMain3/:id',
	views: {
		"second": {
			templateUrl: 'views/pageMain3.html',
			controller: 'pageMain3Ctrl'
		}
	}
})
```
### ng路由

1.下载ng路由文件

引入angular-route.js到项目中,放在angular.js之后,然后在代码里面引入`ngRoute`模块

```html
<script type="text/javascript" src="../js/angular.js"></script>
<script type="text/javascript" src="../js/angular-route.js"></script>
```

2.包含了`ngRoute`模块作为主应用模块的依赖模块
```javascript
angular.module('helloWscatsApp',['ngRoute'])
```

3.使用`ngView`指令
```javascript
<div ng-view></div>
```

4. 打开浏览器，定位到需要呈现路由所在的页面，我们在url基础上加`#!/路由的名字`
```javascript
url + #!/路由的名字
```

**$routeProvider**

两个核心方法`when()`和`otherwise()`

可以使用`$routeProvider`用来定义路由规则
```javascript
module.config(['$routeProvider', function($routeProvider) {
	$routeProvider
		.when('/', {
			template: '他是Oaoafly'
		})
		.when('/wscats', {
			template: '他是Wscats'
		})
		.when('/windiest', {
			template: '她是Windiest'
		})
		.otherwise({
			redirectTo: '/'
		});
}]);
```

## 登录注册逻辑

1. 首先获取用户输入的用户名和密码(ng-model->$scope)
2. 根据后端给我们提供的接口,把用户输入的信息提交到服务器($http,post)
3. 用ng-cookie保存后端给我们的token
4. 判断是否登录状态(自动登录),我们就把token提交服务器作为验证,如果验证成功则继续逻辑,如果失败则返回登录注册页面

AngularJS

AngularJS 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

AngularJS

AngularJS 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README