- Level 1: 起步知识
Must know:
HTML & CSS
Javascript
Nice to know:
Automated Testing
BDD - Behavior Driven Development
TDD - Test Driven Development
Not so important:
jQuery
Ruby on Rails
Python, PHP, etc
Databases
优势：
- 帮助组织Javascript
- 帮助创建快速的响应式网页
- 与jQuery更好的兼容
- 更易于测试
B/S基本原理：
web server ----------------------------- web browser
<===URL Request to server====
==Response with Webpage & Assets=>
<===User clicks on link, new Request===
=====Response with JSON Data======>
什么是Directive？
Directive是内嵌于HTML标签的指令，用来告诉Angular何时运行和引用Javascript代码。引用AngularJS：
<body>
<script type="text/javascript" src="angular.min.js"></script>
</body>
什么是Modules？
- 用来写Angular应用
- 使得代码更易维护，更易测试和可读性
- 定义应用的依赖性
实例编写：
创建顶层模块(Module)：
app.jsvar app = angular.module('store', []);指明了:JS： angular应用的名称：store依赖：[]包含模块：<script type="text/javascript" src="app.js"></script><html ng-app="store"></html>表达式(更多的参考官方文档):{{4 + 6}}{{"hello" + " world!"}}创建控制器：通过定义函数和值来定义应用的行为//将js代码放入到闭包中，是一个好习惯。(function(){var app = angular.module('store',[]);app.controller('StoreController', function(){//存储数据this.product = gem;});var gem = {name: 'Dodecahedrom',price: 2.95,description: '....',}})();
在页面中声明控制器范围：
<body ng-controller="StoreController as store"><div><h1>{{store.product.name}}</h1><h2>${{store.product.price}}</h2></div></body>
例子操作总结：
- 内嵌指令：ng-controller
- 控制器名称: StoreController
- 控制器别名：store
- 控制器作用域：<body></body>
- 表达式: {{store.product.name}},{{store.product.price}}
添加按钮（应用ng-show,ng-hide）:
# 此数据放入到相应的控制器脚本文件中
var gem = {canPurchase: false,soldOut: true,}<div ng-show="!store.product.soldOut"><button ng-show="store.product.canPurchase">Add to cart</button></div>
数组资源:
# 相应控制器中的操作var gems = [{name: "Dodecahedron",price: 2.95,description: "...",canPurchase: true,},{name: "Pentagonal Gem",price: 2.95,description: "...",canPurchase: false,}...];
# 视图中的操作app.controller('StoreController', function(){//存储数据this.products = gems;});
<button ng-show="store.products[0].canPurchase">Add to cart</button>or<div ng-repeat="product in store.products"></div>
回顾一下：
Directives(内嵌指令)：HTML注解标签，用来出发JS行为
Modules(模块):应用组成存在的域
Controllers(控制器):存储应用行为
Expressions(表达式):用于显示页面值
- Level 2: 过滤器，内嵌指令和创造干净的代码
内嵌指令：
ng-app: 将应用模块添加到页面
ng-controller: 将控制器函数添加到页面
ng-show/ng-hide: 依据表达式来展示某个片段
ng-repeat: 对数组中每个元素重复使用某个片段
ng-src: 引入图片
<img ng-src="{{product.images[0].full}}"/>
ng-click: 点击事件
ng-show: 控制HTML元素的显示和隐藏行为
ng-init: 用来在当前域执行一个表达式
ng-class: 动态设定css类型
<li ng-class="{active: tab==1}"></li>
过滤器：
格式：{{data* | filter:options*}}
currency：默认进行本地化处理
{{product.price | currency}}
使用通道符('|'：将前者的结果送入到后者进行处理并输出最终结果。)，实现过滤。
date：
{{ date_expression | date : format}}
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}}
{{1288323623006 | date:'medium'}}: Oct 29, 2010 11:40:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 11:40:23 +0800
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 11:40AM
uppercase & lowercase:
{{'octagon gem' | uppercase}}
limitTo:
{{ limitTo_expression | limitTo : limit}}
{{'My Description' | limitTo:8}}
orderBy:
{{ orderBy_expression | orderBy : expression : reverse}}
<li ng-repeat="product in store.products | orderBy: '-price'"></li>
将冗余的内嵌指令包含进控制器函数中：
app.controller('PanelController', function(){
this.tab = 1;
this.setTab = function(setTab){
this.tab = setTab;
};
this.isSelected = function(checkTab){
return this.tab == checkTab;
};
});
- Level 3: 表单，模块和验证
内嵌指令：
ng-model:
通过NgModelController(在调用此内嵌指令的时候自动创建)对同域属性的绑定，如input、select、textarea或者自定义表单控制器
checkbox:
Value1: <input type="checkbox" ng-model="value1"></input>
<p>value1={{value1}}</p>
radiobox:
<form name="myForm" ng-controller="Ctrl">
<input type="radio" ng-model="color" value="red"> Red <br/>
<input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
<input type="radio" ng-model="color" value="blue"> Blue <br/>
<tt>color = {{color | json}}</tt><br/>
</form>
ng-submit:
绑定angular表达式到onsubmit事件上。
<script>
function Ctrl($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push(this.text);
$scope.text = '';
}
};
}
</script>
<form ng-submit="submit()" ng-controller="Ctrl">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
验证：
novalidate：关闭HTML默认的认证机制
required：开启AngularJS的验证机制
$valid：获取验证返回值
CSS类型：
Angular内置了一些类型
ng-valid：有效
ng-invalid：无效
ng-pristine：原始的
ng-dirty：脏数据（ 暂不晓得）
ng-touched： 暂不晓得
ng-untouched： 暂不晓得
- Level 4: 使用关联控制器来实现自定义内嵌指令
内嵌指令：
ng-include: 用于包含特定的文件，文件名需要用单引号括住
web server-----------------------------------web browser
<=======URL Request to server======
==Response with webpage & assets===>
<=======Fetches ng-include file====
========HTML Returned==============>
自定义内嵌指令：
用处：
表述一些复杂的UI设计
调用事件并注册事件处理函数
重用局部代码
自定义：
tag: <product-title></product-title>
Element directive:
app.directive('productTitle', function(){
return {
restrict: 'E', //Element
templateUrl: 'product-title.html'
};
});
tag: <h3 product-title></h3>
Attibute directive:
app.directive('productTitle', function(){
return {
restrict: 'A', //Attibute
templateUrl: 'product-title.html',
controller: function(){...},
controllerAs: 'panels'
};
});
- Level 5: 依赖和服务器
Module：
1. store(app.js)
(function(){
var app = angular.module('store',['store-products']);
app.controller('StoreController', function(){... });
})();
2. store-products(products.js)
(function(){
var app = angular.module('store-products',[]);
app.directive('productTitle', function(){...});
})();
3.included in the html
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="products.js"></script>
Best practice:
最好以功能来划分模块。
服务器操作：
获取JSON数据：$http
$http({method: 'GET', url: '/products.json'});
$http({method: 'PATCH', url: '/products.json'});
$http({method: 'TRACE', url: '/products.json'});
$http.get('/products.json', {apiKey: 'myApiKey'});
$http.post('/products.json', {param: 'value'});
$http.delete('/products.json');
success()
error()
app.controller('SomeController', ['$http', function($http){}]);
在JavaScript控制台输出log信息：$log
过滤数组数据：$filter
app.controller('SomeController', ['$http','$log', function($http,$log){
var store = this;
store.products = [];
$http.get('/products.json').success(function(data){
store.products = data;
});
}]);
231
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
