初級使用视频添加链接描述
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> // 这个就需要用{{}}