本文深入探讨AngularJS的关键特性，如节点控制、依赖注入、事件绑定、数据与模板之间的交互，以及输入与选择控件的使用。通过实例展示了如何在AngularJS中实现数据绑定、模板生成、事件处理及组件交互，提供了全面的开发指南。
总结自：http://handyxuefeng.blog.163.com/blog/static/45452172201342944110818/
1.节点控制
1)ng-init<div ng-controller="TestCtrl" ng-init="a=[1,2,3,4];">
<ul ng-repeat="member in a">
<li>{{ member }}</li>
</ul>
</div><div ng-style="{width: 100, height: 100, backgroundColor: 'red'}">
</div><div ng-controller="TestCtrl" ng-class="cls">
</div><ul ng-init="l=[1,2,3,4]">
<li ng-class-odd="'odd'" ng-class-even="'even'" ng-repeat="m in l">{{ m }}</li>
</ul><div ng-show="true">1</div>
<div ng-show="false">2</div>
<div ng-hide="true">3</div>
<div ng-hide="false">4</div>待总结
<div ng-init="a=2">
<ul ng-switch on="a">
<li ng-switch-when="1">1</li>
<li ng-switch-when="2">2</li>
<li ng-switch-default>other</li>
</ul>
</div><img ng-src="{{ 'h' + 'ead.png' }}" /><a ng-href="{{ '#' + '123' }}">here</a>ng-src src属性
ng-href href属性
ng-checked 选中状态
ng-selected 被选择状态
ng-disabled 禁用状态
ng-multiple 多选状态
ng-readonly 只读状态<p>{{greeting}}</p> 等价于 <p ng-bind="greeting"></p>
2.依赖注入
一般定义：var BoxCtrl = function($scope, $element){}完整写法：var BoxCtrl = ['$scope', '$element', function(s, e){}];
scope域：$scope.computeNeeded = function() { };
3.事件绑定
ng-changeng-click
ng-dblclick
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-mouseover
ng-mouseup
ng-submit
4.数据->模板
数据绑定：
例1： <p>{{ w }} x {{ h }}</p>
例2：
<p id="test" ng-controller="TestCtrl">{{ a }}</p>
<script type="text/javascript">
var TestCtrl = function($scope){
$scope.a = '123';
}
angular.bootstrap(document.documentElement);5.Input控件属性
name 名字ng-model 绑定的数据
required 是否必填
ng-required 是否必填
ng-minlength 最小长度
ng-maxlength 最大长度
ng-pattern 匹配模式
ng-change 值变化时的回调
<input type="text" name="a" ng-model="a" required ng-pattern="/abc/" />
6.Select控件示例
6.1 最简单的使用方法， x for x in list
<form name="test_form" ng-controller="TestCtrl" ng-init="o=[0,1,2,3]; a=o[1];">
<select ng-model="a" ng-options="x for x in o" ng-change="show()">
<option value="">可以加这个空值</option>
</select>
</form>
<script type="text/javascript">
var TestCtrl = function($scope){
$scope.show = function(){
console.log($scope.a);
}
}
angular.bootstrap(document.documentElement);
</script>
6.2 在 $scope 中， select 绑定的变量，其值和普通的 value 无关，可以是一个对象：
<form name="test_form" ng-controller="TestCtrl" ng-init="o=[{name: 'AA'}, {name: 'BB'}]; a=o[1];">
<select ng-model="a" ng-options="x.name for x in o" ng-change="show()">
</select>
</form>
6.3 显示与值分别指定， x.v as x.name for x in o--不懂。。
<form name="test_form" ng-controller="TestCtrl" ng-init="o=[{name: 'AA', v: '00'}, {name: 'BB', v: '11'}]; a=o[1].v;">
<select ng-model="a" ng-options="x.v as x.name for x in o" ng-change="show()">
</select>
</form>
6.4 加入分组的， x.name group by x.g for x in o
<form name="test_form" ng-controller="TestCtrl" ng-init="o=[{name: 'AA', g: '00'}, {name: 'BB', g: '11'}, {name: 'CC', g: '00'}]; a=o[1];">
<select ng-model="a" ng-options="x.name group by x.g for x in o" ng-change="show()">
</select>
</form>
6.5 分组了还分别指定显示与值的， x.v as x.name group by x.g for x in o
<form name="test_form" ng-controller="TestCtrl" ng-init="o=[{name: 'AA', g: '00', v: '='}, {name: 'BB', g: '11', v: '+'}, {name: 'CC', g: '00', v: '!'}]; a=o[1].v;">
<select ng-model="a" ng-options="x.v as x.name group by x.g for x in o" ng-change="show()">
</select>
</form>
6.6 checkBox复选框，$scope的youCheckedIt属性值变成true,不选中就变成false
<form ng-controller="SomeController">
<input type="checkbox" ng-model="youCheckedIt">
</form>7 对象处理：
7.1 对象复制： angular.copy()var a = {'x': '123'};
var b = angular.copy(a);
a.x = '456';
console.log(b);var a = {'x': '123'};
var b = {'xx': '456'};
angular.extend(b, a);
console.log(b);var l = {a: '1', b: '2'};
angular.forEach(l, function(v, k){console.log(k + ': ' + v)});angular.noop()
angular.lowercase()
angular.uppercase()
angular.fromJson()
angular.toJson()5 日志
5.1 遗留
var TestCtrl = function($log){
$log.error('error');
$log.info('info');
$log.log('log');
$log.warn('warn');
}6 定时器
6.1 定时器5秒后调用输出logvar BoxCtrl = function($timeout){
var p = $timeout(function(){console.log('haha')}, 5000);
p.then(function(){console.log('x')});
}$timeout.cancel()7 不懂。。
提供Python的@Property能力？
var TestCtrl = function($scope, $parse){
$scope.get_name = $parse('name');
$scope.show = function(){console.log($scope.get_name($scope))}
$scope.set = function(){$scope.name = '123'}
}
Parse的覆盖
var BoxCtrl = function($scope, $parse){
var get_name = $parse('name');
var r = get_name({name: 'xx'}, {name: 'abc'});
console.log(r);
}
$parse 返回的函数，也提供了相应的 assign 功能，可以为表达式赋值
var BoxCtrl = function($scope, $parse){
var get_name = $parse('name');
var set_name = get_name.assign;
var r = get_name({name: 'xx'}, {name: 'abc'});
console.log(r);
var s = {}
set_name(s, '123');
var r = get_name(s);
console.log(r);
}
类型判断
待总结
angular.isArray
angular.isDate
angular.isDefined
angular.isElement
angular.isFunction
angular.isNumber
angular.isObject
angular.isString
angular.isUndefined
绑定函数
定义：
var f = angular.bind({a: 'xx'},
function(){
console.log(this.a);
}
);
调用：
f();
控制器中scope域中定义函数的写法
<script type="text/javascript">
function StartUpController($scope) {
$scope.funding = { startingEstimate: 1 };
$scope.computeNeeded = function() { $scope.funding1 = $scope.funding.startingEstimate * 10;
};
}
</script> 8 排序
8.1 一般排序示例
按age顺序：{{ data | orderBy: 'age' }} <br />
按age倒序：{{ data | orderBy: '-age' }} <br />
按age倒序取前两个排列：{{ data | orderBy: '-age' | limitTo: 2 }} <br />
按age倒序name顺序排列：{{ data | orderBy: ['-age', 'name'] }} <br />
8.2 表头排序：ng-click点击事件可以动态排序
<div ng-controller="TestCtrl">
<table>
<tr>
<th ng-click="f='name'; rev=!rev">名字</th>
<th ng-click="f='age'; rev=!rev">年龄</th>
</tr>
<tr ng-repeat="o in data | orderBy: f : rev">
<td>{{ o.name }}</td>
<td>{{ o.age }}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var TestCtrl = function($scope){
$scope.data = [
{name: 'B', age: 4},
{name: 'A', age: 1},
{name: 'D', age: 3},
{name: 'C', age: 3},
];
} 9 过滤器Filter
<div ng-controller="TestCtrl">
{{ data | filter: 'b' }} <br /> ---包含b的选中
{{ data | filter: '!B' }} <br />---不包含b的不选中
</div>
<script type="text/javascript">
var TestCtrl = function($scope){
$scope.data = [
{name: 'B', age: 4},
{name: 'A', age: 1},
{name: 'D', age: 3},
{name: 'C', age: 3},
];
}
angular.bootstrap(document.documentElement);
</script> 10 搜索
10.1 根据name进行动态查找
<div ng-controller="TestCtrl" ng-init="s=data[0].name; q=''">
<div>
<span>查找：</span> <input type="text" ng-model="q" />
</div>
<select ng-multiple="true" ng-model="s" ng-options="o.name as o.name + '(' + o.age + ')' for o in data | filter: {name: q} | orderBy: ['age', 'name'] "></select>
</div>
<script type="text/javascript">
var TestCtrl = function($scope){
$scope.data = [
{name: 'B', age: 4},
{name: 'A', age: 1},
{name: 'D', age: 3},
{name: 'C', age: 3},
];
}
angular.bootstrap(document.documentElement);
</script>11 时间戳格式化
<div ng-controller="TestCtrl">
{{ a | date: 'yyyy-MM-dd HH:mm:ss' }}
</div>
<script type="text/javascript">
var TestCtrl = function($scope){
$scope.a = ((new Date().valueOf()));
}
angular.bootstrap(document.documentElement);
</script> 12. 锚点路由--不懂待总结
12.1. 路由定义12.2. 参数定义
12.3. 业务处理
13. AJAX
13.1. HTTP请求
var TestCtrl = function($scope, $http){
var p = $http({
method: 'GET',
url: '/json'
});
p.success(function(response, status, headers, config){
$scope.name = response.name;
});
}
$http 接受的配置项有：
method 方法
url 路径
params GET请求的参数
data post请求的参数
headers 头
transformRequest 请求预处理函数
transformResponse 响应预处理函数
cache 缓存
timeout 超时毫秒，超时的请求会被取消
withCredentials 跨域安全策略的一个东西14. 缓存--不懂
var TestCtrl = function($scope, $cacheFactory){
$scope.cache = $cacheFactory('s_' + $scope.$id, {capacity: 3});
$scope.show = function(){
console.log($scope.cache.get('a'));
console.log($scope.cache.info());
}
$scope.set = function(){
$scope.cache.put((new Date()).valueOf(), 'ok');
}
}$q
$q.all() 合并多个 promise ，得到一个新的 promise
$q.defer() 返回一个 deferred 对象
$q.reject() 包装一个错误，以使回调链能正确处理下去
$q.when() 返回一个 promise 对象
var defer = $q.defer();
var promise = defer.promise;
promise.then(function(data){console.log('ok, ' + data)},
function(data){console.log('error, ' + data)});
//defer.reject('xx');
defer.resolve('xx');
15. 指令：
中包括{{}}是用来数据绑定的，ng -controller是用来指定哪个控制器来服务视图，
ng -model将一个输入框绑定到将一个输入框绑定到模型部分我们称这些叫我们称这些叫HTML扩展指
16. 其他
<html ng-app>
这个不能少，告知Angular管理这个页面，如果和其他方式并存，（可能需要放在应用的Div上<div ng-app>，我试了不行？）
<div ng-repeat='item in items'>
ng-repeat代表为items数组中每个元素拷贝一次这Div中的DOM。在每次拷贝中，同时设置item的属性代表当前的元素。
<span>{{item.title}}</span>
当前项title属性值插入到DOM中
<button ng-click="remove($index)"> Remove </button>
调用remove函数，同时传递了$index ,这个包含了ng-repeat的迭代顺序，就可以知道移除哪一项了
function CartController($scope) {
数据绑定到界面元素上，增加$scope中
$scope.remove = function(index) { $scope.items.splice(index, 1); };
无论何时用户点击移除按钮中的一个，都将调用remove()函数
绝大多数应用，创建一个message模型对象，它来存储someText
非：var someText = 'You have started your journey.';
而是：
<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('TextController',
function($scope) {
var someText = {};
someText.message = 'You have started your journey.';
$scope.someText = someText;
});
</script>
ng-app的应用名为myApp，创建了myAppModule的模块，并传递了控制器函数
表单例子：
<form ng-submit="requestFunding()" ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">
Recommendation: {{needed}}
<button>Fund my startup!</button>
</form>
<script>
function StartUpController($scope) {
$scope.computeNeeded = function() {
$scope.needed = $scope.startingEstimate * 10;
};
$scope.requestFunding = function() {
window.alert("Sorry, please get more customers first.");
};
}
</script>
$watch不懂。。
简单的说就是你可以调用$watch，传递一个观察的表达式和的表达式和一个回调函数，当表达式改变时，将调用回调函数。
示例：$scope.$watch('funding.startingEstimate', computeNeeded);
$scope.$watch('items', calculateTotals, true);
监控这些属性的字符串
1. $scope.$watch('things.a + things.b', callMe(...));
监视things对象上的所有属性
2. $scope.$watch('things', callMe(...), true);
<div class="navbar" ng-controller="NavController">
…
<li class="menu-item" ng-click="doSomething()">Something</li>
…
</div>
<div class="contentArea" ng-controller="ContentAreaController">
…
<div ng-click="doSomething()">...</div>
…
</div>
function NavController($scope) {
$scope.doSomething = doA;
}
function ContentAreaController($scope) {
$scope.doSomething = doB;
}
扫一扫
14
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
