angular中的路由,watch,service和ajax

 一、$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

时间: 2024-10-21 19:17:38

angular中的路由,watch,service和ajax的相关文章

angular中的路由支持

import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; impor {RouteConfig, ROUTER_DIRECTIVES, ROUTER_BINDINGS} from 'angular2/router'; 'angular2/router'; import {Home} from './components/home/home'; import {Abou

angular.js的路由和模板在asp.net mvc 中的使用

我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.asp.net mvc 的路由是通过不同的URL到不同的controller然后交给controller去呈现视图.但是在angular.js则是需要提前指定一个module(ng-app),然后去定义路由规则,通过不同的URL,来告诉ng-app 去加载哪个页面.再渲染到ng-view.通过angular.js路由的使用,可以很容易实现页面的局部刷新.更加高效的去创建

AngularJS进阶(三十三)书海拾贝之简介AngularJS中使用factory和service的方法

简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构"关注点分离"的概念.服务是JavaScript函数,并负责只做一个特定的任务.这也使得他们成为维护和测试的单独实体.控制器,过滤器可以调用它们作为需求的基础.服务使用AngularJS的依赖注入机制注入正常. AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等.每个服务负责例如一个特定的任务,$http是用来创建AJ

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

angular中的MVVM模式

在开始介绍angular原理之前,我们有必要先了解下mvvm模式在angular中运用.虽然在angular社区一直将angular统称为前端MVC框架,同时angular团队也称它为MVW(Whatever)框架,但angular框架整体上更接近MVVM模式.下面是Igor Minar发布在Google+ https://plus.google.com/+IgorMinar/posts/DRUAkZmXjNV的文章内容: MVC vs MVVM vs MVP. What a controver

Angular 监听路由变化

var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $location, Service, $rootScope, $stateParams) { //路由监听事件 $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) { co

(七)理解angular中的module和injector,即依赖注入

依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@Repository.

angular中的通信方式

在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2)通过rootScope,顶级作用域 3)通过$broadcast,$on,$emit的方式进行通信 在此就讲解下如何通过第三种方式进行通信的问题: $broadcast:顾名思义是广播的意思,一般用于父级控制器向子控制器传递信息的方法. $emit:主要是用于子控制器向父控制器传递信息的方法. $o

Angular中的jsonp

1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 1 module.controller('InTheatersController',['$scope','$http', function($scope,$http){ 2 4 var doubanApiAddress = 'https://api.douban.com/v2/movie/in_theaters'; 5 6 /!*在angua