AngularJS实例,Angular,AngularJS 在线

745AngularJS API

Angular封装了一系列公共方法,帮助我们更简单的使用 JS。

1、angular.bind()

angular.bind 类似于 Function.prototype.bind,实现函数柯里化,返回一个函数代理。eg:

//函数原型
angular.bind(/*this对象*/self, /*要封装的function*/fn, /*参数列表*/args);
//原始函数

function fun(arg1, arg2, arg3) {
  console.log(this);
  console.log(arg1);
  console.log(arg2);
  console.log(arg3);
}
fun('arg1', 'arg2', 'arg3');
//如果几个常用参数都是固定的,而且该函数被调用频繁,那么就可以包装一下
var fun2 = angular.bind(window, fun, 'arg1', 'arg2');
//新的调用方式
fun2('arg3');

2、angular.bootstrap()

用于使用 angular 执行渲染元素。也是 angular 的启动方法,如果没有 在页面上指定ng-app,必须要手动调用该函数进行启动。

angular.bootstrap(/*Dom元素*/element, /*Array/String/Function*/[modules], /*Object*/[config]);

//常规用法
angular.bootstrap(document, ['app'])
//带配置项
angular.bootstrap(document, ['app'], {strictDi: true/*Defaults: false*/})

3、angular.copy()

Angular.copy 用于复制对象,由于 angular 的双向绑定特点,那么如果直接操作 $scope 对象,那么很容易就会改变 ui 的显示,这个时候就需要借助 angular.copy 来创建一个对象副本,并进行操作。

//原型
angular.copy(source, [destination]);

var obj = {a: 1};
var obj2 = angular.copy(obj);
var obj3;
angular.copy(obj, obj3);
console.log(obj2 === obj) //false
console.log(obj3 === obj) //false
var obj4;
//第二个和参数和返回值是相等的,而且第二个参数不管以前是什么,都会被重新赋值
var obj5 = angular.copy(obj, obj4);
console.log(obj4 === obj5); //true

4、angular.element()

等价与 jQuery 的选择器,如果在 angular 之前没有引入 jQuery,那么就使用 jqLite 包装。

angular.element('body');
//等价于
$('body');

//用法
var $body = angular.element('body');

5、angular.equals()

用于比较两个对象是否相等,如下示例的规则和 JS 有区别,注意识别。

var obj1 = {a: 1};
var obj2 = obj1;
//引用一致,则相等
console.log(angular.equals(obj1, obj2)); // true

obj2 = {a: 1};
//引用不一致,对象表现一致,则相等
console.log(angular.equals(obj1, obj2)); // true

obj2 = {a: 1,$a: 2};
//对象比较时,忽略以$开头的属性
console.log(angular.equals(obj1, obj2)); // true

obj1 = /aa/;
obj2 = /aa/;
//正则表达式表现相等,则相等
console.log(angular.equals(obj1, obj2)); // true

//NaN与NaN比较,则相等
console.log(angular.equals(NaN, NaN)); // true

6、angular.extend()

功能上和 jQuery.extend 没多大差异:

//原型-第一个参数为目标,之后的参数为源,同时返回dst
angular.extend(dst, src);

//示例
var obj1 = {a: 1};
var obj2 = angular.extend(obj1, {a: 2}, {b: 3});
console.log(obj1)
console.log(obj1 === obj2); //true

7、angular.forEach()

angular.forEach 用于遍历对象或者数组,类似于 ES5 的 Array.prototype.forEach。

//原型
angular.forEach(obj, iterator, [context]);

var values = {name: 'misko', gender: 'male'};
var arr = ['misko', 'male'];
angular.forEach(values, function (value, key) {
  console.log(key + ' = ' + value);
});
angular.forEach(arr, function (value, i) {
  console.log(i + ' = ' + value);
});
//还可以传递this
var obj = {};
angular.forEach(values, function (value, key) {
  obj[key] = value;
}, obj);
console.log(obj);

8、angular.fromJson()

angular.fromJson 将 JSON 字符串转换为 JSON 对象,注意,必须严格满足 JSON 格式,比如属性必须双引号,该函数内部实现是利用 JSON.parse()。

//原型
angular.fromJson(/*string*/ jsonString)

var jsonString = '{"p1": "xx", "p2": 1, "p3": true}';
var jsonObj = angular.fromJson(jsonString);
console.log(jsonObj);

9、angular.toJson()

angular.toJson 可以将对象,数组,日期,字符串,数字转换为 json 字符串

//原型
angular.toJson(obj, pretty);

var obj = {p1: 1, p2: true, p3: '2'};
var jsonString = angular.toJson(obj);
console.log(jsonString);
//美化输出格式(设置为true,默认采用2个字符缩进)
jsonString = angular.toJson(obj, true);
console.log(jsonString);
//还可以设置缩进字符数
jsonString = angular.toJson(obj, 10);
console.log(jsonString);

