Controller构造
controller(name, constructor)
| Param | Type | Details |
|---|---|---|
| name | string/Object | Object Controller name, or an object map of controllers where the keys are the names and the values are the constructors. |
| constructor | Function | Controller constructor function. |
constructor是controller的构建函数，我们需要依赖一些其它库来构建一个controller。这个时候angular就用到了一项技术，叫做依赖注入，dependency inject。
比如说我新建一个controller，需要从服务器上获取点数据，也就是ajax，angular.有个对应的库叫做$http。代码就这样写:
controller("myctrl",function($scope,$http){
....
})
这时候你就可以在构建函数内访问并$http了。如果根据业务扩展的需要，我还要获得并修改浏览器的url，这时候就需要$location:
controller("myctrl",function($scope,$location,$http){
....
})
把$location和$http的位置颠倒也没问题。也就是说如果你需要什么库，直接在构造函数的参数里把需要的东西写出来就行了，angular会自动获取那个库并传递给构造函数。有没有觉得很神奇？！
angular是怎么知道构造函数的参数是什么的？
(function($scope,$http,$location){}).toString()
运行这段代码你就懂了。toString可以将函数的源代码输出成字符串，通过解析这段字符串来得知他的参数以及名称。
但是这样会遇到一个问题，当我使用压缩工具来压缩源码之后，函数的参数名都会变，怎么办？
function($scope,$location,$http){}
压缩后成了
function(a,b,c){}
这时候就需要将构建函数替换为一个数组，数组最后一个元素为构建函数，其它为参数。
controller("myctrl",[ "$scope", "$location", "$http", function(a,b,c){
}])
现在知道
controller("myctrl",[ "$scope", function($scope){ ... }])的作用了吧.其实function里面的$scope这个变量名是可以任意的.
常用指令
加载指令-->编译指令compile-->链接指令link
ng-repeat
循环
<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循环对象：</p>
<ul>
<li ng-repeat="x in names">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
ng-transclude
会保留指令内部内容, 可以让指令之间嵌套使用.
myApp.directive("hello", function(){
return {
restrict: "AE",
transclude: true,
template: "<div>Hello,自定义标签!<div ng-transclude></div></div> "
}
});
----------
<hello><div>这是标签内部内容</div></hello>
-------------
显示如下:
Hello,自定义标签!
这是标签内部内容
创建自定义的指令
内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令runoobDirective, 但在使用它时需要以 - 分割, runoob-directive.
模板有:
template, templataUrl, tamplateCache
restrict 值可以是以下几种:
- E 作为元素名使用,默认, attribute
- A 作为属性使用, element
- C 作为类名使用, class
- M 作为注释使用,此时要添加
replace:true, comment
例如:
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
</head>
<body>
<runoob-directive></runoob-directive>
<div runoob-directive></div>
<div class="runoob-directive"></div>
<!-- directive: runoob-directive -->
</body>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict: "EACM",
replace : true,
//scope: {}, //会使指令有个单独作用于,不会相互影响
template : "<h1>自定义指令!</h1>"
// templateUrl: "hello.html";
//template: templateCache.get('hello.html')
};
});
</script>
</html>
scope的绑定策略
| 指令 | 作用 |
|---|---|
| @ | 把当前属性作为字符串传递,还可以绑定来自外层的scope的值,在属性值插入{{}}即可 |
| = | 与父scope中 的属性进行双向绑定 |
| & | 传递一个来自父scope的函数,稍后调用. |
AngularJS 过滤器
| 过滤器 | 描述 |
|---|---|
| currency | 格式化数字为货币格式。 |
| filter | 从数组项中选择一个子集。 |
| lowercase | 格式化字符串为小写。 |
| orderBy | 根据某个表达式排列数组。 |
| uppercase | 格式化字符串为大写。 |
事件传播
$emit('MyEvent'),向上传播
$broadcast('MyEvent'), 向下传播
bower.json 依赖 ~, ^,>等符号含义
-
~versionIn the simplest terms, the tilde matches the most recent minor version (the middle number). ~1.2.3 will match all 1.2.x versions but will miss 1.3.0. "Approximately equivalent to version" See npm semver - Tilde Ranges & semver (7) -
^versionThe caret, on the other hand, is more relaxed. It will update you to the most recent major version (the first number). ^1.2.3 will match any 1.x.x release including 1.3.0, but will hold off on 2.0.0. "Compatible with version" See npm semver - Caret Ranges & semver (7) -
versionMust match version exactly -
>versionMust be greater than version -
>=versionetc <version-
<=version1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0 -
http://sometarballurl(this may be the URL of a tarball which will be downloaded and installed locally -
*Matches any version
http://stackoverflow.com/questions/22343224/difference-between-tilde-and-caret-in-package-json
自定义过滤器 filter
ng-bind
使用ng-bind代替{{ }}取值,可避免因为加载过慢导致出现{{}}的情况.两种方法分情况使用,各有自己的单独作用范围.
<p> hello, {{ name }}</p>
<p>hello, <span ng-bind="name"></span><p>
AngularJs常用插件
angular-translate
用于国际化, 地址https://angular-translate.github.io/
angular-ui-router / ui-router
angular路由管理,地址https://ui-router.github.io/
ocLazyLoadProvider
延时加载, 地址https://oclazyload.readme.io/
angular-smart-table
支持表格排序,过滤,搜索,分页,总是很强大.
http://lorenzofox3.github.io/smart-table-website/
ngStorage
支持本地存储和session存储.地址https://github.com/gsklee/ngStorage
angular-breadcrumb
基于ui-router的导航插件.
地址[https://github.com/ncuillery/angular-breadcrumb)[https://github.com/ncuillery/angular-breadcrumb]
angular-toastr
弹出层通知.
https://github.com/Foxandxss/angular-toastr
坑
- 标签的属性, 如果使用驼峰法定义的话, 调用时要用全部写.
