angular中的路由，watch，service和ajax

Posted 2020-09-18

　一、$watch.

　先说说angular的watch它可以监视数据模型的变化，$scope.$watch(‘name‘,function(new,old){});watch 有两个参数，第一个是监视的名字，第二个是当被监视者发生变化时，就执行的一个函数。这个函数里面也有两个参数，第一个是新值，第二个是上一个的值。注意这个上一个的值是相对于新值而言的。当被监视者是一个方法时，它将返回方法的返回值。

　二、创建服务service

　　先说说服务的作用，它相当于抽取公共的方法。再来说说如何创建服务。先要明白angular是基于模板的开发，所以服务也是一个模板。我个人理解为先创建服务模板。模板怎么创建？

var app=angular.module(‘service‘,[]);
app.service(‘Myservice‘,function(){
   this.name=‘li‘ 
})

　　服务模板第一个参数是服务模板名字，第二个是要执行的函数，angular会自动帮我们new这个函数创建一个模板对象。这个模板就相当于封装起来了。接下来说说怎么调用服务。

　　三、服务的调用

　　我们已经把服务给写好了，接下来我们就要调用，还是那句话，angular是基于模板的开发，当我们的模板要调用服务时，我们又要创建调用模板。先创建模板再创建模板控制器来操控模板

var app=angular.module(‘myapp‘,[‘service‘]);
app.controller(‘myCon‘,[‘Myservice‘,function(Myservice){}])

调用模板先要创建一个模板，但是这个模板的环境依赖是服务模板，所以要加上service模板，注意不是Myservice是一整个模板。而服务的调用模板里面的Myservice就是服务模板中的对象。

　　四、路由

　　路由的解释就是a标签的链接。通过路由的不同从而可以访问不同的页面，下面讲解配置路由。赘述那句话，模板开发。路由同样是一个模板

var app=angular.module(‘maApp‘,[ngRoute]);
app.config(‘$routeProvider‘,function($routeProvider){
   $routeProvider.when(
   ‘/ali‘,{
   template:‘<div>在三楼</div>‘ 
} 
) 
}
    
).when(‘./baidu‘,{
   template:‘<div>在2楼</div>‘ 
})

　　路由模板依赖一个angular-ngRoute.js这个库所以要先下载然后依赖。然后配置路由config.它有两个参数第一个参数是锚点的值为固定写法$routeProvider后面是不同的条件，用when表示，一个when为一个条件它里面写好锚点值和对应的模板镶嵌。有when就有otherwise，表示不匹配调转的页面

　　五、angular的ajax

　　

http.get(‘./index.json‘)
    .then(function(res){
   $scope .data=res.data
})

六、琐碎

ng-src代替src