10、angular.identity()

angular.identity 返回该函数参数的第一个值。编写函数式代码时,非常有用(待使用)。

//官方示例
function transformer(transformationFn, value) {
  return (transformationFn || angular.identity)(value);
};
//简单演示
var value = angular.identity('a', 1, true);
console.log(value); // 'a'

11、angular.injector()

angular.injector 能够创建一个 injector 对象,可以用于检索 services 以及用于依赖注入。

//原型,[strictDi]默认false,如果true,表示执行严格依赖模式,
//angular则不会根据参数名称自动推断类型,必须使用['xx', function(xx){}]这种形式。
angular.injector(modules, [strictDi]); 

//定义模块A
var moduleA = angular.module('moduleA', [])
  .factory('F1', [function () {
    return {
      print: function () {
        console.log('I\'m F1 factory');
      }
    }
  }]);
var $injector = angular.injector(['moduleA'])
$injector.invoke(function (F1) {
  console.log(F1.print());
});
//此种写法会报错,因为是严格模式
var $injector2 = angular.injector(['moduleA'], true)
$injector2.invoke(function (F1) {
  console.log(F1.print());
});
//可以采用如下写法
$injector2.invoke(['F1', function (F1) {
  console.log(F1.print());
}]);

12、angular.module()

angular.module 可以说是最常用的 function 了。通过它,可以实现模块的定义,模块的获取。

//定义模块A
var moduleA = angular.module('moduleA', []);
//定义模块B,模块B依赖moduleA
var moduleB = angular.module('moduleB', ['moduleB']);

//可以在第三个参数上设置配置函数
var moduleB = angular.module('moduleB', ['moduleB'], ['$locationProvider', function ($locationProvider) {
  console.log($locationProvider);
}]);
//等价于
var moduleB = angular.module('moduleB', ['moduleB'])
.config(['$locationProvider', function ($locationProvider) {
  console.log($locationProvider);
}]);

//获取模块
angular.bootstrap(document, ['moduleB']);

13、angular.isArray()

angular.isArray 用于判断对象是不是数组,等价于 Array.isArray。

console.log(angular.isArray([])); // true
console.log(angular.isArray({0: '1', 1: '2', length: 2})); // false

14、angular.isDate()

通过判断 toString.call(value) 是不是等于 '[object Date]' 来判断对象是个是一个 Date 对象。

console.log(angular.isDate(new Date())); // true
console.log(angular.isDate(223)); // false

15、angular.isDefined()

判断对象或者属性是否定义

var obj = {a: 1, b: null, c: undefined};
console.log(angular.isDefined(obj.a)); // true
console.log(angular.isDefined(obj.b)); // true
console.log(angular.isDefined(obj.c)); // false
console.log(angular.isDefined(obj.d)); // false

16、angular.isElement()

此方法判断元素是不是一个元素(包含dom元素,或者jquery元素)

console.log(angular.isElement(document.getElementsByTagName('body')[0])); // true
console.log(angular.isElement($('body'))); // true

17、angular.isFunction()

此方法判断对象是不是一个 function ,等价于 typeof fn === 'function'

console.log(angular.isFunction(new Function('a', 'return a'))); // true
console.log(angular.isFunction(function(){})); // true
console.log(angular.isFunction({})); // false

18、angular.isNumber()

判断是否为数字

function isNumber(value) {
  return typeof value === 'number';
}

19、angular.isObject()

判断是否为对象

function isObject(value) {
  return value !== null && typeof value === 'object';
}

20、angular.isString()

判断是否为字符串

function isString(value) {
    return typeof value === 'string';
}

21、angular.isUndefined()

判断变量是否未定义

function isUndefined(value) {
    return typeof value === 'undefined';
}

22、angular.lowercase()

转换字符串为小写模式,如果参数不是字符串,那么原样返回

var lowercase = function(string) {
  return isString(string) ? string.toLowerCase() : string;
};

console.log(angular.lowercase(1)); // 1
console.log(angular.lowercase('ABCdef')); // 'abcdef'

23、angular.uppercase()

转换字符串为大写模式,如果参数不是字符串,那么原样返回

var uppercase = function(string) {
  return isString(string) ? string.toUpperCase() : string;
};

console.log(angular.uppercase(1)); // 1
console.log(angular.uppercase('ABCdef')); // 'ABCDEF'

24、angular.merge()

将多个对象进行深度复制,与extend()不同,merge将会递归进行深度拷贝。该拷贝是完全深拷贝,就连对象引用也不一样。

