Angular整理

一、什么是MVC：

MVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成，采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。

模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。

视图（View）一般用来展示数据，比如通过HTML展示。

控制器（Controller）一般用做连接模型和视图的桥梁。

MVC更多应用在后端开发程序里，后被引入到前端开发中，由于受到前端技术的限制便有了一些细节的调整，进而出现了很多MVC的衍生版（子集）如MVVM、MVW、MVP、MV*等。

二、模块化（Module）

使用AngularJS构建应用（App）时是以模块化（Module）的方式组织的，即将整个应用划分成若干模块，每个模块都有各自的职责，最终组合成一个整体。

步骤1：定义应用：通过为任一HTML标签添加ng-app属性，可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。

步骤2：定义模块：AngularJS提供了一个全局对象angular，在此全局对象下存在若干的方法，其中angular.module()方法用来定义一个模块。

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

步骤3：定义控制器：控制器（Controller）作为连接模型（Model）和视图（View）的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。

App.controller('DemoCtrl',['$scope',function($scope){

$scope.name='Hello';

}])

模型（Model）数据是要展示到视图（View）上的，所以需要将控制器（Controller）关联到视图（View）上，通过为HTML标签添加ng-controller属性并赋值相应的控制器（Controller）的名称，就确立了关联关系。

</body>

三、指令

（1）内置指令

ng-app 指定应用根元素，至少有一个元素指定了此属性。

ng-controller 指定控制器

ng-show控制元素是否显示，true显示、false不显示

ng-hide控制元素是否隐藏，true隐藏、false不隐藏

ng-if控制元素是否“存在”，true存在、false不存在

ng-src增强图片路径

ng-href增强地址

ng-class控制类名

ng-include引入模板

ng-disabled表单禁用

ng-readonly表单只读

ng-checked单/复选框表单选中

ng-selected下拉框表单选中

（2）自定义指令

AngularJS允许根据实际业务需要自定义指令，通过angular全局对象下的directive方法实现。

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

App.directive('tagName',function($scope){

return {

//自定义指令类型EACM

restrict : 'EA',

//是否替换原有标签

replace : true,

//指令模板

template : '<h1>hello</h1>',

//指令外部模板

// tempalteURL : '01.html'

}

});

//E 代表元素指令 Element

//A 代表属性执行 Attribute

//M 代表注释指令 Mark

//C 代表class执行 Class

实际案例

<!DOCTYPE html>

<head>

<title>AngularJS 自定义指令</title>

</head>

<ul>

</ul>

</div>

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

// 定义指令

App.controller('DemoCtrl', ['$scope', function ($scope) {

}]);

// App模块实例下有若干方法, directive 方法用来定义一个指令

// 需要两个参数

// 第1个指令的名称

// 第2个指令的逻辑

App.directive('demo', function () {

// console.log(1);

// 要求必须返回一个值（对象/函数）

// 对象有一定要求

return {

// A attribute 表示此指令可以通过属性来使用

// E element 表示此指令可以通过标签来使用

// C class 表示此指令可以通过类名来使用

// M Mark 表示此指令可以通过注释来使用

restrict: 'ECMA',

// template: '<h1>hello AngularJS!</h1>',

replace: true,

// 引入一个外部分文件

templateUrl: './list.html',

link: function () {},

compile: function () {},

scope: {}

}

});

// 上述代码定义了一个非常基本的指令（只满足了语法）

// 其使用方法与内置指令一样

</script>

</body>

</html>

四、数据绑定

AngularJS是以数据做为驱动的MVC框架，所有模型（Model）里的数据经由控制器（Controller）展示到视图（View）中。

所谓数据绑定指的就是将模型（Model）中的数据与相应的视图（View）进行关联，分为单向绑定和双向绑定两种方式。

（1）单向绑定

单向数据绑定是指将模型（Model）数据，按着写好的视图（View）模板生成HTML标签，然后追加到DOM中显示，只能模型（Model）数据向视图（View）传递。

（2）双向绑定

双向绑定则可以实现模型（Model）数据和视图（View）模板的双向传递，如下图所示。

（3）相关指令

