Angularjs
# 概念
- module 相当于容器
- directive 指令负责对html元素进行绑定,同时进行相互作用
- service 公有代码逻辑
- controller 私有代码逻辑
- filter 过滤器
# 指令directive (opens new window)
- ng-app 标记angularjs的作用域
- ng-model 绑定输入框的值到 scope 变量中:
- ng-show 表达式为 true 时显示
- ng-hide 表达式为 true 时隐藏
- ng-disabled='switch' switch===false时候元素不可用,可以和type="checkbox" ng-model='switch'一起使用
- ng-bind 使用给定的变量或表达式的值来替换 HTML 元素的内容。
与
{{}}
类似,解决了网速慢显示了的问题,一般用于首页代替
{{}}
- ng-bind-html 绑定 HTML 元素的 innerHTML 到应用程序数据,并移除 HTML 字符串中危险字符
- ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。
- ng-switch-when
- ng-clack 等数据加载完成再显示数据模板,避免数据加载未完成出现现象
# controller
- $script 一个对象
- 特性
- 作用域,父子作用域对象按引用传递,变量(属性)按值传递。
- $scope.data={}; $scope.data.x=hello //引用传递
- $scope.data=123; //按值传递
- $scopr.x其中找不到会向上父级controller找
- 作用域,父子作用域对象按引用传递,变量(属性)按值传递。
# 自定义指令
- restrict 限制使用,默认值是:AE
- E 作为元素名使用
- A 作为属性使用
- C 作为类名使用
- M 作为注释使用
- 坑:指令名字含有大写,使用的标签就必须加-符号,如指令名字“headerDemo” 标签名字就要header-demo
- 指令scope:{}绑定策略
- @ 把当前属性作为字符串传递。你还可以绑定来自外层scope的值。在属性值中插入{{}}即可
- scope:{属性名字:"@"} === $scope.属性名字 ===
- 与link()中的scope.test=iAttrs.test一样效果
- = 与父scope中的属性进行双向绑定
- & 传递一个来自父scope的函数,稍后调用
- @ 把当前属性作为字符串传递。你还可以绑定来自外层scope的值。在属性值中插入{{}}即可
- link(scope,element,attrs,ctrl) 四个参数分别是
scope 与指令中的controller中的$scope相连
- scope.test()可以执行controller中的test()函数,也可以这样写scope.apply('test()')
element 标签对象可以调用jq常用语法如bind(),addClass(),removeClass()对元素操作
attrs 包含了指令所在元素的属性的标准化的参数对象 如指令abc中有属性TEST
<abc TEST></abc>
就是attrs.test<abc TEST='btn()'></abc>
可以通过使用$apply()来执行属性中的函数$apply(attrs.test.btn)
ctrl:指令中可以使用controller来做数据交互 如:
link: function($scope, iElm, iAttrs, controller) {
controller('myCtrl', ['$scope', function($scope){
}])
}
1
2
3
4
5
2
3
4
5
# compile-link (opens new window)
指令的不同controller中的不同函数之间的复用
<!-- html -->
<div ng-controller="myCtrl">
<abc-test howtoLoad='btn()'>btn</abc-test>
</div>
<div ng-controller="myCtrl2">
<abc-test howtoLoad='btn2()'>btn</abc-test>
</div>
<!-- js -->
angular.module('app',[])
.controller('myCtrl', ['$scope', function($scope){
$scope.btn=function(){
console.log("第一个指令 btn()")
}
}])
.controller('myCtrl2', ['$scope', function($scope){
$scope.btn2=function(){
console.log("第二个指令 btn2()")
}
}])
.directive('abcTest', [function(){
return {
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
template: '<button> <div ng-transclude></div> </button>',
replace: true,
transclude: true,
link: function(scope, iElm, iAttrs, controller) {
iElm.on('click',function(){
// $scope.btn()
// $scope.$apply('btn()')
scope.$apply(iAttrs.howtoload) //注意坑:这里指令属性是用驼峰法则写的HeadBar在这里都要写成小学
})
}
};
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
注意 :使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
1
2
3
4
5
6
7
2
3
4
5
6
7
# 第三方指令库 angular-ui (opens new window)
# 服务Service
- $location
- $http 向服务器发送请求
- $timeout 对应了 JS window.setTimeout 函数。
- 取消定时器 $timeout.cancel(t)
- $interval 服务对应了 JS window.setInterval 函数。
- 取消定时器 $interval.cancel(t)
# 自定义服务
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
});
1
2
3
4
5
2
3
4
5
# 过滤器 filter |
- currency 格式化字符串为大写。
- lowercase 格式化字符串为小写。
- currency 过滤器将数字格式化为货币格式:
- orderBy 排序
- orderBy:'id':true 根id降序排
- orderBy:'id' 根据id升序排
- filter 过滤输入,也可以自定义过滤
- date 格式化成时间,可以自定义一下格式
- date:"yyyy-MM-dd HH:mm:ss"
- number:2 保留两位小数
- limitTo :6 从前面开始截取6位
# 自定义过滤器 filter |
app.filter("myFilter",function(){
return function(input){
return input+"#"
}
})
1
2
3
4
5
2
3
4
5
# 依赖注入(只执行一起,实现多数据共享)
# factory——简单
app.factory(xx, function (){
return {a:"xxx"};
});
1
2
3
2
3
# provider——强大:可配置的
app.provider(xx, function (){
this.$get=function (){
return {a:"xxx"};
};
});
1
2
3
4
5
2
3
4
5
# service——类似于构造函数
app.service(xx, function (){
this....
});
1
2
3
2
3
# 修改依赖 *会修改原始的依赖,原来的依赖就变了 (用不了可能废弃了)
app.decorator('依赖的名字', function ($delegate){
$delegate 依赖项的东西
return 修改后的依赖;
});
1
2
3
4
2
3
4
# 变量||常量
constant——常量(不可装饰,不能改)
value——变量(可以改)
###消息机制(事件):
- $scope.$emit('名字', 数据); 触发:自己+父级,向上发送
- $scope.$broadcast('名字', 数据); 触发:自己+子级,向下放松
- $scope.$on('名字', 数据); 接收
# $HTTP 通用方法实例
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
$http({
method: 'GET',
url: 'https://www.runoob.com/try/angularjs/data/sites.php'
}).then(function successCallback(response) {
$scope.names = response.data.sites;
}, function errorCallback(response) {
// 请求失败执行代码
});
});
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 其他函数
- $scope.$apply() 强制刷新(一般不用)
- 当AngularJS外部的控制器(DOM事件、外部的回调函数如jQuery UI空间等)调用了AngularJS函数之后,必须调用$apply。在这种情况下,你需要命令AngularJS刷新自已(模型、视图等),$apply就是用来做这件事情的。
- $scope.$watch() 监控
- $scope.$watch(谁,做什么,是否监控他的内容和属性变化)
# 路由 ui-router (opens new window)
# 路由 ui-router2 官方中文文档 (opens new window)
# 懒加载 $ocLazyLoad (opens new window)
# 懒加载 $ocLazyLoad 官方文档 (opens new window)
//定义模板,并注入ui-router
var app = angular.module('myApp', ['ui.router']);
//对服务进行参数初始化,这里配stateProvider服务的视图控制
app.config(["$stateProvider","$urlRouterProvider", function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state("home", {
url: '/', //注意url这里一定要以/开头不然不显示
template:'<div>模板内容......</div>'
})
$urlRouterProvider.otherwise('main'); //默认路径为main
}]);
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
ui-sref和ui-view指令都是ui-router自带的,有三种方法来激活状态:
1.调用$state.go()方法,这是一个高级的便利方法。
2.点击包含ui-sref指令的链接。
3.导航到与状态相关联的 url。
# 模板
template: '<h1>My Contacts</h1>'
templateUrl: 'contacts.html'
templateUrl: function (stateParams){
return '/partials/contacts.' + stateParams.filterBy + '.html';
} //templateUrl的值可以通过函数放回
1
2
3
4
5
2
3
4
5
# ui-grid (opens new window)
# 注意
- 带ng开头的指令
“”
里面都可以写表达式,如ng-show="0>1"
- 不带ng开头的指令也可以用
{{}}
里面写表达式,如class=""
编辑 (opens new window)