AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。
AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。
框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。
AngularJS有着诸多特性，最为核心的是：模块化、双向数据绑定、语义化标签、依赖注入等。
与之类似的框架还有BackBone、KnockoutJS、Vue、React等。
模块化
- 定义应用
// 为 body 标签添加 ng-app表明整个body都是有用
// ng-app属性可以不赋值，但是要关联相应模块必须赋值
<body ng-app="app">
- 定义模块
// 提供一个全局对象angular，在此对象下有N多方法
// 其中module方法可以帮我们创建一个模块
// 参数1: 模块的名称
// 参数2: 此模块依赖的其它模块
// 注：应用（App）其本质也是一个模块（一个比较大的模块）
var app = angular.module('app', []);
- 定义控制器
// app 是一个模块化对象, 通过这个对象定义controller
// 参数1: controller名称
// 参数2: 是一个数组，这个数组除除最后一个参数是函数外，其余都是字符串，标明此控制器的依赖关系
app.controller('DemoController', ['$scope', function ($scope) {
// $scope 就是 Model 并且空对象
$scope.json = [
{name: '刘德华', sex: '男', age: 62},
{name: '王力宏', sex: '男', age: 40},
{name: '周杰伦', sex: '男', age: 39},
{name: '小明', sex: '女', age: 12}
];
}]);
指令
- 内置指令
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下拉框表单选中
- 自定义指令
<div tag></div>
var app = angular.module('app', []);
// 通过模块实例对象的directive方法可以自定义指令
app.directive('tag', function () {
// 返回一个对象，这个对象就是自定义指令相关的内容
return {
// E element
// A attribute
// C class
// M mark replace 必须为true
restrict: 'EA',
// template: '<ul><li>首页</li><li>列表</li></ul>', // 指令模板
templateUrl: 'OtherHtml/header.html', // 指令外部模板
}
})
数据绑定
<body ng-app="App">
<ul ng-controller="DemoController">
<li ng-bind="name"></li>
<li ng-cloak>{{name}}{{age}}</li>
<li ng-bind-template="{{name}}{{age}}"></li>
</ul>
<script src="libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.name = 'llq';
$scope.age = 10;
}]);
</script>
</body>
-
解释
- 在AngularJS中通过
“{{}}”和ng-bind指令来实现模型（Model）数据向视图模板（View）的绑定，模型数据通过一个内置服务$scope来提供，这个$scope是一个空对象，通过为这个对象添加属性或者方法便可以在相应的视图（View）模板里被访问。 - 注：
“{{}}”是ng-bind的简写形式，其区别在于通过“{{}}”绑定数据时会有“闪烁”现象，添加ng-cloak也可以解决“闪烁”现象，通过ng-bind-template可以绑定多个数据。
- 在AngularJS中通过
-
相关指令
// 通过为表单元素添加ng-model指令实现视图（View）模板向模型（Model）数据的绑定。
<body ng-app="App">
<div ng-controller="DemoController">
<input type="text" ng-model="msg">
<h1>{{msg}}</h1>
<button ng-click="show()">显示</button>
</div>
<script src="libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
App.controller('DemoController', ['$scope', function ($scope) {
$scope.show = function () {
alert($scope.msg)
}
}]);
</script>
</body>
// 通过ng-init可以初始化模型（Model）也就是$scope
作用域
过滤器
在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。
- 内置过滤器
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个参数可控制方向
- 自定义过滤器
<body ng-app="App">
<div ng-controller="DemoController">
<h4>{{info|capitalize:1}}{{name}}</h4>
<h4>{{info|demo:'xixi'}}</h4>
</div>
<script src="libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
// 自定义指令的
App.directive('name', function () {
return {
//
}
});
// 自定义过滤器
App.filter('demo', function () {
return function (input, arg2) {
console.log('hello' + input);
return 'hello' + input + arg2;
}
});
App.filter('capitalize', function () {
// console.log(input);
return function (input, arg2) {
// console.log(arg2);
return input[0].toUpperCase() + input.slice(1);
}
});
// 自定义控制器的
App.controller('DemoController', ['$scope', function ($scope) {
$scope.name = '小明';
$scope.info = 'my name is ';
}]);
</script>
</body>
依赖注入
AngularJS采用模块化的方式组织代码，将一些通用逻辑封装成一个对象或函数，实现最大程度的复用，这导致了使用者和被使用者之间存在依赖关系。
所谓依赖注入是指在运行时自动查找依赖关系，然后将查找到依赖传递给使用者的一种机制。
常见的AngularJS内置服务有$http、$location、$timeout、$rootScope等
- 推断式注入
- 没有明确声明依赖，AngularJS会将函数参数名称当成是依赖的名称
// 推断式依赖注入
App.controller('DemoController', function ($scope, $http) {
});
// 这种方式会带来一个问题，当代码经过压缩后函数的参数被压缩，这样便会造成依赖无法找到。
- 行内注入
- 以数组形式明确声明依赖，数组元素都是包含依赖名称的字符串，数组最后一个元素是依赖注入的目标函数。
// 控制器依赖$scope, $http服务
// 以数组的形式进行声明
App.controller('DemoController', ['$scope', '$http', function (abc, bcd) {
abc.name = '依赖注入';
}]);
服务
服务是一个对象或函数，对外提供特定的功能。
- 内建服务
$location是对原生Javascript中location对象属性和方法的封装
$timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。
$filter在控制器中格式化数据。
$log打印调试信息
$http用于向服务端发起异步请求。(同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。)
- 自定义服务
模块加载
-
AngularJS模块可以在被加载和执行之前对其自身进行配置。我们可以在应用的加载阶段配置不同的逻辑。
模块加载01.png
-
配置块
1、通过config方法实现对模块的配置，AngularJS中的服务大部分都对应一个“provider”，用来执行与对应服务相同的功能或对其进行配置。
比如$log、$http、$location都是内置服务，相对应的“provider”分别是$logProvider、$httpProvider、$locationPorvider。
- 运行块
服务也是模块形式存在的对且对外提供特定功能，前面学习中都是将服务做为依赖注入进去的，然后再进行调用，除了这种方式外我们也可以直接运行相应的服务模块，AngularJS提供了run方法来实现。
路由
一个应用是由若个视图组合而成的，根据不同的业务逻辑展示给用户不同的视图，路由则是实现这一功能的关键。
- SPA
SPA（Single Page Application）指的是通单一页面展示所有功能，通过Ajax动态获取数据然后进行实时渲染，结合CSS3动画模仿原生App交互，然后再进行打包（使用工具把Web应用包一个壳，这个壳本质上是浏览器）变成一个“原生”应用。
在PC端也有广泛的应用，通常情况下使用Ajax异步请求数据，然后实现内容局部刷新，局部刷新的本质是动态生成DOM，新生成的DOM元素并没有真实存在于文档中，所以当再次刷新页面时新添加的DOM元素会“丢失”，通过单页面应可以很好的解决这个问题。
- 路由
实现单页面应用需要具备：
a、只有一页面
b、链接使用锚点
网友评论