当前位置：首页 > news >正文

1.angular介绍

news 来源：原创 2025/4/29 17:49:05

初級使用视频添加链接描述

angular工具

angular.module(‘名’, [依赖模块]) 模块
angular.bind(*) : 修改this指向
angualr.copy() // a = angular.copy(a, b) —a完全覆盖了b,c就是a
angular.extend(a, b) a里面集成了b属性
angular.isArray
angular.isDate
angular.isDefined 判断是否存在如果不是undefined,跟下面相反
angular.isUndefined
angular.isFunction
angular.isNumber
angular.isObject
angular.isString
angular.isElement
angular.version 版本
angular.equals 这个数组相等,nan相等
angular.forEach(values, function(value, key) {this.push(value)}, result) var result = [] values可以是数组和对象, 里面的this就是第三个参数,也就是result
angular.fromJson/toJson({}, true) // 跟JSON.stringfy那种一样,只不过变成json的时候加第二个参数true就可以格式好一些
angular.element 其实后期就可以转化成jquery这种后面使用jquery方法
angular.bootstrap 可以动态变成angular,不用初始写ng-app,需要时候在变
angular.identity/noop 其实就是返回一样的和返回undefined,平常没用

其他的就看api就行

模块的属性m1= angular.module

m1属性

m1.controller 控制器.写js逻辑,里面[]注入的一般是服务MVUR有$scope,$timeout(在里面使用settimeout不起作用需要使用这个timeout才行)
m1.run 可以弄一個全局的，不用写控制器就可以的用的
m1.run([‘$rootScope’, function($rootScope) {
$rootScope.name = ‘hello’
}])
m1.filter 过滤器
m1.directive 自定义指令
m1.factory() 自定义服务写公共使用的
m1.provider() 也是自定义服务,但是跟上面factory区别,factory不可以初始化服务也就是不可以.config
m1.service面向对象

过滤器

自有的過濾器

currency: ‘￥’ biancheng变成金额
number: 变成数字,后面number:2 2表示小数点两位
lowercase/uppercase 大小写转化
变成json,<pre>{{ obj |json }}<pre> 格式变成json
limitTo:2 截取数组或字符串2位
date: ** 后面可以有参数可选把毫秒格式化’223212123’|date
order: ‘age’ : true数组根据age进行排序, 第二个参数可以逆排序
filter {{name|filter :‘l’: true}}过滤数组,比如数组中匹配value值匹配到l的值,第二个参数是匹配完整的value
也可以多個使用
eg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <!-- 19,721,389 -->
    <span>{{ name|number:0 }}</span> 
    <!-- HE -->
    <span>{{ str|limitTo: 2|uppercase}}</span>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.name = 19721389.132143
            $scope.str = 'hello'
        }])
    </script>
</body>
</html>

可以使用服务形式$filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <!-- HELLO -->
    <span>{{ name }}</span>
    <!-- 32221.99 -->
    <span>{{ num }}</span>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$filter', function($scope, $filter) {
            $scope.name = $filter('uppercase')('hello')
            $scope.num = $filter('number')(32221.9932, 2)
        }])
    </script>
</body>
</html>

自定义过滤器.模块方法兩種寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <!-- Hello -->
    <span>{{ name }}</span>
    <!-- Hello -->
    <span>{{ lalal | firstUpper: 2 }}</span>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$filter', function($scope, $filter) {
            $scope.name = $filter('firstUpper')('hello')
            $scope.lalal = 'hello'
        }])
        m1.filter('firstUpper', function() {
            return function(str, num) {
                console.log(num) // 2
                return str.charAt(0).toUpperCase() + str.substring(1)
            }
        })
    </script>
</body>
</html>

注意

{{}} : 表达式对于属性来说,如果原生的egclass=“{{}}” 使用变量就需要加{},如果是ng-这种比如 ng-value="*"直接变量名就行ng-class和ng-style,如果直接表达式{}这个就行,平时原生的基本就是{{}}, ng-指令形式的就基本是变量不用加{{}} ,如果不起作用在试试别种形式

<li ng-repeat="data in dataList" class="{{$odd? 'active1': 'active2'}}">{{data}}{{$odd}}</li>
<input type="button" ng-value="text" ng-disabled="IsDisabled">
<input type="text" ng-value="text" ng-readonly="IsDisabled">
<input type="checkbox" ng-checked="IsDisabled">
<span ng-class="{active: true}" ng-style="{color: 'yellow'}">{{ text }}</span>
 <span ng-style="ngStyle">{{ text }}</span>
 <a ng-href="{{ngHerf}}">qubaidu</a> // 这个就需要用{{}}