1、什么是angularjs
- AngularJS是一個框架（諸多類庫的集合）以數據和邏輯做為驅動（核心）。
- AngularJS有著諸多特性，最為核心的是：MVC、模塊化、雙向數據綁定、指令系統、依賴注入等。
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自動開始執行
HTML頁面中，ng-xxx的屬性稱之為指令(Driective)
ng-app 告訴AngularJS該標簽是ng的應用程序管理的邊界
ng-model 指令把文本框的值value綁定到user.name上
{{user.name}} 表達式用來取出綁定在user.name上面的值，顯示在頁面
（2）angular語法
- 定義一個應用
<html lang="en" ng-app = "myapp"> - 定義一個模塊
var myapp = angular.module('myapp',[]);
第一個參數是控制器的名稱,第二個參數是執行時會執行的函數
- 定義控制器
myapp.controller('myCtrl',["$scope",function($scope){ }])
為應用中的模型設置初始狀態,通過$scope(上下文模型)對象把數據模型或函數行為暴露給視圖
- 表達式
{{}}
它們可以包含文字、運算符和變量
如 {{ 1 + 2 }} 或 {{ ‘hello ’+ ‘,world’}}
指令
ng-xxx
ng-bind 來實現模型（Model）數據向視圖模板（View）的綁定
ng-init 初始化模型（Model）也就是$scope。
ng-click、ng-dblclick 點擊事件/雙擊
ng-show/hide控制元素是否顯示，true顯示、false不顯示
ng-repeat 重復 可以將數組或對象數據迭代到視圖模板中
ng-class控制類名
ng-switch、on、ng-switch-when 可以對數據進行篩選。
自定義指令
app.directive('xxx',function(){})
restrict 定義指令的聲明方式 'E'元素 'A' 屬性
replace 如果指令作為標簽，替換標簽本身
transclude 如果標簽內部有內容，如何替換
template/ templateUrl 模板 / 模板的url
$templateCache 緩存模板
link 通過link可以給dom元素綁定事件
作用域
- 根作用域
整個應用范圍（ng-app所在標簽以內）都是可以被訪問到的。
- 子作用域
通過ng-controller指令可以創建一個子作用域，新建的作用域可以訪問其父作用域的數據。
`
<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>
`
過濾器
{{ | }}
| 來過濾
- 內置過濾器
1、currency將數值格式化為貨幣格式
2、date日期格式化，'yyyy-MM-dd hh:mm:ss'
3、filter 篩選 并返回一個新數組，其條件可以是一個字符串、對象、函數
4、json將Javascrip對象轉成JSON字符串。
5、limitTo取出字符串或數組的前（正數）幾位或后（負數）幾位
6、lowercase/uppercase將文本轉換成小/大寫格式
7、number數字格式化，可控制小位位數
8、orderBy對數組進行排序，第2個參數可控制方向 - 自定義過濾器
通過模塊對象實例提供的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;
}
})
`
服務
- 內建服務
1、$location是對原生Javascript中location對象屬性和方法的封裝。
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打印調試信息
4、$http用于向服務端發起異步請求。
var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http({ method: 'GET', url: '/someUrl' }).then(function successCallback(response) { // 請求成功執行代碼 }, function errorCallback(response) { // 請求失敗執行代碼 });
5、$filter在控制器中格式化數據。
myapp.controller('myCtrl',function($scope,$filter){ var dateFilter = $filter('date'); $scope.date = dateFilter(now,'yyyy-MM-dd hh:mm:ss'); } - 自定義服務
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方法實現對模塊的配置，AngularJS中的服務大部分都對應一個“provider”，用來執行與對應服務相同的功能或對其進行配置。
比如$http==>$httpProvider、$location==>$locationPorvider
運行塊
- 可以直接運行相應的服務模塊，AngularJS提供了run方法來實現。
路由
- 引入路由
<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指令布局模板，路由匹配的視圖會被加載渲染到些區域。
<div ng-view></div>
- 路由參數
兩個方法匹配路由，分別是when和otherwise，when方法需要兩個參數，otherwise方法做為when方法的補充只需要一個參數。
第1個參數是一個字符串，代表當前URL中的hash值。
第2個參數是一個對象，配置當前路由的參數，如視圖、控制器等。
a、template 字符串形式的視圖模板
b、templateUrl 引入外部視圖模板
c、controller 視圖模板所屬的控制器
d、redirectTo跳轉到其它路由
帶參數的路由
獲取參數，在控制中注入$routeParams可以獲取傳遞的參數