a）在AngularJS中通过“{{}}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务$scope来提供，这个$scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。

注：“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象。

b）通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。

c）通过ng-init可以初始化模型（Model）也就是$scope。

<!DOCTYPE html>

<head>

<title>ng-init指令</title>

</head>

</div>

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

App.controller('DemoCtrl', ['$scope', function ($scope) {

// 定义模型数据不局限于下面方式

$scope.name = '小明';

}]);

</script>

</body>

</html>

d）AngularJS对事件也进行了扩展，无需显式的获取DOM元素便可以添加事件，易用性变的更强。通过在原有事件名称基础上添加ng-做为前缀，然后以属性的形式添加到相应的HTML标签上即可。如ng-click、ng-dblclick、ng-blur等

e）通过ng-repeat可以将数组或对象数据迭代到视图模板中，ng-switch、on、ng-switch-when可以对数据进行筛选。

五、作用域

通常AngularJS中应用（App）是由若干个视图（View）组合成而成的，而视图（View）又都是HTML元素，并且HTML元素是可以互相嵌套的，另一方面视图都隶属于某个控制器（Controller），进而控制器之间也必然会产生嵌套关系。

每个控制器（Controller）又都对应一个模型（Model）也就是$scope对象，不同层级控制器（Controller）下的$scope便产生了作用域。

（1）根作用域

一个AngularJS的应用（App）在启动时会自动创建一个根作用域$rootScope，这个根作用域在整个应用范围（ng-app所在标签以内）都是可以被访问到的。

（2）子作用域

通过ng-controller指令可以创建一个子作用域，新建的作用域可以访问其父作用域的数据。

六、过滤器

在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。

（1）内置过滤器

1、currency[货币] 将数值格式化为货币格式

2、date日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。

3、filter在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数

4、json将Javascrip对象转成JSON字符串。

5、limitTo取出字符串或数组的前（正数）几位或后（负数）几位

6、lowercase将文本转换成小写格式

7、uppercase将文本转换成大写格式

8、number数字格式化，可控制小位位数

9、orderBy对数组进行排序，第2个参数是布尔值可控制方向(正序或倒序)

<!DOCTYPE html>

<head>

<title>AngularJS 过滤器</title>

<style>

dl, dt, dd {

padding: 0;

margin: 0;

}

</style>

</head>

<dl>

<dt>AngularJS过滤器</dt>

<dd>当前时间为: {{now|date:'yyyy-MM-dd hh:mm:ss EEEE'}}</dd>

<dd>商品价格为: {{price|currency:'￥':4}}</dd>

<dd>介绍: {{info|limitTo:-2}}</dd>

<dd>数组: {{list|limitTo:-2}}</dd>

<dd>转小写: {{brief|lowercase}}</dd>

<dd>转大写: {{brief|uppercase}}</dd>

<dd>处理数字: {{num|number:2}}</dd>

<dd>排序数据: {{students|orderBy:'score':true}}</dd>

<dd>处理成json: {{obj|json}}</dd>

<dd>筛选数据: {{list|filter:'p'}}</dd>

<dd>筛选数据: {{students|filter:{age:18} }}</dd>

<dd>过滤器连写: {{info|uppercase|limitTo:2}}</dd>

</dl>

<table>

<td>{{student.name}}</td>

<td>{{student.age}}</td>

<td>{{student.score}}</td>

</tr>

</table>

</div>

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

App.controller('DemoCtrl', ['$scope', function ($scope) {

$scope.now = new Date;

// 使用 currency 这个过滤器可以指定货币类型

$scope.price = 12.345;

// 使用 limitTo 这个过滤器可以截取字符串

$scope.info = 'my name is itcast';

// 使用 limitTo 这个过滤器可以截取数组

$scope.list = ['javascript', 'php', 'html', 'css', 'java'];

// lowercase 这个过滤器可以将字母转成小写

// uppercase 这个过滤器可以将字母转成大写

$scope.brief = 'my Name IS itcast';

// number 这个过滤器可以处理数字格式

$scope.num = 23.12345;

// orderBy 这个过滤器可以对数组数据进行排序

$scope.students = [

{name: '小明', age: 18, score: 98},

{name: '小红', age: 17, score: 94},

{name: '小米', age: 19, score: 97},

{name: '小花', age: 16, score: 92},

{name: '小李', age: 20, score: 95},

{name: '小黄', age: 18, score: 99}

]

$scope.obj = {

name: '小明'

}

}])

