1测摔、什么是angularjs
- AngularJS是一個框架（諸多類庫的集合）以數(shù)據(jù)和邏輯做為驅(qū)動（核心）置济。
- AngularJS有著諸多特性，最為核心的是：MVC锋八、模塊化浙于、雙向數(shù)據(jù)綁定、指令系統(tǒng)挟纱、依賴注入等羞酗。
2、為什么使用angular
先看一個例子
<input type="text" ng-model = "name"> <p>{{name}}</p>
<script type="text/javascript"> var myapp = angular.module('myapp',[]); <script> src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" charset="utf-8"></script>
當頁面加載完畢后紊服，AngularJS自動開始執(zhí)行
HTML頁面中檀轨，ng-xxx的屬性稱之為指令(Driective)
ng-app 告訴AngularJS該標簽是ng的應(yīng)用程序管理的邊界
ng-model 指令把文本框的值value綁定到user.name上
{{user.name}} 表達式用來取出綁定在user.name上面的值胸竞，顯示在頁面
（2）angular語法
- 定義一個應(yīng)用
<html lang="en" ng-app = "myapp"> - 定義一個模塊
var myapp = angular.module('myapp',[]);
第一個參數(shù)是控制器的名稱,第二個參數(shù)是執(zhí)行時會執(zhí)行的函數(shù)
- 定義控制器
myapp.controller('myCtrl',["$scope",function($scope){ }])
為應(yīng)用中的模型設(shè)置初始狀態(tài),通過$scope(上下文模型)對象把數(shù)據(jù)模型或函數(shù)行為暴露給視圖
- 表達式
{{}}
它們可以包含文字、運算符和變量
如 {{ 1 + 2 }} 或 {{ ‘hello ’+ ‘,world’}}
指令
ng-xxx
ng-bind 來實現(xiàn)模型（Model）數(shù)據(jù)向視圖模板（View）的綁定
ng-init 初始化模型（Model）也就是$scope参萄。
ng-click卫枝、ng-dblclick 點擊事件/雙擊
ng-show/hide控制元素是否顯示，true顯示讹挎、false不顯示
ng-repeat 重復(fù) 可以將數(shù)組或?qū)ο髷?shù)據(jù)迭代到視圖模板中
ng-class控制類名
ng-switch校赤、on、ng-switch-when 可以對數(shù)據(jù)進行篩選淤袜。
自定義指令
app.directive('xxx',function(){})
restrict 定義指令的聲明方式 'E'元素 'A' 屬性
replace 如果指令作為標簽痒谴，替換標簽本身
transclude 如果標簽內(nèi)部有內(nèi)容，如何替換
template/ templateUrl 模板 / 模板的url
$templateCache 緩存模板
link 通過link可以給dom元素綁定事件
作用域
- 根作用域
整個應(yīng)用范圍（ng-app所在標簽以內(nèi)）都是可以被訪問到的铡羡。
- 子作用域
通過ng-controller指令可以創(chuàng)建一個子作用域积蔚，新建的作用域可以訪問其父作用域的數(shù)據(jù)。
`
<div class="d2" ng-controller = 'myCtrl2'>
<p>{{name}}</p>
<p>{{name1}}</p>
<p>{{age}}</p>
</div>
<script type="text/javascript">
var myapp = angular.module('myapp',[]);
myapp.controller('myCtrl',function($scope){
$scope.name = '張三';
})
myapp.controller('myCtrl2',function($scope){
$scope.name1 = 'ls';
$scope.age = 23;
})
</script>
`
過濾器
{{ | }}
| 來過濾
- 內(nèi)置過濾器
1烦周、currency將數(shù)值格式化為貨幣格式
2尽爆、date日期格式化，'yyyy-MM-dd hh:mm:ss'
3读慎、filter 篩選 并返回一個新數(shù)組漱贱，其條件可以是一個字符串、對象夭委、函數(shù)
4幅狮、json將Javascrip對象轉(zhuǎn)成JSON字符串。
5株灸、limitTo取出字符串或數(shù)組的前（正數(shù)）幾位或后（負數(shù)）幾位
6崇摄、lowercase/uppercase將文本轉(zhuǎn)換成小/大寫格式
7、number數(shù)字格式化慌烧，可控制小位位數(shù)
8逐抑、orderBy對數(shù)組進行排序，第2個參數(shù)可控制方向 - 自定義過濾器
通過模塊對象實例提供的filter方法自定義過濾器屹蚊。
`
<p>{{'你好'| bf}}</p>
<script type="text/javascript">
var myapp = angular.module('myapp',[]);
myapp.controller('myCtrl',function($scope){
myapp.filter('bf',function(){
return function(input){
return 'bf==>'+input;
}
})
`
服務(wù)
- 內(nèi)建服務(wù)
1厕氨、$location是對原生Javascript中l(wèi)ocation對象屬性和方法的封裝。
var myapp = angular.module('myapp',[]); myapp.controller('myCtrl',function($scope,$location){ $scope.absUrl = $location.absUrl(); $scope.protocol = $location.protocol(); $scope.port = $location.port(); $scope.path = $location.path(); $scope.hash = $location.hash(); $scope.search = $location.search(); })
2汹粤、$timeout&$interval對原生Javascript中的setTimeout和setInterval進行了封裝命斧。
myapp.controller('myCtrl',function($scope,$timeout,$interval){ var timer = $timeout(function(){ $scope.now = new Date(); },1000) var timer2 = $interval(function(){ $scope.current = new Date() },1000) }
3、$log打印調(diào)試信息
4嘱兼、$http用于向服務(wù)端發(fā)起異步請求冯丙。
var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 請求成功執(zhí)行代碼 }, function errorCallback(response) { // 請求失敗執(zhí)行代碼 });
5、$filter在控制器中格式化數(shù)據(jù)。
myapp.controller('myCtrl',function($scope,$filter){ var dateFilter = $filter('date'); $scope.date = dateFilter(now,'yyyy-MM-dd hh:mm:ss'); } - 自定義服務(wù)
service方法
myapp.controller('myCtrl',['$scope','$filter','showTime',function($scope,$filter,showTime){ $scope.now = showTime; }]) myapp.service('showTime',['$filter',function($filter){ var date = new Date(); this.date = $filter('date')(date,'yyyy-MM-dd'); }])
factory方法
myapp.controller('myCtrl',['$scope','$filter','showTime',function($scope,$filter,showTime){ $scope.now = showTime; }]) myapp.factory('showTime',function($filter){ var date = new Date(); var dateFilter = $filter('date'); date = dateFilter(date,'yyyy/MM/dd'); return date; })
配置塊
- 通過config方法實現(xiàn)對模塊的配置胃惜，AngularJS中的服務(wù)大部分都對應(yīng)一個“provider”泞莉，用來執(zhí)行與對應(yīng)服務(wù)相同的功能或?qū)ζ溥M行配置。
比如$http==>$httpProvider船殉、$location==>$locationPorvider
運行塊
- 可以直接運行相應(yīng)的服務(wù)模塊鲫趁，AngularJS提供了run方法來實現(xiàn)。
路由
- 引入路由
<script src="lib/angular-route.js" charset="utf-8"></script> - 實例化模塊時利虫，依賴注入ngRoute
var app = angular.module('app',['ngRoute']); - 配置路由模塊
app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/a',{ controller:'ACtrl', templateUrl:'a.html' }) .otherwise({ redirectTo:'/a' }); }]) - 布局模板
通過ng-view指令布局模板挨厚，路由匹配的視圖會被加載渲染到些區(qū)域。
<div ng-view></div>
- 路由參數(shù)
兩個方法匹配路由糠惫，分別是when和otherwise疫剃，when方法需要兩個參數(shù)，otherwise方法做為when方法的補充只需要一個參數(shù)硼讽。
第1個參數(shù)是一個字符串巢价，代表當前URL中的hash值。
第2個參數(shù)是一個對象固阁，配置當前路由的參數(shù)壤躲，如視圖、控制器等备燃。
a碉克、template 字符串形式的視圖模板
b、templateUrl 引入外部視圖模板
c并齐、controller 視圖模板所屬的控制器
d漏麦、redirectTo跳轉(zhuǎn)到其它路由
帶參數(shù)的路由
獲取參數(shù)，在控制中注入$routeParams可以獲取傳遞的參數(shù)
