«

»

AngularJs的provider里面的装饰器decorator

快抢沙发

我们经常在使用某些Service的时候,更希望它能具备一些额外的功能,这时我们难道改这个Service吗?如果是系统自带的呢,改吗?这当然不现实吧。所以我们的装饰器decorator就发挥作用了,它能让已有的功能锦上添花。我们在config里面使用装饰器。
使用方法

      第一个参数:需要装饰的Service名
      第二个参数:一个接受$delegate的回调函数,$delegate代表我们的原来的service实例。

需要注意的是constant常量是不可以被装饰的。
示例代码如下:

var app = angular.module("myApp", []);
app.controller('myCtrl', ['$scope','myInfo', function($scope, myInfo){
  console.log(myInfo);
}]);

app.config(['$provide',function($provide) {
  $provide.decorator('myInfo', function($delegate){
    $delegate.lastName = "Prompt";
    return $delegate;
  })
}]);

app.service('myInfo', function(){
  this.fistName = "Shadow";
})

原来的服务myInfo只有firstName一个属性,我们利用decorator后在不修改myInfo代码的情况下里面添加了lastName属性。
decorator

2016.09.14
H
阅读全文...

浅析angular.identity

快抢沙发

angular.identity这个函数比较简单,官方文档也就简单的交代了下。
使用方法:当你用函数风格书写时,它返回的是函数的一个参数。

function transformer(transformationFn, value) {
       return (transformationFn || angular.identity)(value);
     };

需要额外说明的是:这里面的transformationFn是第一个参数,它将把value作为自己的参数来执行。如果transformation传递的是null或者undefined的话,angular.identity把value作为自己的参数来执行。
示例如下:

var app = angular.module('myApp', []); 
app.controller('myCtrl', ['$scope',function($scope){
  $scope.result = "";
  $scope.input = "";
  $scope.double = function(n){
    return n*2;
  }
  $scope.answer = function(fn, val){
    return (  fn || angular.identity)(val);
  }
  $scope.cal = function(){
    $scope.result = $scope.answer($scope.double, $scope.input);
  }
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<script src="../js/Angular1.5.5.js" ></script>
		<script src="../js/angular-sanitize.js" ></script>
		<script src="index.js" ></script>
		<title>angular.identity</title>
	</head>
	<body>
		<div ng-controller="myCtrl">
			<input type="text" id="btn" ng-model="input" value="answer" ng-change="cal()"/> * 2  = {{result}}
    </div>
	  </div>
	</body>
</html>

angualr.identity

2016.09.03
H
阅读全文...

AngularJS加载方式和angular.bootstrap

快抢沙发

我们一般写AngularJS时,会在html或者body、div、form等标签里面加上ng-app=”myApp”之类的,这实际上就是让angular自动加载,Angular会自动找到ng-app指令,并将写有ng-app的HTML元素里面的内容作为自己的管辖范围,也就是以该元素为根。这时系统只会找第一个ng-app,如果你的代码里面有多个ng-app的话,angular只理会第一个,后面的直接无视。
如果你的代码里面没有包含ng-app,你就只能手动加载angular了,就需要用到angular.bootstrap这个函数了。
angular.bootstrap函数有两个参数,第一个参数必须,第二个为可选参数。
使用方法:

  1. element(DOM元素):该DOM元素将作为angular的根
  2. modules(数组,数组里面的元素可以是字符、函数、数组):angular需要加载的各个模块的名字所构成的数组

返回值:为应用新建一个注入器。
示例代码如下:

      var app =angular.module("myApp",[]);
      var app2 =angular.module("myApp2",[]);
      var app3 =angular.module("myApp3",[]);
      console.log(app);
      app.controller('myCtrl', ['$scope',function($scope){
        $scope.test = "This is a test!"
      }]);
      app2.controller('myCtrl2', ['$scope',function($scope){
        $scope.test = "A test too!"
      }]);
      app3.controller('myCtrl3', ['$scope',function($scope){
        $scope.test = "I am from div3!"
      }]);

      angular.element(document).ready(function() {
        angular.bootstrap(document.getElementsByName('boot'), ['myApp', 'myApp2']); 
        angular.bootstrap(document.getElementById("div3"),["myApp3"]);
      });

html代码

<html>
  <body>  
    <div name='boot' ng-controller="myCtrl">
      {{test}}
    </div>
    <div name='boot' ng-controller="myCtrl2">
      {{test}}
    </div>
    <div id='div3' ng-controller="myCtrl3">
      {{test}}
    </div>
  </body>  
</html>

运行结果如下:
angular.bootstrap
也可以利用下面的代码实现加载三个

      angular.element(document).ready(function() {
        angular.bootstrap(document), ['myApp', 'myApp2', 'myApp3']); 
      });

在做项目的实战中,手动加载angular完全没有必要。

2016.09.02
H
阅读全文...

浅析angular.bind

快抢沙发

简单来说angular.bind函数是用来返回一个自己设定参数的函数。它有三个参数,其中第三个参数是可选的。第二个参数是被绑定的函数fn,第一个参数是第二个参数fn的上下文对象,用this调用。
使用方法:

  1. self(对象):fn的上下文对象,可用this调用
  2. fn(函数):被绑定的函数
  3. arg(*):可以用来绑定给fn的参数

返回值:
被绑定参数的函数
举个例子

      var self = {name:'Jack'};
      //示例1--带参数
      var f = angular.bind(self, //绑定对象,作为函数的上下文
        //被绑定的函数
        function(age){  
          console.log(this.name + ' is ' + age + ' !');
        },
        //绑定的参数,可省略
        '15'
      );        
      //示例2--不带参数
      var m = angular.bind(self, //绑定对象,作为函数的上下文
        //被绑定的函数
        function(age, sex){  
          console.log(this.name + ' is ' + age + ', he is a ' + sex + ' !');
        }
        //省略参数
      );
      f();//调用绑定之后的function
      m(3,'male');//调用传参的函数    

示例1相当于是把参数放进angular.bind()里面的第三个参数,示例2是把参数直接放入m3()里面。
angular.bind

2016.09.02
H
阅读全文...

浅析angular.forEach

快抢沙发

这个forEach还是比较简单的,angular.forEach有三个参数,前两个参数是必须的,第三个是可选的;
使用方法:

  1. obj(对象或者数组):被迭代对象
  2. iterator(函数):迭代器函数
  3. context(对象):在iterator中被指定为上下文的对象,也就是说在iterator里面的this指的就是此处的context

返回值:对象或者数组,返回的是前面第一个参数obj的引用。
举个例子

var values = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(values, function(arg1, arg2, arg3) {
   this.push(arg1 + ': ' + arg2);
   console.log(arg3);
}, log);
 console.log(log);

这里forEach传递了三个参数,先说说里面的第三个参数log,将forEach的上下文指定为log,这样在第二个参数function里面的this指的就是log,如果不填写第三个参数的话,里面的this指向的就是window。
还要说明的是这里面的第二个参数function,function里面最多可以填写三个参数,arg1就是我们常见的key,即此处的name/gender,arg2就是我们常见的value,即此处的misko/male,一般不用第三个参数arg3,如果非要第三个参数的话,arg3的值就是此处的对象values。
angular.forEach

2016.09.02
H
阅读全文...
  • sitemap_baidu