</script>

</body>

</html>

（2）自定义过滤器

除了使用AngularJS内建过滤器外，还可以根业务需要自定义过滤器，通过模块对象实例提供的filter方法自定义过滤器。

<!DOCTYPE html>

<head>

<title>AngularJS 自定义过滤器</title>

</head>

<p>{{info|capitalize}}</p>

</div>

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

// 定义一个控制器 controller

App.controller('DemoCtrl', ['$scope', function ($scope) {

$scope.name = 'itcast';

$scope.info = 'my name is itcast!';

}]);

// 定义一个指令 directive

App.directive('demo', function () {

});

// 定义一个过滤器 filter

// 需要两个参数

// 第1个过滤器名字

// 第2个依赖关系

App.filter('demo', function () {

// 必须要返回一个函数

return function (arg, arg1, arg2) {

// 在此完成数据格式化处理的逻辑

// 并且 Angularjs 会将需要格式化处理的

// 数据当成第一个参数传递进来

console.log(arg, arg1, arg2)

return '你好 ' + arg;

}

});

// 上述定义了最基本的过滤器，其使用方法与内置一样

App.filter('capitalize', function () {

return function (input) {

return input[0].toUpperCase() + input.slice(1);

}

});

</script>

</body>

</html>

七、依赖注入

（1）行内注入（推荐使用）

以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。

（2）推断式注入

没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称。

这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。

八、服务

服务是一个对象或函数，对外提供特定的功能。

（1）内置服务

1、$log打印调试信息

<!DOCTYPE html>

<head>

<title>AngularJS 内置服务</title>

</head>

</div>

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

// 在现实开发，经常性做一些调试信息的输出

// 调试的级别是不一样的

// notice warning error

// AngularJS 将调试信息级别做了封装

// 封装成了一个服务(名称为$log)，开发过程中只需要调用这个服务即可

// 当前开发依赖一个 $log 的通用功能（服务）

App.controller('DemoCtrl', ['$scope', '$log', function ($scope, $log) {

// $log 是一个对象，对外开放一些方法

$log.log('信息'); // console.log()

$log.info('信息'); // console.info()

$log.error('信息'); // console.error()

$log.warn('信息'); // console.warn()

// 可以通配置服务将此功能打开

$log.debug('信息');

// console.log();

}])

</script>

</body>

</html>

2、$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。

<!DOCTYPE html>

<head>

<title>AngularJS 内置服务</title>

</head>

<p>当前时间为: {{now|date:'yyyy-MM-dd hh:mm:ss'}}</p>

</div>

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

App.controller('DemoCtrl', ['$scope', '$timeout', '$interval', function ($scope, $timeout, $interval) {

$scope.now = new Date();

var timer = $interval(function () {

$scope.now = new Date();

}, 1000);

$scope.stop = function () {

$interval.cancel(timer);

}

}])

</script>

</body>

</html>

3、$filter在控制器中格式化数据。

<!DOCTYPE html>

<head>

<title>AngularJS 内置过滤器</title>

</head>

<ul>

<li>{{price}}</li>

</ul>

</div>

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

// 有如下需求

// 希望在非视图中对数据进行格式化处理

// 在 AngularJS 中可以使用 $filter 这个服务

// 在非视图中对数据进行格式化处理

App.controller('DemoCtrl', ['$scope', '$filter', function ($scope, $filter) {

// filter 可以将数据格式化

// $filter 是一个函数，并且可以接收一些数

// 根据参数的不同，$filter 所能处理的数据

// 格式也不同，举例说明

var date = $filter('date'); // 返回值也为函数

$scope.now = date(new Date(), 'yyyy-MM-dd hh:mm:ss');

var currency = $filter('currency'); // 返回值也为函数

$scope.price = currency(12.345, '￥');

var filter = $filter('filter'); // 返回值也为函数

$scope.list = filter(['html', 'css', 'javascript', 'php'], 'p');

var limitTo = $filter('limitTo'); // 返回值也为函数

$scope.arr = limitTo(['html', 'css', 'js'], 2);

}]);

