angular js使用記錄

標籤：

jquery本身並不是架構，而僅僅是一個操作dom的工具，它的核心是操作dom;

目前較火的前端架構：backbone、angularjs、react、avalon、vue;

angularjs是由google開發的架構並進行維護，特別針對SPA（單頁面）應用開發的架構，但不支援按需載入;　　MV*;

mvvm架構　　達到視圖與邏輯（模組）同時綁定，同時更新；

1.ng-app——指令，使文檔具有angularjs的能力（視圖與邏輯混合）;

 

angular的核心就是視圖與邏輯的同時綁定、同時更新;

angularjs可以極大地減少dom的操作，但是不影響它與jquery進行混合應用。但是理想的開發，是不希望在angular.js中摻雜jquery代碼，因為要保持架構統一性;

angular.js最基礎和也是最重要的部分

Directives --》》指令　　ng-*

　　自訂指令　　show = ‘‘;　

Data Binding --》》資料繫結（達到視圖與資料同時綁定，極大減少dom操作;）　　{{*}}：例如{{name}}在某一控制器模組的範圍下尋找；

　　核心資料繫結$scope.itemList = itemList;

Filter 通過一個管道進行過濾操作;　　name |　uppercase　　---->>>----|---->>>資料管道

　　<ul ng-repeat="item in carList | num_nice: {num: 5}"></ul>//篩選出數量為5的商品;或者表達為  | filter:{num:5};

　　app.filter(‘num_nice‘, function(arr, param) {

　　　　　　//arr待過濾的數組，parma表示傳入的對象;

　　});

controller --》》控制層

每個控制層都有自己的範圍，讓他們資料繫結相互獨立於自己的範圍;

 

angular三大重要功能：

1.視圖即時反應資料的變化，極大減少了dom操作；

2.directive實現組件;(templateUrl屬性可以實現非同步請求)

3.路由;

 ————angular的路由配置

 1 var app = angular.module("myTodo", [‘ngRoute‘]); 2 //路由的配置： 3 app.config(function($routeProvider) { 4     //我們在實現I want you項目，自己實現了一個路由， 5     //在這裡angular.js幫我們實現了一個路由 6      7     var routeconfig = { 8         templateUrl: "body.html",　　//視圖區V 9         controller: "myTodoCtrl"　　　//控制區C10         /*controller: ‘myTodoCtrl‘*/11     }12 13     var ohter_config = {14         templateUrl: "other.html"15     }16     //如果路由沒有匹配到hash，讓它跳到body.html17     //如果路由器配到的hash是index.html#/all 或者18     //index.html#/comp  index.html#/status19     //假設路由器的匹配路徑是 index.html#/!/allssssssssss20     //會匹配失敗，會通過otherwise,讓它自動重新導向到 index.html#/all21     $routeProvider.22       when("",routeconfig).23       //status ： 它對應我們頁面的hash: all completed active24       //路由規則的優先順序按寫法的順序所決定的25       when("/other", ohter_config).26       when("/:status_id", routeconfig ).27       otherwise( { redirectTo: "/all" });28 });

————擷取本機存放區

1 function store(namespace, data) {2     if(arguments.length > 1) {3         localStorage.setItem(namespace, JSON.stringify(data));4     }else {5         var obj = localStorage.getItem(namespace);6         return (obj && JSON.parse(obj)) || null7     }8 }

————核心資料結構範例

 1 //核心資料結構 ---》 2 var Coreobj = { 3     //已完成 4     completed: false, 5     title: ‘我是沒完成標題‘ 6 } 7 var sobj = { 8     completed: true, 9     title: ‘我是以完成標題‘10 }11 var itemList = [];

————控制層C

 1 app.controller("myTodoCtrl", function($scope, $routeParams, $filter){ 2  3         //$filter --->ng中的過濾器模組，裡面有一些定義好的簡單方法，可以直接使用 4         //$scope ---> 控制器中的核心範圍，實現資料與視圖綁定功能 —— $scope.variable(變數名)在視圖層設定，在控制層進行綁定和邏輯運算;視圖層會即時更新變數的變化。 5         //$routeParams --> 路由器參數 6         //全域的一個控制層，控制它裡面的所有內容,可以進行資料繫結和邏輯操作（各類功能的實現、對資料的操作）; 7         //因為我的myTodo模組綁定在根項目的html上, 8         //所以該控制層監聽頁面裡的所有內容的範圍 9         $scope.itemList = store(‘mytodo‘) || itemList;//進行核心資料的綁定，從localStorage中擷取myTodo的資料，若不存在則為預設值itemList;10         $scope.routName = "all";11         $scope.newTodo = ‘‘;12                 ...13         $scope.$on(‘$routeChangeSuccess‘, function () {14             //使用這個即時監聽功能，是有條件，15             //必須要配置路由器對象，才可以監聽路由器的變化。16             console.log(‘hash值改變了‘);17             console.log($routeParams.status_id);18             if($routeParams.status_id === "all") {19                 $scope.filterStatus = {};20                 $scope.routName = "all";21             }else if($routeParams.status_id === "active") {22                 $scope.filterStatus = {completed:false};23                 $scope.routName = "active";24             }else {25                 $scope.routName = "completed";26                 $scope.filterStatus = {completed:true};27             }28             //該功能可以即時監聽該模組範圍下hash值的改變29         });30 });        

————指令ng-repeat的使用

item in itemList|filter:filterStatus track by $index
//item in itemlist 等同於 item in itemList track by $id(item),而id是不允許重複的.
因此需要自訂track by,最簡單的方式就是 tack by $index;按照數組的索引值進行執行;

————指令ng-class的使用

<li ng-class="{completed: item.completed, editing: item.edit_status}" ></li>
//ng-class中存放的是一個對象,className就是對象的屬性.class值為true時，該class就發揮作用，否則就是無效的className;

————ng-model的使用

<input class="toggle" type="checkbox" ng-model="item.completed">
//ng-model可以代替input標籤的value值的作用，在angular中可以用來即時反應input值的變化,方便資料的傳輸，而value一般需要擷取對應的dom節點;

————各類別檢視事件相關的指令

<label ng-dblclick="editTodo(item)">{{item.title}}</label>
//ng-dbclick雙擊事件,雙引號內為處理雙擊事件的自訂函數;
<button class="destroy" ng-click="remove(item)"></button>
//ng-click單擊事件<form ng-submit="saveEdit(item)">
//ng-submit表單提交事件　　<input todo-focus="item.edit_status" class="edit" ng-blur="saveEdit(item)" ng-model="item.title">
　　//ng-blur失去焦時間點事件</form>

————組件directive的使用

app.directive(‘todoFocus‘, function(){    var linkFunction_nice = function(scope, element, attr) {          //console.log(attr, element);          scope.$watch(attr.todoFocus, function(newval){              setTimeout(function(){                  element[0].focus();                           //順延強制，否則無法聚焦              }, 100);          });    };    return {      restrict: "A", //暴露的一個元素，若是‘A’則是屬性，若是‘E‘則是元素      link: linkFunction_nice　　//link:對特定的元素註冊事件;需要用到scope參數來實現dom元素的一些行為;

    };})
//與compile相比較
//參考連結：
//　　http://hellobug.github.io/blog/angularjs-directive-2-compile-vs-link/

 

angular js使用記錄