ng内部，一旦发生值改变操作，如$scope.m=x,就会自动轮询$digest队列，触发指定的$watch，调用其回调函数，然后修改dom树。
1.ng提供了许多内置的服务，例如常用的$scope$http$window$location等。
http：POST请求：
var app = angular.module('myApp', ['ng']); app.run(function($http){ //post 请求设置请求头 $http.defaults.headers.post = {'Content-Type':'application/x-www-form-urlencoded'}; }); app.controller('ctl', function ($scope,$http) { var obj={"name":"xiaode","age":16}; $scope.sendData=function () { console.log($.param(obj)); $http.post('server.php',$.param(obj)).success(function (data) { $scope.data=data }) } })
自定义服务
factory自定义服务：app.factory(name,fn) fn为一个函数返回对象
service自定义服务：app.factory(name,fn) fn为一个构造函数
constant、value自定义服务 类似不过第二个参数是一个对象
demo：
<script>
var app = angular.module('myApp', ['ng']);
/*自定义服务*/
app.factory('$output',function () { //对象形式 factory
return{
print:function (msg) {
console.log(msg);
}
}
});
app.service('$student',function () { //构造函数的形式
this.name='Mical';
this.speak=function () {
console.log(this.name);
}
});
app.controller('ctl', function ($scope,$output,$student) {
$output.print('ddsd');
console.log($student.name);
})
<script>
2. 三种写法：推断式 标记式 行内式 ，下面demo只是写出 注入服务的形式
var app = angular.module('myApp', ['ng']); app.factory('$show', function () { return { show: function () { alert("hello factory show"); } } }); app.service('$print', function () { this.print = function () { alert('hello serverce print'); } }); app.controller('ctl1', function ($scope, $print, $show) { //推断式注入不需要关注参数的先后顺序 ng会推断这个服务是否存在 //不能处理压缩和混淆后的代码，只能处理原始代码 }); var ctrFunc = function ($scope, $show, $write) { }; ctrFunc.$inject = ['$scope', '$show', '$write']; //标记式依赖注入不能是匿名函数 app.controller('ctl2', ctrFunc); app.controller('ctl3', ['$scope', '$print', '$show', function ($scope, $print, $show) { //行内式，最优写法 }]) </script>
3.ps：手动可以通过 var jector=angular.injector（[‘ng’，‘myApp’]）得到注入器 然后has（‘’）判断 在get（‘’）
4.自定义模块：
<script> var app01 = angular.module('myApp01', ['ng']); app01.factory('$custom',function () { return { show:function () { console.log('自定义模块'); } } }); app02=angular.module('myApp02',['ng','myApp01']); app02.controller('ctl', ['$scope','$custom',function($scope,$custom) { $scope.print=function () { $custom.show(); } }]) </script>
5.单页面应用(SPA)
异步请求，通过路由确定资源，局部更新
步骤：
1.创建唯一完整的页面:index.html，引入angular.js和angular-route.js
2.创建自定义模块，声明依赖于ng和ngRoute两个模块
3.在index.html的body中使用ngView指令声明一个容器元素，用于盛放模板页面
4.创建模板页面
5.在当前模块中使用ngRoute提供的对象配置路由字典
6.创建几个模板页面
7.测试路由字典的配置是否正确 http://127.0.0.1/index.html#/路由地址
上demo：
首先是html片段
main.html
<div ng-include="'tpl/header.html'" ></div> //引入头部html片段 <h1>主页</h1> <button ng-click="jump('/Person/3')">跳转到person</button> //3是传入到person的参数 <div ng-include="'tpl/footer.html'"></div>person.html
<div ng-include="'tpl/header.html'"></div> <h1>个人中心</h1> <a ng-click="jump('/Main')">跳转到主页</a> <div ng-include="'tpl/footer.html'"></div>index.html
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Angular</title> <script src="js/angular.js"></script> <script src="js/angular-route.js"></script> </head> <body ng-controller="parentCtrl"> <div ng-view></div> <script> var app = angular.module('myApp',['ng','ngRoute']); app.controller('parentCtrl',['$scope','$location',function ($scope,$location) {//需要$location服务 $scope.jump=function (arg) { //在body控制器中定义jump(),在子$scope里面都可以用 $location.path(arg) } }]); app.config(function ($routeProvider) { //路由配置 $routeProvider.when('/Person',{ templateUrl:'tpl/person.html' }).when('/Main',{ templateUrl:'tpl/main.html' }).when('/Person/:id',{ //接收方接收参数 参数名ID templateUrl:'tpl/person.html', controller:'personCtrl' }).otherwise({ redirectTo:'/Main' }) }); app.controller('personCtrl',['$scope','$routeParams',function ($scope,$routeParams) { console.log($routeParams.id); //如果需要传参数，就需要$scopeParms服务 }]); </script> </body> </html>