// 自定义的过滤器也可以当成参数传递

</script>

</body>

</html>

4、$http用于向服务端发起异步请求。

同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。

<!DOCTYPE html>

<head>

<title>AngularJS 内置服务</title>

</head>

</div>

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

// 使用AngularJS需要发送一个异步请求到服务器

// 服务器返回给前端一个数据

// 并且将数据显示到页面上

// AngluarJS 中有一个服务叫 $http 可以发送

// 异步请求

App.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {

// $scope.name = '小明';

// $http 是一个函数

$http({

url: '', // 请求地址

method: '', // 请求方式

data: '', // post 方式的数据

params: '', // get 方式的数据

headers: {

// 请求头信息

// Content-Type

}

}).then(function (data) {

// 成功后的回调

}, function () {

// 失败后的回调

});

}])

</script>

</body>

</html>

post传参实例

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

App.controller('DemoCtrl', ['$scope', '$http', function ($scope, $http) {

$http({

url: './post.php',

method: 'post',

// 使用 data 来传递 post 请求的数据

// data: {name: 'itcast', age: 10},

data: 'name=itcast&age=10',

headers: {

'Content-Type': 'application/x-www-form-urlencoded'

}

}).then(function (res) {

// res.data;

})

}]);

注意：jsonp的传输数据的方式是get方式。

（2）自定义服务

通过上面例子得知，所谓服务是将一些通用性的功能逻辑进行封装方便使用，AngularJS允许将自定义服务。

1、factory方法

<!DOCTYPE html>

<head>

<title>AngularJS 自定义服务</title>

</head>

</div>

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

App.controller('DemoCtrl', ['$scope','showTime', function($scope,showTime) {

$scope.now = showTime.now;

$scope.time = showTime.format('hh:mm:ss');

}])

