学习 AngularJS (二)
继续学习(了解)AngularJS.
看例子, 分明是一种模板语法:
<body ng-controller='PhoneListCtrl'>
<ul>
<li ng-repeat='phone in phones'>
{{phone.name}} <p> {{phone.snippet}}</p>
</li>
</ul>
</body>
{{...}} 里面是 angular expression, 就是简单表达式, 估计支持一些模式, 不支持一些模式.
ng-repeat 相当于 foreach 循环. 估计是 directive, 估计还可以定制(自己写一个新的).
function PhoneListCtrl($scope) {
$scope.phones = [
{name:'苹果', snippet:'土豪金' },
{name:'安卓', snippet:'...'},
...
];
}
看起来控制器的形式是一个函数, 此简单例子中提供 view 一个数据 phones, 即 M-V 之间的数据绑定.
<input ng-model="query">
<li ng-repeat="phone in phones | filter:query"> 这里用 $filter 函数来处理 ngRepeat 指令的输入.
测试语义例子:
... it('应该xxx', function() {
input('query').enter('苹果'); --- 在输入框 query 中输入 '苹果'
expect( repeater('.phones li').count == 1 ); --- 期望(断言)重复器 phones 项目数为 1.
});
以上主要是界面 MVC 模式例子, 测试.
菜鸟学习 AngularJS 教程网页:
http://www.runoob.com/angularjs/angularjs-tutorial.html
模块定义:
var app = angular.module('myApp', ...);
控制器:
app.controller('myCtrl', function($scope) { ... } );
AngularJS 指令: 扩展的 HTML 属性, 带有前缀 ng-. 如 ng-app, ng-init, ng-model 等.
重复 ng-repeat, 控制器 ng-controller, 控制器是 js 对象, 用 js构造函数创建.
过滤器: 使用管道字符 | 添加到表达式, 指令中, 可用于转换数据.
如 currency 过滤器格式化数字为货币格式. filter 选择子集; orderBy 排序等.
可多个过滤器组合.
(本质上可看做: 对象相当于 input, 经 filter 产生 output, 多个过滤器组合可看做是一种链式调用.
过滤器参数看做是调用的参数).
显示表格: 类似于重复 li, 在 tr 上添加 ng-repeat, 在 td 中添加 {{ }} 表达式.
ng-click 指令: <button ng-click='count = count+1'> 看起来像写了一个内嵌的 js 脚本, 或 lambda 表达式.
输入验证: 使用 ng-show 设置校验提醒 span 在校验出错情况下可见, 如 username.$dirty && $invalid.
指令 ng-include 包含 HTML 内容. 如 <div ng-include='my-list.html'></div>
AngularJS 在 DOM onload() 事件中自动开始, 查找 ng-app 指令, 加载模块, 编译.
如果 ng-app 指定的页面一小部分, 则会更快编译和执行.
剩下的参考教程的手册: http://www.runoob.com/angularjs/angularjs-reference.html
=== 下面应主要关心一下 angular 提供的有用的服务 =====
$http 用于读取 web 服务器上的数据. 如 $http.get(url);
跨域访问解决方案参考: PHP Ajax 跨域问题最佳解决方案。
(通过设置 Access-Contorl-Allow-Origin 来实现跨域)
AngularJS 的首选样式表是 Twitter Bootstrap, 其是当前最受欢迎的前端框架. (引用 bootstrap.min.css)
Service 都是单例的, 在一个应用中只会实例化一次(用 $injector 服务), 主要负责提供一个接口把特定函数
需要的方法放在一起.
我们可以轻松地创建自己的service, 仅仅注册 service 即可. 最常见的常见方法:
angular.module('myapp.service', [])
.factory('foobar_service', function() {
var service_instance = {
// ...
};
return service_instance;
});
创建一个 service 就是简单的返回一个函数, 这个函数返回一个对象, 在应用创建的时候(函数被调用)从而
创建出单实例的服务对象.
服务传递给 controller 的方式, 把 service 的名字作为参数传递:
app.controller('my_controller', ['$scope', 'my_service',
function() {$scope, my_service) {
...
}]
);
(看起来像写出此 controller 依赖的模块/服务, 然后 angular 找到这些模块/服务, 然后注入 controller)
这是依赖注入的写法... 另一个例子使用 $timeout 服务的例子:
http://developer.51cto.com/art/201311/415900_1.htm
app.controller('ServiceController', ['$scope', '$timeout', 'githubService',
function($scope, $timeout, githubService) {
// ...
}]
);
(angular 依赖注入有规范...)
(由于 service 是单实例, 应用生命周期的, 所以) Services 可以在多个 controller 之间共享数据.
(就这么简单? 主要是依赖注入支持?)
=== Routing 路由 ===
在单页面应用中, 视图之间的跳转就显尤为重要. 需要方法来精确控制 什么时候 该呈现 什么页面 给用户.
方法: 把视图打散成 layout 和模板视图, 然后将这些 "碎片" 在布局模板中拼接起来.
angularjs 通过 $routeProvider 上声明 routes 来实现上面的构想.
第一步: 布局模板
<header> <h1>Header</h1> --- 这样每页面都有 header </header> <div class="content"> <div ng-view></div> --- ng-view 告诉 $routeProvider 在这里渲染模板 </div> <footer> <h5>Footer</h5> </footer>
第二步: 配置路由信息
两种方法: when, otherwise. (看起来像 switch 语句...)
(前面略) 添加路由例子:
..config(['$routeProvider', function($rp) {
$rp.when('/', { // url 还可以写某种匹配/key, 假设当做正则看...
controller: 'home_page_controller',
template: '...We are homepage...'
})
.otherwise({
... 不在主页的处理方式
});
}]); --- 这么多配对的各种括号, 看着很辛苦, 要是都省略掉... ...
(看着像写了一个 when-each-case-and-otherwise 的语句...)
这里介绍数种过滤器, 可加深对 angular 过滤器功能/用途的印象:
http://developer.51cto.com/art/201310/414163_2.htm
创建自定义的过滤器:
把它配置到 module 下即可.
angular.module('custom.filters', [])
.filter('大写化', function() {
return ...具体大写字符串实现...
});
使用:
<div> UpperCase is: {{ 'hello world' | 大写化 }} </div>
--> 结果应该是 '上面函数处理的结果'
还有很多知识点未及谈到的:
* Promises(可以让多个异步请求更加的有条理)
* 自定义指令; *$resource 服务; *单元测试(尤为重要, 推荐jasmine)
* end-to-end testing; *midway testing; *i18n *auth & customize xhr req
* $provider -> custom service; * forms and validation; * ie compatiable;
原文链接: http://blog.jobbole.com/50533/
=======
现在似乎对 angluarjs 略知一二了, 先试着看看程序, 有需要再回头学.