Angular.js(七)
来源:互联网 发布:香蕉网络电视免费tv 编辑:程序博客网 时间:2024/05/16 16:06
自定义服务factory、provider
注意:(1)自定义服务与内部的服务引入相同
(2)自定义服务要写在内部的服务后面,并且自定义服务的命名一般不要带$符号,目的就是与内部服务区分
factory自定义服务写法:
var m1 = angular.module('myApp',[]);m1.factory('myService',function(){return {name : 'hello',show : function(){return this.name + ':angular.js';}}})m1.controller('A',['$scope','myService',function($scope,myService){console.log(myService.show());}]);
provider自定义服务写法:
var m1 = angular.module('myApp',[]);m1.provider('myServe',function(){return {$get : function(){return {name : 'hello',show : function(){return this.name+':anjular.js';}}}}})m1.controller('A',['$scope','myServe',function($scope,myServe){console.log(myServe.show());}]);
factory自定义服务随机数:
var m1 = angular.module('myApp',[]);m1.factory('myRanndomNum',function(){return function(num1,num2){return Math.random()*(num2-num1)+num1;}})m1.controller('A',['$scope','myRanndomNum',function($scope,myRanndomNum){console.log(myRanndomNum(0,8));}]);
provider自定义服务随机数:
var m1 = angular.module('myApp',[]);m1.provider('myRanndomNum',function(){return {bOn : false,int : function(b){if(b){this.bOn = true;}else{this.bOn = false;}},$get : function(){var This = this;return function(num1,num2){return This.bOn ? Math.round(Math.random()*(num2-num1)+num1):Math.random()*(num2-num1)+num1;}}}})m1.config(['myRanndomNumProvider',function(myRanndomNumProvider){ myRanndomNumProvider.int(true); // true时,打印出来的随机数是整数, false时,打印出来的suiji}]);m1.controller('A',['$scope','myRanndomNum',function($scope,myRanndomNum){console.log(myRanndomNum(0,8));}]);
provider和factory的区别:
(1)写法不同
(2)provider可以初始化配置,但是factory不可以
service():一般采用构造函数的方法,主要就是针对面向对象开发
var m1 = angular.module('myApp',[]);m1.service('myService',fnService);function fnService(){this.name = 'hello';}fnService.prototype.age = 20;m1.controller('A',['myService',function(myService){console.log(myService.age); // 输出myService下的age值}])
constant:设置常量,可以进行初始化配置,注意的是:服务的名称后面不需要加Provider
var m1 = angular.module('myApp',[]);m1.constant('myService','hello');m1.config(['myService',function(myService){console.log(myService); // 在初始化配置中找到常量}])m1.controller('A',['myService',function(myService){console.log(myService);}]);
value():设置常量,不能进行初始化配置
var m1 = angular.module('myApp',[]);m1.value('myService','hello2');m1.controller('A',['myService',function(myService){console.log(myService);}]);
ngRoute:实现单页面路由方式,有历史管理
注意:引用route的插件时,需要与angularJs的版本保持一致,如果插件的版本高于angularJs的版本,就会报错
var m1 = angular.module('myApp',['ngRoute']); // 模板与模板相连m1.config(['$routeProvider',function($routeProvider){$routeProvider.when('/a',{template : '<p>导航一下的内容</p>{{name}}', // 同时可以写成templateUrl模板的形式controller : 'A' // 每一个下面都可以有一个控制器}).when('/b',{template : '<p>导航二下的内容</p>{{name}}',controller : 'B'}).when('/c',{template : '<p>导航三下的内容</p>{{name}}',controller : 'C'}).otherwise({ // 初始化路由,开始时加载一个哈希值redirectTo : '/a'});}]);m1.controller('A',['$scope',function($scope){$scope.name = "hello";}]);m1.controller('B',['$scope',function($scope){$scope.name = "hi";}]);m1.controller('C',['$scope',function($scope){$scope.name = "word";}]);
<div ng-controller="A"><a href="#a">导航一</a><a href="#b">导航二</a><a href="#c">导航三</a><div ng-view></div> // ng-view 就是要切换的内容</div>
事件的绑定:$onm1.run(['$rootScope',function($rootScope){$rootScope.$on('$routeChangeStart',function(event,current,pre){ // 路由开始切换console.log(event); // 类似原生js中的event,下面有属性和方法console.log(current); // 当前路径的数据console.log(pre); // 前一个路径的所有数据,如果当前是第一个路径,name前一个了路径就是undefined})}])
$emit:向上传播(类似于事件冒泡)
$broadcast:向下传播(类似于事件捕获)
var m1 = angular.module('myApp',[]);m1.controller('A',['$scope',function($scope){$scope.number = 0;$scope.$on('myEvent',function(event){ // 绑定事件$scope.number++;console.log(event.targetScope == event.currentScope); // 判断目标作用域和当前作用域是否一致console.log(event.name); // 查看当前事件的名称})}]);
<div ng-controller="A">{{number}}<div ng-controller="A" ng-click="$broadcast('myEvent')"> // 向下传播,下面的div中的数字和这个div一起变化{{number}} <div ng-controller="A">{{number}}</div></div></div>
event.targetScope:事件目标的作用域event.currenScope:事件当前的作用域
event.name:查看当前的事件名称
event.stopPropagation:阻止事件的向下广播或者向上广播
内部的传播方式
-$routeChangeStart:向上传播
-$viewContentLoaded:向下传播
animate:运动效果,引入文件
支持的指令分别有:ng-if ng-view ng-repeat include switch
css3的方式:ng-enter ng-enter-active ng-leave ng-leave-active (分别是进入效果和移出效果)
.box{width: 200px;height: 200px;background: red;transition:1s all;}.box.ng-enter{opacity: 0;}.box.ng-enter-active{opacity: 1;}.box.ng-leave{opacity: 1;}.box.ng-leave-active{opacity: 0;}
var m1 = angular.module('myApp',['ngAnimate']); // 与模块相连m1.controller('A',['$scope',function($scope){$scope.bOn = true;}]);
<div ng-controller="A"><input type="checkbox" ng-model="bOn"><div ng-if="bOn" class="box"></div></div>
ng-repeat:引入的文件最好是最新的文件,同时又两个class名称,ng-enter-stagger:进入顺序 animation-delay:设置延时的时间
支持的指令分别有:class show hide model
css3的方式:ng-hide-add ng-hide-add-active ng-hide-remove ng-hide-remove-active
.box{width: 200px;height: 200px;background: red;transition:1s all;}.box.ng-hide-remove{opacity: 0;}.box.ng-hide-remove-active{opacity: 1;}.box.ng-hide-add{opacity: 1;}.box.ng-hide-add-active{opacity: 0;}
采用JS方式的运动效果
引入jQuery文件
如果指令是 if 对应写的就是 leave 和 enter(两个参数)
var m1 = angular.module('myApp',['ngAnimate']);m1.animation('.box',function(){ // 第一个参数是 想要控制谁运动的class名return {leave : function(element,done){ // element:运动的标签 done:需要执行的指令$(element).animate({height:0,width:0},500,done); // 写done就是要调用的指令},enter : function(element,done){ $(element).css({height:0,width:0});$(element).animate({height:'200px',width:"200px"},500,done)}}})m1.controller('A',['$scope',function($scope){$scope.bOn = true;}]);
如果指令是 show 对应写的就是 removeClass 和 addClass(不常用,写的时候有三个参数)
var m1 = angular.module('myApp',['ngAnimate']);m1.animation('.box',function(){return {addClass : function(element,sClass,done){ // 三个参数 sClass:代表的就是ng-hide$(element).animate({height:0,width:0},500,done);},removeClass : function(element,sClass,done){$(element).css({height:0,width:0});$(element).animate({height:'200px',width:"200px"},500,done)}}})m1.controller('A',['$scope',function($scope){$scope.bOn = true;}]);
请求方式:get query
最后查找的就是Hellen.json文件
var m1 = angular.module('myApp',['ngResource']);m1.controller('A',['$scope','$resource',function($scope,$resource){var obj = $resource(':name.:aaa',{aaa:'json'},{}); // 动态的方式写文件console.log(obj.get());$scope.data = obj.get({name:'Hellen'},function(){},function(){}); // 文件名 成功的回调 失败的回调}]);
采用 get 方式,点击切换员工的信息引入路由文件
var m1 = angular.module('myApp',['ngRoute','ngResource']); // 模块与模块的相连m1.config(['$routeProvider',function($routeProvider){$routeProvider.when('/aaa/:name',{template : '<div>{{data.name}}</div><div>{{data.age}}</div><div>{{data.job}}</div>',controller : 'A'}).otherwise({redirectTo : '/aaa/Anna' })}]);m1.controller('A',['$scope','$location','$resource','$routeParams',function($scope,$location,$resource,$routeParams){$scope.$location = $location;if($routeParams.name){var obj = $resource($routeParams.name+'.json',{},{});$scope.data = obj.get();}}]);
<div ng-controller="A"><input type="button" value="Anna" ng-click="$location.path('aaa/Anna')"> // 动态设置<input type="button" value="Hellen" ng-click="$location.path('aaa/Hellen')"><div ng-view></div></div>
如果数据为成组的json,也就是一数组的形式返回,那么就需要用 query 来获取数据
自定义服务factory、provider
注意:(1)自定义服务与内部的服务引入相同
(2)自定义服务要写在内部的服务后面,并且自定义服务的命名一般不要带$符号,目的就是与内部服务区分
factory自定义服务写法:
var m1 = angular.module('myApp',[]);m1.factory('myService',function(){return {name : 'hello',show : function(){return this.name + ':angular.js';}}})m1.controller('A',['$scope','myService',function($scope,myService){console.log(myService.show());}]);
provider自定义服务写法:
var m1 = angular.module('myApp',[]);m1.provider('myServe',function(){return {$get : function(){return {name : 'hello',show : function(){return this.name+':anjular.js';}}}}})m1.controller('A',['$scope','myServe',function($scope,myServe){console.log(myServe.show());}]);
factory自定义服务随机数:
var m1 = angular.module('myApp',[]);m1.factory('myRanndomNum',function(){return function(num1,num2){return Math.random()*(num2-num1)+num1;}})m1.controller('A',['$scope','myRanndomNum',function($scope,myRanndomNum){console.log(myRanndomNum(0,8));}]);
provider自定义服务随机数:
var m1 = angular.module('myApp',[]);m1.provider('myRanndomNum',function(){return {bOn : false,int : function(b){if(b){this.bOn = true;}else{this.bOn = false;}},$get : function(){var This = this;return function(num1,num2){return This.bOn ? Math.round(Math.random()*(num2-num1)+num1):Math.random()*(num2-num1)+num1;}}}})m1.config(['myRanndomNumProvider',function(myRanndomNumProvider){ myRanndomNumProvider.int(true); // true时,打印出来的随机数是整数, false时,打印出来的suiji}]);m1.controller('A',['$scope','myRanndomNum',function($scope,myRanndomNum){console.log(myRanndomNum(0,8));}]);
provider和factory的区别:
(1)写法不同
(2)provider可以初始化配置,但是factory不可以
service():一般采用构造函数的方法,主要就是针对面向对象开发
var m1 = angular.module('myApp',[]);m1.service('myService',fnService);function fnService(){this.name = 'hello';}fnService.prototype.age = 20;m1.controller('A',['myService',function(myService){console.log(myService.age); // 输出myService下的age值}])
constant:设置常量,可以进行初始化配置,注意的是:服务的名称后面不需要加Provider
var m1 = angular.module('myApp',[]);m1.constant('myService','hello');m1.config(['myService',function(myService){console.log(myService); // 在初始化配置中找到常量}])m1.controller('A',['myService',function(myService){console.log(myService);}]);
value():设置常量,不能进行初始化配置
var m1 = angular.module('myApp',[]);m1.value('myService','hello2');m1.controller('A',['myService',function(myService){console.log(myService);}]);
ngRoute:实现单页面路由方式,有历史管理
注意:引用route的插件时,需要与angularJs的版本保持一致,如果插件的版本高于angularJs的版本,就会报错
var m1 = angular.module('myApp',['ngRoute']); // 模板与模板相连m1.config(['$routeProvider',function($routeProvider){$routeProvider.when('/a',{template : '<p>导航一下的内容</p>{{name}}', // 同时可以写成templateUrl模板的形式controller : 'A' // 每一个下面都可以有一个控制器}).when('/b',{template : '<p>导航二下的内容</p>{{name}}',controller : 'B'}).when('/c',{template : '<p>导航三下的内容</p>{{name}}',controller : 'C'}).otherwise({ // 初始化路由,开始时加载一个哈希值redirectTo : '/a'});}]);m1.controller('A',['$scope',function($scope){$scope.name = "hello";}]);m1.controller('B',['$scope',function($scope){$scope.name = "hi";}]);m1.controller('C',['$scope',function($scope){$scope.name = "word";}]);
<div ng-controller="A"><a href="#a">导航一</a><a href="#b">导航二</a><a href="#c">导航三</a><div ng-view></div> // ng-view 就是要切换的内容</div>
事件的绑定:$onm1.run(['$rootScope',function($rootScope){$rootScope.$on('$routeChangeStart',function(event,current,pre){ // 路由开始切换console.log(event); // 类似原生js中的event,下面有属性和方法console.log(current); // 当前路径的数据console.log(pre); // 前一个路径的所有数据,如果当前是第一个路径,name前一个了路径就是undefined})}])
$emit:向上传播(类似于事件冒泡)
$broadcast:向下传播(类似于事件捕获)
var m1 = angular.module('myApp',[]);m1.controller('A',['$scope',function($scope){$scope.number = 0;$scope.$on('myEvent',function(event){ // 绑定事件$scope.number++;console.log(event.targetScope == event.currentScope); // 判断目标作用域和当前作用域是否一致console.log(event.name); // 查看当前事件的名称})}]);
<div ng-controller="A">{{number}}<div ng-controller="A" ng-click="$broadcast('myEvent')"> // 向下传播,下面的div中的数字和这个div一起变化{{number}} <div ng-controller="A">{{number}}</div></div></div>
event.targetScope:事件目标的作用域event.currenScope:事件当前的作用域
event.name:查看当前的事件名称
event.stopPropagation:阻止事件的向下广播或者向上广播
内部的传播方式
-$routeChangeStart:向上传播
-$viewContentLoaded:向下传播
animate:运动效果,引入文件
支持的指令分别有:ng-if ng-view ng-repeat include switch
css3的方式:ng-enter ng-enter-active ng-leave ng-leave-active (分别是进入效果和移出效果)
.box{width: 200px;height: 200px;background: red;transition:1s all;}.box.ng-enter{opacity: 0;}.box.ng-enter-active{opacity: 1;}.box.ng-leave{opacity: 1;}.box.ng-leave-active{opacity: 0;}
var m1 = angular.module('myApp',['ngAnimate']); // 与模块相连m1.controller('A',['$scope',function($scope){$scope.bOn = true;}]);
<div ng-controller="A"><input type="checkbox" ng-model="bOn"><div ng-if="bOn" class="box"></div></div>
ng-repeat:引入的文件最好是最新的文件,同时又两个class名称,ng-enter-stagger:进入顺序 animation-delay:设置延时的时间
支持的指令分别有:class show hide model
css3的方式:ng-hide-add ng-hide-add-active ng-hide-remove ng-hide-remove-active
.box{width: 200px;height: 200px;background: red;transition:1s all;}.box.ng-hide-remove{opacity: 0;}.box.ng-hide-remove-active{opacity: 1;}.box.ng-hide-add{opacity: 1;}.box.ng-hide-add-active{opacity: 0;}
采用JS方式的运动效果
引入jQuery文件
如果指令是 if 对应写的就是 leave 和 enter(两个参数)
var m1 = angular.module('myApp',['ngAnimate']);m1.animation('.box',function(){ // 第一个参数是 想要控制谁运动的class名return {leave : function(element,done){ // element:运动的标签 done:需要执行的指令$(element).animate({height:0,width:0},500,done); // 写done就是要调用的指令},enter : function(element,done){ $(element).css({height:0,width:0});$(element).animate({height:'200px',width:"200px"},500,done)}}})m1.controller('A',['$scope',function($scope){$scope.bOn = true;}]);
如果指令是 show 对应写的就是 removeClass 和 addClass(不常用,写的时候有三个参数)
var m1 = angular.module('myApp',['ngAnimate']);m1.animation('.box',function(){return {addClass : function(element,sClass,done){ // 三个参数 sClass:代表的就是ng-hide$(element).animate({height:0,width:0},500,done);},removeClass : function(element,sClass,done){$(element).css({height:0,width:0});$(element).animate({height:'200px',width:"200px"},500,done)}}})m1.controller('A',['$scope',function($scope){$scope.bOn = true;}]);
请求方式:get query
最后查找的就是Hellen.json文件
var m1 = angular.module('myApp',['ngResource']);m1.controller('A',['$scope','$resource',function($scope,$resource){var obj = $resource(':name.:aaa',{aaa:'json'},{}); // 动态的方式写文件console.log(obj.get());$scope.data = obj.get({name:'Hellen'},function(){},function(){}); // 文件名 成功的回调 失败的回调}]);
采用 get 方式,点击切换员工的信息引入路由文件
var m1 = angular.module('myApp',['ngRoute','ngResource']); // 模块与模块的相连m1.config(['$routeProvider',function($routeProvider){$routeProvider.when('/aaa/:name',{template : '<div>{{data.name}}</div><div>{{data.age}}</div><div>{{data.job}}</div>',controller : 'A'}).otherwise({redirectTo : '/aaa/Anna' })}]);m1.controller('A',['$scope','$location','$resource','$routeParams',function($scope,$location,$resource,$routeParams){$scope.$location = $location;if($routeParams.name){var obj = $resource($routeParams.name+'.json',{},{});$scope.data = obj.get();}}]);
<div ng-controller="A"><input type="button" value="Anna" ng-click="$location.path('aaa/Anna')"> // 动态设置<input type="button" value="Hellen" ng-click="$location.path('aaa/Hellen')"><div ng-view></div></div>
如果数据为成组的json,也就是一数组的形式返回,那么就需要用 query 来获取数据
- Angular.js(七)
- (七)angular表单demo
- 七步从Angular.JS菜鸟到专家(1):如何开始
- 七步从Angular.JS菜鸟到专家(2):Scopes
- 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
- 七步从Angular.JS菜鸟到专家(1):如何开始
- 七步从Angular.JS菜鸟到专家(2):Scopes
- 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
- 七步从Angular.JS菜鸟到专家(1):如何开始
- 七步从Angular.JS菜鸟到专家(2):Scopes(1)
- 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX(1)
- (目录贴)七步从Angular.JS菜鸟到专家
- 七步从Angular.JS菜鸟到专家(1):如何开始
- 七步从Angular.JS菜鸟到专家(2):Scopes
- 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
- 七步从Angular.JS菜鸟到专家(1):如何开始
- 七步从Angular.JS菜鸟到专家(2):Scopes
- 七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
- centos笔记
- 2017 多校训练第一场 Add More Zero
- MyBatis映射关系一对多
- CSAPP:cache lab
- 机器学习3
- Angular.js(七)
- HEVC函数入门(12)——量化参数及码率控制
- 机器学习4
- Window系统下搭建GIT本地服务器
- 树莓派3 基础入门
- 网络游戏之快照插值物理模拟
- C++读写.mat文件
- XSSFWorkbook Excel导入导出
- 浅谈J2SE基础中几种循环的区别