angular学习笔记
02 Apr 2016Angular
$scope-作用域 $rootScope-根作用域(用来设置路由)
ng-app 作用域标记
指令标记了AngularJs脚本的作用域，在<html>中添加ng-app属性说明了整个html都是Angular脚本作用域。 开发者也可以局部使用ng-app指令， 比如 <div ng-app> , 则说明Angular只能在div中作用。
ng-repeat 遍历属性
Angular中遍历属性 用在一个数组上
ng-controller 控制器属性
定义了控制器
ng-init 初始化数据
<div ng-app ng-init="quantity=1; cost=5">
<p>总价: </p>
</div>
ng-click 定义元素响应行为
eg:
<div ng-controller="controller">
<p>, AngularJs.</p>
<button ng-click="test1()">test1</button>
</div>
<script>
function controller($scope) {
$scope.greeting = {
text: "hello world"
};
$scope.test1 = function() {
console.log("test one");
};
}
</script>
路由 模块 依赖注入
指令 (需要加强ng中指令的理解)
指令基本用法 tranclude属性 其中restrict属性包括四个属性： A(attribute属性) E(element元素) M(comment 注释) C(class 类) 其中link方法中的attr属性可以提取到自定义元素的属性
HTML:
<div ng-app="MyModule" ng-controller="MyCtrl">
<loader howToLoad="loadData()">loading...</loader>
</div>
Js:
var myModule = angular.module('MyModule', []);
myModule.controller('MyCtrl', ['$scope', function($scope) {
$scope.loadData = function() {
console.log('hello world');
};
}]);
myController.directive("loader", function() {
return {
restrict: "AE",
template: , // 可以用来替换指令中的模板
/**
* @scope 作用域
* @element 当前指令替换的元素
* @attr 表示元素里面的属性
*/
link: function(scope, element, attr) {
element.bind("mouseenter", function() {
// 注意事项 attr调用方法 里面的属性应该要小写
// 可以在不同的控制器中调用同一个方法
scope.$apply(attr.howtoload);
});
}
};
};
独立指令
directive里面可以提交一个scope: {}， 独立指令 就和别的指令不相联系
HTML:
<hello></hello>
<hello></hello>
<hello></hello>
<hello></hello>
JS:
myModule.directive("hello", function() {
return {
restrict: 'AE',
scope: {}, /* 独立指令 */
template: '<div><input type="text" ng-model="userName" /> </div>',
replace: true
};
});
ng-model 双向数据绑定
指令把输入域的值绑定到应用程序变量中去 – 双向绑定
<div>
<input type="text" ng-model="name">
<p> , world. </p>
</div>
获取当前的URL地址
需要一个函数 $location.absUrl() 来获取地址
myCtrl.controller("myCtrl", function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
$timeout(计时函数) $http(向服务器请求信息)
$timeout用法
myCtrl.controller("myCtrl", function($scope, $timeout) {
$timeout(function() {
.....
}, 2000);
});
$http用法
myCtrl.controller("myCtrl", function($scope, $http) {
$http.get("welcome.html").then(function(response) {
$scope.myWelcome = response.data;
});
});
过滤器
基本包括 currency 格式化数字为货币格式 filter 从数组选项中选择一个子集
lowercase 格式化字符串为小写 orderBy 根据某个表达式排列数组 uppercase 格式化字符串为大写 number 显示小数后面的几位 limitTo 可以显示限制出现的数字或者字符串 位数 don’t bb, show your code
<p>搜索: <input type="text" ng-model="test"></p>
<ul>
<li ng-reapeat="book in books | filter: test | orderBy: 'author'">
</li>
</ul>
<script>
bookStoreCtrls.controller('BookListCtrl', function($scope) {
$scope.books = [
{title: '111', author: '222'},
{title: '333', author: '444'}
];
});
</scipt>
number 显示小数后面的几位
Limit to: <input type="number" step="1" ng-model="">
output numbers:
注入依赖 XHR
依赖注入服务可以使用web应用构建
function functionName($scope, $http) {
$http.get('name.json').success(function(data) {
$scope.phones = data;
});
ng-show 动态展示显示与隐藏
// 只有当show为true时,才会显示出包含的标签
<ul ng-show="show">
<li ng-click="a()">11</li>
<li ng-click="b()">22</li>
<li ng-click="c()">33</li>
</ul>
ng-class 可以动态绑定css样式
原理就是同判断表达式中true,false来实现动态绑定css
// 初始化error warning 为false 来不隐藏该元素 只有变为true才会显示出来
<div ng-class='{error: isError, warning: isWarning}'>
</div>
function($scope) {
$scope.isError = false;
$scope.isWarning = false;
$scope.showError = function() {
$scope.messageText = "你不知道的事";
$scope.isError = true;
$scope.isWarning = false;
};
$scope.showWarning = function() {
$scope.messageText = '3.8 妇女节快乐';
$scope.isError = false;
$scope.isWarning = true;
};
}
ui-router
由于angular本身仅支持在路由转换，而ui-router 根据URL状态或者说是’机器状态’来组织和控制界面UI的渲染
### 基本写法就是:
1. index.html中声明一个ui-view 例如<div ui-view> 然后在设置另外一个页面来配置导航栏信息，来说明各个页面的路由转向。
2. 然后可以创建一个nav.html，里面需要创建一个ul导航栏，例如<a ui-sref='html页面相对位置，可以不接.html后缀名'> 然后在该页面里面再嵌套一个<div ui-view> ui-sref可以动态指向页面
….(未完待续) ….(坐等踩坑angular2)