angurlarjs學習筆記

一些須要記憶的知識點：

一、自定義指令：

app.directive("nameDirective" , function(){

　　template: ""

});

二、app ＝ angular.module("MyApp", [])

模塊定義中，［］表示模塊的依賴關係，  應該填寫依賴模塊的名字， 爲null表示沒有依賴關係。

三、注意， 通常將angularjs庫放到head元素中加載， 而AnJS腳本放到body元素底部加載，緣由： 這樣會提升網頁加載速度，由於html加載不受制於腳本加載。

四、angular.copy() : 複製一個數據到另外一個數據 。。 

五、在控制器裏定義方法， 在控制器裏調用方法， 此方法也能夠在html中調用。

AnJS  用來代替AJAX 表單提交， 而不是asp.net form表單提交。

六、Form 表單提交 anjs 使用思考：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

< div ng-app="myApp" ng-controller="formCtrl">    < form >      First Name:< br >      < input type="text" ng-model="user.firstName">< br >      Last Name:< br >      < input type="text" ng-model="user.lastName">      < br >< br >      < button ng-click="reset()">RESET</ button >  < button ng-click="submit()">submit</ button >    </ form >    < p >form = {{user }}</ p >    < p >master = {{master}}</ p > </ div >   < script > var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) {      $scope.master = {firstName:"John", lastName:"Doe"};      $scope.reset = function() {          $scope.user = angular.copy($scope.master);      };      $scope.reset();      $scope.submit = function(){          /// 把 $scope.user 提交到後臺， $http, $.ajax ,  並獲取返回數據< br >　　　　　　　　　　/// http  請求 就是 AJAX 請求      }; }); </ script >

七、 anJS表單 客戶端 驗證：    

input 元素的： required 

$dirty : 表單有填寫記錄,爲true ， 更改表單就會爲true.  只要在表單中改變數據，都爲null。

$pristine :  表單沒有填寫記錄， 就是沒有更改表單中數據 時， 爲true ， 通常是剛加載出來 改變數據時，

$valid

$invalid :  爲null時，無效 ， $invalid 爲true

.$error.required

 

能夠模仿使用：

<p>郵箱:<br>
  <input type="email" name="email" ng-model="email" required>
  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  <span ng-show="myForm.email.$error.required">郵箱是必須的。</span>
  <span ng-show="myForm.email.$error.email">非法的郵箱。</span>
  </span>
</p>

八、AngularJS API:

全局API:

angular.lowercase() :  

angular.uppercase()

angular.isString():

angular.isNumber() : 判斷是否時數字

九、常識： (SSI： Server Side Includes， 服務器端包含） 

AngularJS 包含： ng-include="'html文件路徑'"

十、angularJS 也能夠寫動畫， 利用css ，暫時很少作了解，用的少。

十一、依賴注入（Dependency Injection，簡稱DI）是一種軟件設計模式，在這種模式下，一個或更多的依賴（或服務）被注入（或者經過引用傳遞）到一個獨立的對象（或客戶端）中，而後成爲了該客戶端狀態的一部分。

AnJS 依賴注入核心組件：  [理解不夠透徹]

一、value  : JS 對象 ， 用於向控制器傳遞值（注入到控制器中）

app.value("","")

二、factory : 是一個函數用於返回值，經常使用來計算或返回值， 在service 和 controller 須要時建立。

app.factory("Name",function(){});

三、provider 建立一個service , factory 等

app.config(function($provider){

　　$provider.provider("NameService",function(){  /// provider 建立服務 

　　　　　this.$get = function(){      /// get方法， 建立一個factory,

　　　　};　　

　　});

});

四、constant , 用來配置階段傳遞值

app.constant("", "");

PS: 使用$scope 雙向綁定model ,  能夠在anjs中直接調用$scope變量， 也就是調用anjs函數能夠不用傳值了。

 

十二、AnJS 路由js文件路徑 ： http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js

$routeProvider 用來定義路由規則   ,,,       實現多視圖的單頁面訪問，在寫菜單url頗有用。

app.config(["$routeProvider",function($routeProvider){

　　$routeProvider

　　　　.when('/',{template:"hssdffaffa"})

　　　　.when()

　　　　.otherwise({redirectTo:"/"});

}]);

 

來自http://www.cnblogs.com/generalLi/articles/5988096.html