App.factory('showTime', ['$filter', function ($filter) {

return {

now: $filter('date')(new Date(), 'yyyy-MM-dd'),

format: function (arg) {

return $filter('date')(new Date(), arg);

}

}])

</script>

</body>

</html>

2、service方法

<!DOCTYPE html>

<head>

<title>AngularJS 自定义服务</title>

</head>

</div>

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

// controller 定义控制器

App.controller('DemoCtrl', ['$scope', 'showTime', function ($scope, showTime) {

$scope.now = showTime.now;

$scope.time = showTime.format('hh:mm:ss');

}])

App.service('showTime', ['$filter', function ($filter) {

this.now = $filter('date')(new Date(), 'yyyy-MM-dd');

this.format = function (arg) {

return $filter('date')(new Date(), arg);

}

}]);

</script>

</body>

</html>

在介绍服务时曾提到服务本质就是一个对象或函数，所以自定义服务就是要返回一个对象或函数以供使用。

九、模块加载

服务也是模块形式存在的对且对外提供特定功能，前面学习中都是将服务做为依赖注入进去的，然后再进行调用，除了这种方式外我们也可以直接运行相应的服务模块，AngularJS提供了run方法来实现。

配置块

App.config(['$filterProvider', function ($filterProvider) {

// "provider" 一般开放一些方法，通过这些方法来实现具体的配置

$filterProvider.register('capitalize', function () {

return function (arg) {

// console.log(arg)

return arg[0].toUpperCase() + arg.slice(1);

}

});

}]);

运行块

App.run(['$log', '$http', '$rootScope', function ($log, $http, $rootScope) {

$http({

url: './example.php'

});

}]);

不但如此，run方法还是最先执行的，利用这个特点我们可以将一些需要优先执行的功能通过run方法来运行，比如验证用户是否登录，未登录则不允许进行任何其它操作。

十、路由

（1）SPA

SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。

在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题。

（2）路由

在后端开发中通过URL地址可以实现页面（视图）的切换，但是AngularJS是一个纯前端MVC框架，在开发单页面应用时，所有功能都在同一页面完成，所以无需切换URL地址（即不允许产生跳转），但Web应用中又经常通过链接（a标签）来更新页面（视图），当点击链接时还要阻止其向服务器发起请求，通过锚点（页内跳转）可以实现这一点。

实现单页面应用需要具备：

a、只有一页面

b、链接使用锚点

通过上面的例子发现在单一页面中可以能过hashchange事件监听到锚点的变化，进而可以实现为不同的锚点准不同的视图，单页面应用就是基于这一原理实现的。

AngularJS对这一实现原理进行了封装，将锚点的变化封装成路由（Route）,这是与后端路由的根本区别。

使用：

1、引入angular-route.js

2、实例化模块（App）时，当成依赖传进去（模块名称ngRoute）

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

3、配置路由模块

App.config(['$routeProvider',function($routeProvider){

$routeProvider.when('/',{

template : '首页'

})

}])

4、布局模板

通过ng-view指令布局模板，路由匹配的视图会被加载渲染到些区域。

整理一下就是：

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

// 需要配置路由

App.config(['$routeProvider', function ($routeProvider) {

$routeProvider.when('/register', {

// template: '<h1>login</h1>'

templateUrl: './views/register.html'

}).when('/login', {

templateUrl: './views/login.html'

}).when('/list', {

templateUrl: './views/list.html',

controller: 'ListCtrl'

}).when('/404', {

templateUrl: './views/404.html'

}).otherwise({

redirectTo: '/404'

});

}]);

App.controller('ListCtrl', ['$scope', function ($scope) {

$scope.lists = ['html', 'css', 'js', 'php'];

}])

路由参数：

1、提供两个方法匹配路由，分别是when和otherwise，when方法需要两个参数，otherwise方法做为when方法的补充只需要一个参数，其中when方法可以被多次调用。

2、第1个参数是一个字符串，代表当前URL中的hash值。

3、第2个参数是一个对象，配置当前路由的参数，如视图、控制器等。

a、template 字符串形式的视图模板

b、templateUrl 引入外部视图模板

c、controller 视图模板所属的控制器

d、redirectTo跳转到其它路由

4、获取参数，在控制中注入$routeParams可以获取传递的参数

.when('./index/:id',{

template: 'Index Page',

controller: 'IndexController'

})

App.controller('IndexController',['$scope','$routeParams',function($scope,$routeParams){

}])

进一步强化：

// AngularJS 地址参数有两种写法

// 1、在地址上通过 ? 进行传递，其格式为 key=val&key1=val1

// 2、在when方法中第一个参数中进行设置，其格式为 :key

App.config(['$routeProvider', function ($routeProvider) {

$routeProvider.when('/register/id/:id/page/:page/pass/:pass', {

// 加载外部文件

templateUrl: './views/register.html',

controller: 'RegisterCtrl'

}).when('/login', {

// 加载外部文件

templateUrl: './views/login.html',

controller: 'LoginCtrl'

}).when('/list', {

// 加载外部文件

templateUrl: './views/list.html',

// 定义控制器

controller: 'ListCtrl'

});

}]);

十一、jquery lite

在没有引入jQuery的前提下AngularJS实现了简版的jQuery Lite，通过angular.element不能选择元素，但可以将一个DOM元素转成jQuery对象，如果引提前引入了jQuery则angular.element则完全等于jQuery。

<!DOCTYPE html>

<head>

<title>AngularJS 中使用 jQuery</title>

<style>

.box {

400px;

height: 400px;

border: 1px solid #CCC;

}

</style>

</head>

<body>

// AngularJS 中提供了一个方法 element()

// 通过这个方法可以将一个原生 DOM 对象

// 转换成一个 jQuery 对象

// 1、获取原生DOM

var box = document.querySelector('.box');

var btn = document.querySelector('button');

// 2、转成 jQuery 对象

var jqBox = angular.element(box);

var jqBtn = angular.element(btn);

jqBtn.on('click', function () {

jqBox.animate({

200,

height: 200

}, 500);

});

</script>

</body>

</html>