服务：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>服务Service简介</title><script src="angular/angular.min.js"></script><script src="js/ng01.js"></script>
</head>
<body ng-controller="ServiceController">name={{name}}
</body>
</html>

var app = angular.module('myApp', []);/*** 使用ng的$timeout服务* 当使用ng服务时会监视作用域中数据的变化，当监视到变化时会自动进行更新操作* 当：ng中监视数据变化是使用$watch服务实现的*/
/*app.run(['$timeout','$rootScope', function($timeout,$rootScope){$timeout(()=>{$rootScope.name='tom';},3000);
}]);*//*** 使用原生js的setTimeout* 当使用非ng服务时不会自动更新，因为监视更新操作只对ng上下文中的操作有效* 此时需要调用该作用域对象的$apply()或$digest()方法通知监控服务$watch进行更新操作* $apply 底层会调用¥digest方法去触发*/
app.run(['$rootScope', function($rootScope){setTimeout(()=>{console.log('时间到了');$rootScope.name='tom';console.log($rootScope.name);  // $rootScope.$apply();$rootScope.$digest();},3000);
}]);app.controller('ServiceController', ['$scope', function($scope) {}]);

http服务

发送ajax请求：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>使用$http服务发送AJAX请求</title><script src="angular/angular.min.js"></script><script src="js/ng02.js"></script>
</head>
<body ng-controller="ServiceController"><div><p  ng-repeat="(k, v) in user">{{k}}={{v}}</p></div>  </body>
</html>

var app = angular.module('myApp', []);app.controller('ServiceController', ['$scope','$http', function($scope,$http) {//使用$http发送AJAX请求/*$http({method:'get',url:'user.jsonaa',responseType:'json'}).then(function(resp){for(var index in resp){console.log(index+'='+resp[index]);}$scope.user=resp.data;},function(resp){console.log('请求失败：'+resp.status+','+resp.statusText);});*///强烈不建议的方式/*$http({method:'get',url:'user.json',responseType:'json'}).success(function(data){console.log(data);}).error(function(data,status,headers,config){console.log(status);});*/$http.get('user.json').then((resp)=>{console.log(resp.data);},(resp)=>{console.log(resp.status);});
}]);

跨域请求：

注意：请求url中必须包含：

&callback=JSON_CALLBACK

var app = angular.module('myApp', []);app.controller('ServiceController', ['$scope', '$http', function($scope, $http) {/*$scope.city='南京';$scope.bus=58;//http://op.juhe.cn/189/bus/busline?key=810f9a0095caf327d7dd0df96ca250c8&city=%E5%8D%97%E4%BA%AC&bus=817$http.jsonp('http://op.juhe.cn/189/bus/busline?key=810f9a0095caf327d7dd0df96ca250c8&callback=JSON_CALLBACK&city='+$scope.city+'&bus='+$scope.bus).then((resp)=>{// console.log(resp.data);$scope.result=resp.data.result[0];},(resp)=>{console.log(resp.status+','+resp.statusText);});*//*** 实现监视用户输入* $watch()方法*/$scope.obj={city:'南京',bus:'58'};//$watch 手动监听数据中指定变量的变化，当发生变化执行回掉函数，进行操作//// 服务不需要注入，存在与作用域，// 默认三个参数：// 第一个要监视的对象或者字符串，// 第二个：回掉函数，做对象发生变化要做的，// 第三个，是是否深度监听，默认false不深度监听，设置为深度监听，设置为true，会监听对象每个属性的变化$scope.$watch('obj', (newValue, oldValue, scope) => {$http.jsonp('http://op.juhe.cn/189/bus/busline?key=810f9a0095caf327d7dd0df96ca250c8&callback=JSON_CALLBACK&city=' + $scope.obj.city + '&bus=' + $scope.obj.bus).then((resp) => {$scope.flag=true;// console.log(resp.data);if(resp.data.result!=null){$scope.result = resp.data.result[0];$scope.flag=false;}}, (resp) => {console.log(resp.status + ',' + resp.statusText);});}, true);}]);

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>使用$http服务发送跨域请求</title><script src="angular/angular.min.js"></script><script src="js/ng03.js"></script>
</head>
<body ng-controller="ServiceController">城市：<input type="text" ng-model="obj.city">线路：<input type="text" ng-model="obj.bus"><hr><div ng-hide="flag"><h3>{{result.name}}，共{{result.stationdes.length}}站</h3><ul><li ng-repeat="bus in result.stationdes">{{bus.stationNum}}.{{bus.name}}</li></ul></div>
</body>
</html>

自定义服务：（3种方式）

自定义模块中服务：（某个模块）

var app = angular.module('myApp', []);/**** angular中服务一般都以$开头，自定义服务一般不要以$开头* 三种方式：* 1.使用Module.factory()方法，最常用（一般情况下使用），*   这种回调必须有返回值，必须有return返回结果，一般会返包含多个方法都对象* 2.使用Module.service()方法* 3.使用Module.provider()方法，最复杂，功能更强大（可以注入配置）*/
//1.使用Module.factory()方法，必须有返回值，一般返回一个包含各种方法定义的对象
app.factory('FirstService', [function(){return {fun:function(){console.log('执行FirstService中的fun()');},calc:function(num1,num2){return num1+num2;}};
}]);//2.使用Module.service()方法
app.service('SecondService', [function(){this.fun=function(){console.log('执行SecondService中的fun()');};
}]);//3.使用Module.provider()方法，最复杂，功能更强大
app.provider('ThirdService',{$get:function(){return {fun:function(){console.log('执行ThirdService中的fun()');},show:function(){console.log('show');}};}
});app.controller('ServiceController', ['$scope', 'FirstService','SecondService','ThirdService', function($scope, FirstService, SecondService, ThirdService) {// FirstService.fun();// console.log(FirstService.calc(3,7));// SecondService.fun();ThirdService.show();//在控制器中调用自定义方法：$scope.doService= function () {ThirdService.fun();}}]);

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>自定义服务：三种方式</title><script src="angular/angular.min.js"></script><script src="js/ng05.js"></script>
</head>
<body ng-controller="ServiceController"><button style="height: 10px" ng-click="doService()">测试123</button></body>
</html>

自定义服务（全局）通用服务：

定义一个全局的模块服务：

var app=angular.module('serviceApp',[]);/*** 在独立的模块中定义服务，其他服务可以引入，实现服务的复用*/
app.factory('GeneralService', ['$http',function($http){return {calc:function(num1,num2){return num1+num2;},getData:function(url){return $http({method:'get',url:url,});},};
}])

在html中引入

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>自定义服务：通用Service</title><script src="angular/angular.min.js"></script><!-- 引入定义服务的独立模块 （自定义独立服务）--><script src="js/service.js"></script><script src="js/ng06.js"></script></head>
<body ng-controller="ServiceController" ng-cloak>num1:<input ng-model="num1"><hr>num2:<input ng-model="num2">
<button ng-click="clca()">计算</button>
<hr><div style="background-color: aqua"><span ng-bind="result"></span></div>
</body>
</html>

在js中注入服务：

//在一个模块中注入独立自定义的模块
var app = angular.module('myApp', ['serviceApp']); //注入依赖模块//在控制器中注入自定义独立模块中的自定义服务
app.controller('ServiceController', ['$scope', 'GeneralService', function($scope, GeneralService) {$scope.clca = function(){$scope.result = GeneralService.calc($scope.num1*1 , $scope.num2*1);}console.log(GeneralService.calc(5,3));//请求可以只写一个，成功的GeneralService.getData('user.json').then((resp)=>{console.log(resp.data);},(resp)=>{console.log(resp.status);});}]);

angularjs的组成之路由：

ng-include（不推荐使用）

var app = angular.module('myApp', []); app.controller('RouteController', ['$scope', function($scope) {$scope.path="pages/1.html";}]);

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>路由：ng-include指令</title><script src="angular/angular.min.js"></script><script src="js/ng07.js"></script>
</head>
<body ng-controller="RouteController"><input type="text" ng-model="path"><div ng-include="path"></div><!--//引入页面需要把引入页面的名称用单引号引起来--><div ng-include="'pages/3.html'"></div></body>
</html>

路由：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head><meta charset="UTF-8"><title>路由：使用ngView和ngRoute</title><script src="angular/angular.min.js"></script><!-- 引入路由模块的脚本文件 --><script src="angular/angular-route.min.js"></script><script src="js/ng08.js"></script>
</head>
<body ng-controller="RouteController"><a href="#/first">first</a><br><a href="#/second">second</a><br><a href="#/third?name=tom&age=21">thrid</a><a href="#/fourth/alice/180.5/175.8">fourth</a><hr><!--路由过来的页面显示的地方--><ng-view></ng-view>
</body>
</html>

var app = angular.module('myApp', ['ngRoute']); /*** 配置路由的步骤：* 1.首先引入angular-route.js文件* 2.自定义模块时需要注入ngRoute模块* 3.在模块配置中配置路由，需要注入$routeProvider服务* 4.使用$routeProvider服务*/
app.config(['$routeProvider',function($routeProvider){$routeProvider//当是first时，显示，pages/1.html 这个页面.when('/first',{templateUrl:'pages/1.html'}).when('/second',{templateUrl:'pages/2.html'}).when('/third',{templateUrl:'pages/3.html',//获取路由传过来的参数，路由传到参数对象会赋值给$routeParams，通过这对象可以获取controller:['$scope','$routeParams',function($scope,$routeParams){// console.log('参数name:'+$routeParams.name);// console.log('参数age:'+$routeParams.age);//这里的¥scope是跳转后的页面的$scope.name=$routeParams.name;$scope.age=$routeParams.age;}],})//传参数到第二种方式跳转页面后 +  /：参数名称   来实现.when('/fourth/:name/:height/:weight',{templateUrl:'pages/4.html',controller:['$scope','$routeParams',function($scope,$routeParams){console.log($routeParams.name);console.log($routeParams.height);console.log($routeParams.weight);}],  });
}]);app.controller('RouteController', ['$scope', function($scope) {}]);

跳转的页面：

3.htmlwelcome to 3.html
<h3>name:{{name}}</h3>
<h3>age:{{age}}</h3>4.htmlwelcome to 4.html

angular.js-服务-http-路由(5)相关推荐

Angular.js示例应用程序
目录介绍演示应用程序概述发布者端网站端 Angular.Js简介应用程序服务模块依赖注入路由视图控制器作用域指令发布者 Angular.js网站 Require.js用法 ...
angular.js 嵌套路由
介绍 AngularJS 嵌套路由:,来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可 ...
angular js一factory，service，provider创建服务
服务:在AngularJS 中,服务是一个函数或对象在写控制器的时候,不要复用controller,当我们的controller里面有相同的代码时,此时需要把它抽取成一个服务,所有的服务都符合依赖注 ...
angular.js的路由和模板在asp.net mvc 中的使用
首先创建asp.NET mvc 程序,创建一个web api : 1 public class UserController : ApiController 2 { 3 private static ...
angular.js使用路由时,子控制器监听不到父级$boardcast的事件
2019独角兽企业重金招聘Python工程师标准>>> 环境:angular.js+sastruts+apache-tomcat angular.js中当使用路由时,控制器之间通信使 ...
史上最全的Angular.js 的学习资源
Angular.js 的一些学习资源基础官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...
angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
如何使用Angular JS设置bootstrap navbar活动类？
本文翻译自:How to set bootstrap navbar active class with Angular JS? If I have a navbar in bootstrap with ...
Angular Router的组件路由介绍
这是SitePoint Angular 2+教程的第4部分,有关如何使用Angular CLI创建CRUD应用程序. 在本文中,我们将介绍Angular Router,并了解当浏览器URL更改时它如何 ...
前端框架-Angular.js
前端的功能与单页应用就webapp开发而言,前端实现的功能主要有: -实现UI(渲染出用户可见的视图和各种功能组件) -对用户的操作(事件)做出反应 -实现业务逻辑 -实现页面路由 -与服务器端交互 ...

angular.js-服务-http-路由(5)

服务：

服务：

http服务

跨域请求：

自定义服务：（3种方式）

自定义模块中服务：（某个模块）

自定义服务（全局）通用服务：

定义一个全局的模块服务：

在html中引入

angularjs的组成之路由：

ng-include（不推荐使用）

路由：

angular.js-服务-http-路由(5)相关推荐

最新文章

热门文章