菜鸟教程 -- 学的不仅是技术,更是梦想!

AngularJS 教程
(追記) (追記ここまで)

AngularJS API


API 意为 Application Programming Interface(应用程序编程接口)。


AngularJS 全局 API

AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如:

  • 比较对象
  • 迭代对象
  • 转换对象

全局 API 函数使用 angular 对象进行访问。

以下列出了一些通用的 API 函数:

API 描述
angular.lowercase (<angular1.7)
angular.$$lowercase()(angular1.7+)
转换字符串为小写
angular.uppercase() (<angular1.7)
angular.$$uppercase()(angular1.7+)
转换字符串为大写
angular.isString() 判断给定的对象是否为字符串,如果是返回 true。
angular.isNumber() 判断给定的对象是否为数字,如果是返回 true。

注意:自 AngularJS 1.7 之后移除 angular.lowercase 和 angular.uppercase 方法, 改为 angular.$$lowercase 和 angular.$$uppercase


angular.lowercase()

实例

<divng-app="myApp"ng-controller="myCtrl"><p>{{ x1 }}</p><p>{{ x2 }}</p></div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.x1 = "RUNOOB"; $scope.x2 = angular.$$lowercase($scope.x1); }); </script>

尝试一下 »

angular.uppercase()

实例

<divng-app="myApp"ng-controller="myCtrl"><p>{{ x1 }}</p><p>{{ x2 }}</p></div><script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.x1 = "runoob"; $scope.x2 = angular.$$uppercase($scope.x1); }); </script>

尝试一下 »

angular.isString()

实例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "RUNOOB";
$scope.x2 = angular.isString($scope.x1);
});
</script>

尝试一下 »

angular.isNumber()

实例

<div ng-app="myApp" ng-controller="myCtrl">
<p>{{ x1 }}</p>
<p>{{ x2 }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.x1 = "RUNOOB";
$scope.x2 = angular.isNumber($scope.x1);
});
</script>

尝试一下 »
AI 思考中...

4 篇笔记 写笔记

  1. #0

    不爱李雷的韩梅梅

    227***[email protected]

    参考地址

    4

    1、定义ng-app以及控制器,在输入框中填写值,x1和x2分别接收其大小写转换的值,并根据switch来判断true/false让其显示是否是字符串和数字

    <div ng-app="myApp" ng-controller="myCtrl">
     <input type="text" ng-model="myInput" ng-blur="blur()">
     <p>输入的内容为:{{myInput}}</p>
     <p>变成小写:{{ x1 }}</p>
     <p>变成大写:{{ x2 }}</p>
     <p ng-switch = "x3">
     是不是字符串:
     <label ng-switch-when = "true">是</label>
     <label ng-switch-when = "false">不是</label>
     <label ng-switch-when = ""></label>
     </p>
     <p ng-switch = "x4">
     是不是数字:
     <label ng-switch-when = "true">是</label>
     <label ng-switch-when = "false">不是</label>
     <label ng-switch-when = ""></label>
     </p>
    </div>

    2、script内容:

    <script>
    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);
     }
    });
    </script>

    尝试一下 »

    不爱李雷的韩梅梅

    227***[email protected]

    参考地址

    9年前 (2017年06月14日)
  2. #0

    ECOMA

    any***[email protected]

    0

    针对楼上说的angular.isNumber无效问题,解决可以使用如下方法:

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
     $scope.blur = function(){
     if($scope.myInput ==''){
     $scope.myInput = undefined;
     } 
     if(!isNaN($scope.myInput)){ 
     $scope.myInput = Number($scope.myInput);
     }
     $scope.x1 = angular.lowercase($scope.myInput);
     $scope.x2 = angular.uppercase($scope.myInput);
     $scope.x3 = angular.isString($scope.myInput); 
     $scope.x4 = angular.isNumber($scope.myInput); 
     }
    });

    尝试一下 »

    ECOMA

    any***[email protected]

    9年前 (2017年12月06日)
  3. #0

    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)

    8年前 (2018年11月27日)
  4. #0

    莫云海

    129***[email protected]

    1

    针对1楼说的angular.isNumber无效问题,解决方法如下:

    <script>
    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.myInput) 一直返回为false 
     // 这里无效原因是:input标签的输入值本身就为字符串,所以不能直接进行判断 需要做如下更改
     let isNum = String(Number($scope.myInput)) == 'NaN' ? '' : Number($scope.myInput);
     $scope.x4 = angular.isNumber(isNum);
     // $scope.x4 = !isNaN($scope.myInput);
     }
    });
    </script>

    莫云海

    129***[email protected]

    6年前 (2020年03月31日)

点我分享笔记

  • 昵称 (必填)
  • 邮箱 (必填)
  • 引用地址

AltStyle によって変換されたページ (->オリジナル) /