angular学习
基本知识：http://www.runoob.com/angularjs/angularjs-tutorial.html
下载angularjs网址：http://www.bootcdn.cn/angular.js/
AngularJS概念：
1.MVC
封装数据代码(model)，应用逻辑代码(controller)，页面渲染数据代码(view)，三层独立分离
Angular中，视图就是Documenet Object Model， 控制器就是Javascript类，数据模型就是存储在对象的属性中
2.数据绑定
数据绑定可以自动将model和view间的数据同步，Angular实现数据绑定的方式是把model作为数据源，view始终是model的投影，当model发生变化时，会自动反映在view上
3.依赖注入
Angular的依赖注入是获取它所需要的东西，而不创建它们所依赖的东西(一句话 ---> 没事你不要来找我，有事我会去找你。)
4.Angular数据绑定原理：使用脏检查比较数据是否发生了变化
知道变量发生变化一般有两种情况
（1）一是通过固定的接口改变值，如set()方法，缺点是写法繁琐，每个属性都要写一个set方法，
（2）二是脏检查，将对象复制一份快照，在某个时间比较现在对象与快照的值，如果不一样就说明发生了变化，这个策略要保留两份，而且要遍历对象，比较每一个属性，比较消耗性能。angular中所有带ng-开头的事件执行后，都会触发脏检查
页面动态显示时间例子
demo_01.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-app>
<div ng-controller="firstController">
<div ng-bind="date"></div>
</div>
</div>
<script type="text/javascript" src="../common/angular/angularjs.js"></script>
<script type="text/javascript" src="demo_01.js"></script>
</body>
</html>demo_01.js
/**
* Created by Administrator on 2017/7/21.
*/
var firstController = function($scope){
//new 一个时间
$scope.date = new Date();
//每隔一秒执行一次
setInterval(function () {
//通过 $apply 方法进行脏检查，从而动态改变页面数据
$scope.$apply(function () {
$scope.date = new Date();
});
},1000);
}$apply() 说明：
$apply()只是进入angular的上下文中，通过 $digest() 方法去触发脏检查，在调用 $digest() 方法时，angular会先执行angular的 $eval() 方法，如果 $eval() 解析失败会抛异常，所以不建议直接调用 $digest() 方法，而应该使用 $apply() 方法，先让 $eval() 方法进行校验，数据合法了再执行下文， $apply() 如果不给参数，会检查$scope里所有监听的属性，推荐给上
$digest() 说明：
所有 $scope 和 $scope的子类会进行脏检查，脏检查又会触发 $watch() 方法，这样实现了数据的双向绑定
$watch() 说明：
angularJs内部的wath实现了页面随model的变化而变化，在 $digest() 方法执行时，如果 watch 观察的 value 与上次执行不一样时，就会被触发
$provider说明：
定义服务$provider，服务本身是任意对象，angular是用$provider对象来实现自动注入的，注入机制通过调用provider的 $get() 方法，把得到的对象作为参数进行关联
定义服务的方式： $provider.provider()
$provider.factory说明：
fanctory方法直接把一个函数当成是一个对象的 $get() 方法，返回的类容可以是任何类型
例子
demo2.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myController">
{{myProvider}}
</div>
</div>
<script type="text/javascript" src="../common/angular/angularjs.js"></script>
<script type="text/javascript" src="demo2.js"></script>
</body>
</html>demo2.js
/**
* Created by Administrator on 2017/7/22.
*/
/**
* angular.moudle(name,[requires],configFn)
* 第一个参数：moudle 的名称,第二个参数：需要依赖其他的模块的模块名，不需要就写 []，第三个参数：是一个function，用于写一些配置
* configFn会在模块初始化时执行，这里可以配置模块的服务
* 第三个参数的function()里注入 $provider 对象，可以用 $provide.provider() 自定义服务
*/
var myApp = angular.module('myApp', [], function ($provide) {
//自定义服务（这种自定义服务的方式不太常用，这只是一种用法）
$provide.provider('myProvider', function () {
this.$get = function () {
return {message: 'myProvider message'};
}
});
//自定义服务（常用这种方式注入服务）（返回类型必须是对象）
$provide.service('myService', function () {
return {name:'张三'};
});
//自定义工厂（返回类型可以是任何类型）
$provide.factory('myFactory', function () {
return [1, 2, 3, 4, 5];
});
});
//controller
myApp.controller('myController', function ($scope, myProvider, myService, myFactory) {
console.log(myProvider);
console.log(myService);
console.log(myFactory);
$scope.myProvider = myProvider.message;
});
//这里的 service factory 与上面用法一样，只是写法不同
//myApp.service();
//myApp.factory();- 上一篇 »Angular权威指南学习笔记
- 下一篇 »angular 学习日志