var o = {};
var obj1 = {a1: 1, a2: 2, a3: [1]};
var obj2 = {b1: [2], b2: /abc/};
var obj3 = [o];
var obj4 = {d: o};
var result = angular.merge({}, obj1, obj2, obj3);
console.log(result);
console.log(result[0] === o); // false
console.log(result.d === o); // false

25、angular.noop()

一个空函数,调试时非常有用。可以避免 callback 未定义引发的 error。

function foo(callback) {
  var result = calculateResult();
  (callback || angular.noop)(result);
}

26、angular.reloadWithDebugInfo()

启用 DebugInfo,该设置优先级高于 $compileProvider.debugInfoEnabled(false)

744AngularJS API

<p>针对楼上说的angular.isNumber无效问题,解决可以使用如下方法:</p><pre style=""><span class="kwd">var</span><span class="pln"> app </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="kwd">module</span><span class="pun">(</span><span class="str">'myApp'</span><span class="pun">,</span><span class="pln"> </span><span class="pun">[]);</span><span class="pln">app</span><span class="pun">.</span><span class="pln">controller</span><span class="pun">(</span><span class="str">'myCtrl'</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">blur </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">(){</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">myInput </span><span class="pun">==</span><span class="str">''</span><span class="pun">){</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">myInput </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">undefined</span><span class="pun">;</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">if</span><span class="pun">(!</span><span class="pln">isNaN</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">myInput</span><span class="pun">)){</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">myInput </span><span class="pun">=</span><span class="pln"> </span><span class="typ">Number</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">myInput</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">x1 </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">lowercase</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">myInput</span><span class="pun">);</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">x2 </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">uppercase</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">myInput</span><span class="pun">);</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">x3 </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">isString</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">myInput</span><span class="pun">);</span><span class="pln"> $scope</span><span class="pun">.</span><span class="pln">x4 </span><span class="pun">=</span><span class="pln"> angular</span><span class="pun">.</span><span class="pln">isNumber</span><span class="pun">(</span><span class="pln">$scope</span><span class="pun">.</span><span class="pln">myInput</span><span class="pun">);</span><span class="pln"> </span><span class="pun">}</span><span class="pln"></span><span class="pun">});</span></pre><p><a target="_blank" href="/try/try.php?filename=angular.isnumber ">尝试一下 »</a></p><p> </p>

743AngularJS API

<p>1、定义ng-app以及控制器,在输入框中填写值,x1和x2分别接收其大小写转换的值,并根据switch来判断true/false让其显示是否是字符串和数字
</p><pre>
&lt;div ng-app="myApp" ng-controller="myCtrl"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;input type="text" ng-model="myInput" ng-blur="blur()"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;输入的内容为:{{myInput}}&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;变成小写:{{ x1 }}&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;变成大写:{{ x2 }}&lt;/p&gt;
  &lt;p ng-switch = "x3"&gt;
      是不是字符串:
      &lt;label ng-switch-when = "true"&gt;是&lt;/label&gt;
      &lt;label ng-switch-when = "false"&gt;不是&lt;/label&gt;
      &lt;label ng-switch-when = ""&gt;&lt;/label&gt;
  &lt;/p&gt;
 &nbsp;&nbsp;&nbsp;&nbsp;&lt;p ng-switch = "x4"&gt;
      是不是数字:
      &lt;label ng-switch-when = "true"&gt;是&lt;/label&gt;
      &lt;label ng-switch-when = "false"&gt;不是&lt;/label&gt;
      &lt;label ng-switch-when = ""&gt;&lt;/label&gt;
  &lt;/p&gt;
&lt;/div&gt;</pre><p>
2、script内容:
</p><pre>
&lt;script&gt;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.blur = function(){
        $scope.x1 = angular.lowercase($scope.myInput);
        $scope.x2 = angular.uppercase($scope.myInput);
        $scope.x3 = angular.isString($scope.myInput);
        // angular.isNumber 这里无效
        // $scope.x4 = angular.isNumber($scope.myInput);
        $scope.x4 = !isNaN($scope.myInput);
    }
});
&lt;/script&gt;</pre>
<p><a class="tryitbtn" href="/try/try.php?filename=angular.isnumber" target="_blank" rel="nofollow">尝试一下 »</a></p>

742AngularJS 表单

下拉框初始化无默认值,或者有空白选项,影响美观,可通过以下方法调整:

  • 1.给定初始化信息(ng-init)
  • 2.隐藏空白选项(ng-show="false")
<form>
  选择一个选项:
  <select ng-model="myVar" ng-init="myVar='tuts'">
    <option ng-show="false" value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

尝试一下 »

741AngularJS 事件

用 ng-init 实现 count 自加和清零:

<div ng-app="" ng-init="count=0">

<button ng-click="count = count + 1">点我!</button>
<button ng-click="count = 0">清零!</button>

<p>{{ count }}</p>

尝试一下 »