AngularJs學習筆記


基本定義：
1.ng-app = "" 定義了angularJs的使用範圍;
2.ng-init = "變數 = 值;變數 = '值'" 初始化變數的值，有多個變數時，中間用分號隔開；
3.ng-model = "變數" 定義變數名;
4.ng-bind = "變數" 繫結變數名，獲取該變數的資料。這裡的變數就是第3條的變數名。
但是一般都用雙重花括號來獲取變數的值，比如：{{變數}};
5.ng-repeat 指令會重複一個 HTML 元素：（可以用於迴圈遍歷陣列）



eg:5

<div ng-app="" ng-init="names=['Jani','Hege','Kai']">
 <p>使用 ng-repeat 來迴圈陣列</p>
 <ul>
<li ng-repeat="x in names">
 {{ x }}
</li>
 </ul>
</div>

AngularJs指令：是以ng作為字首的HTML屬性。
AngularJs表示式寫在雙大括號內{{expression}}。
AngularJs表示式把資料繫結到HTML,這與ng-bind 指令作用相同。
AngularJs將在表示式書寫的位置"輸出"資料。


AngularJS 表示式 與 JavaScript 表示式
類似於 JavaScript 表示式，AngularJS 表示式可以包含字母，操作符，變數。
與 JavaScript 表示式不同，AngularJS 表示式可以寫在 HTML 中。
與 JavaScript 表示式不同，AngularJS 表示式不支援條件判斷，迴圈及異常。
與 JavaScript 表示式不同，AngularJS 表示式支援過濾器。


注意：


ng-model是用於表單元素的，支援雙向繫結。對普通元素無效； <input> 元素 <select> 元素（下拉列表）<textarea> 元素 <button> 元素  HTML5 增加了如下表單元素：<datalist><keygen><output>
ng-bind用於普通元素，不能用於表單元素，應用程式單向地渲染資料到元素；
當ng-bind和{{}}同時使用時，ng-bind繫結的值覆蓋該元素的內容。


ng-model 指令基於它們的狀態為 HTML 元素提供了 CSS 類：
ng-invalid:未通過驗證的表單
ng-valid:布林型屬性，它指示表單是否通過驗證。如果表單當前通過驗證，他將為true
ng-dirty:布林值屬性，表示使用者是否修改了表單。如果為 ture，表示有修改過；false 表示修沒有修改過
ng-touched:布林值屬性，表示使用者是否和控制元件進行過互動
ng-pristine:布林值屬性，表示使用者是否修改了表單。如果為ture，表示沒有修改過；false表示修改過




$rootscope設定的變數在所有controller裡面都是可以直接用{{$root.變數名}}來顯示的，當然也可以賦值給$scope.


$rootscope是根作用域，是整個應用程式（ng-app），$scope只作用於本個方法




js中split(),如果把空字串 ("") 用作 separator，那麼 stringObject 中的每個字元之間都會被分割。
String.split() 執行的操作與 Array.join 執行的操作是相反的。


"2:3:4:5".split(":")//將返回["2", "3", "4", "5"]
"|a|b|c".split("|")//將返回["", "a", "b", "c"]




AngularJS過濾器
currency格式化數字為貨幣格式。 
{{ 250 | currency }}            // 結果：$250.00
{{ 250 | currency:"RMB ￥ " }}  // 結果：RMB ￥ 250.00
filter從陣列項中選擇一個子集。
// 查詢name為iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} 
lowercase格式化字串為小寫。
orderBy根據某個表示式排列陣列。


 // 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}


// 根據id升序排  預設升序false
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}


uppercase格式化字串為大寫。
date格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
number 格式化（保留小數）
{{149016.1945000 | number:2}}
limitTo 擷取
{{"1234567890" | limitTo :6}} // 從前面開始擷取6位
{{"1234567890" | limitTo:-4}} // 從後面開始擷取4位




Array.prototype.slice.call(arguments);




<div ng-app = "myApp" ng-controller = "myCtrl">
<span>{{myUrl}}<span>
</div>


<script>
angular.module("myApp",[]).controller('myCtrl',function($scope,$location){
$scope.myUrl = $location.absUrl();
});
</script>


 $location 服務，它可以返回當前頁面的 URL 地址。
 
 $http 是 AngularJS 應用中最常用的服務。 服務向伺服器傳送請求，應用響應伺服器傳送過來的資料
 
 var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});


AngularJS $timeout 服務對應了 JS window.setTimeout 函式。(Timer)


AngularJS $interval 服務對應了 JS window.setInterval 函式。(一直執行)


建立自定義服務
app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});
app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});


$watch：持續監聽資料上的變化，更新介面，如：


<div ng-app="myApp" ng-controller="myCtrl">
   <b>請輸入姓名：</b><br>
   <b>姓：</b><input type="text" ng-model="lastName"><br>
   <b>名：</b><input type="text" ng-model="firstName"><br>
   <h1>{{ lastName + " " + firstName }}</h1>
   <h2>{{ fullName }}</h2>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.lastName = "";
   $scope.firstName = "";


   //監聽lastName的變化，更新fullName
   $scope.$watch('lastName', function() {
      $scope.fullName = $scope.lastName + " " + $scope.firstName;
   });


   //監聽firstName的變化，更新fullName
   $scope.$watch('firstName', function() {
      $scope.fullName = $scope.lastName + " " + $scope.firstName;
   });
});
</script>


如果通過$watch去監聽某變數的變化，最後去更新一個fullName就太麻煩了，還倒不如使用函式的方式，如getFullName()：
$scope.getFullName =function(){  return $scope.lastName + " " + $scope.firstName;}




$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);




使用 ng-options 建立選擇框（使用了陣列作為資料來源）
在 AngularJS 中我們可以使用 ng-option 指令來建立一個下拉列表，列表項通過物件和陣列迴圈輸出，如下例項:
<div ng-app="myApp" ng-controller="myCtrl">
 
<select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
</select>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
這種是通過ng-repeat方式建立的下拉框
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>




比較：
ng-repeat 指令是通過陣列來迴圈 HTML 程式碼來建立下拉列表，但 ng-options 指令更適合建立下拉列表，它有以下優勢：
使用 ng-options 的選項的一個物件， ng-repeat 是一個字串。


使用了物件作為資料來源：x 為鍵(key), y 為值(value):
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>


<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars"></select>


表格
<table>
  <tr ng-repeat="x in names">
    <td>{{ x.Name }}</td>
    <td>{{ x.Country }}</td>
  </tr>
</table>


style{table tr:nth-child(odd){};} 表格中的奇數行
style{table tr:nth-child(even);} 表格中的偶數行


 $index:    <td>{{ $index + 1 }}</td>//表格顯示序號
 
 <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td>
 
 <tr ng-repeat="x in names" style="{{$even?'background-color: #f1f1f1':'background-color: #ff0000'}}">
 允許跨域請求
 header("Access-Control-Allow-Origin: *");
 
 ng-disabled 指令直接繫結應用程式資料到 HTML 的 disabled 屬性。
 
 ng-show 指令隱藏或顯示一個 HTML 元素。ng-hide 指令用於隱藏或顯示 HTML 元素。
 <p ng-show="true">我是可見的。</p> 


<p ng-show="false">我是不可見的。</p>


<div ng-app="" ng-init="hour=13">
 
<p ng-show="hour > 12">我是可見的。</p>   可以是布林值的表示式
 
</div>




AngularJS事件


1.ng-click點選事件  所有的操作都是通過Controller來完成的
<div ng-app="myApp" ng-controller="myCtrl">


<button ng-click="count = count + 1">點我！</button>


<p>{{ count }}</p>  //類似ng-model是雙向繫結的，類似監聽者模式（響應式）


</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script>




AngularJS表單


HTML控制元件：input元素，select元素,button元素,textarea元素


input控制元件使用ng-model指令來實現資料繫結
<input type = "text" ng-model = "firstName">


通過以上程式碼應用有了一個firstName的屬性。它通過ng-model指令來繫結到你的應用
firstName的屬性可以在controller中使用：
var app = angular.module('myApp',[]);
app.controller($scope,function(){
$scope.firstName = "Tom";
});


也可以直接通過表示式來使用這個屬性
<div ng-app="">
  <form>
    First Name: <input type="text" ng-model="firstname">
  </form>
  <h1>你輸入的內容為: {{firstname}}</h1>
</div>


Checkbox(複選框),預設是false,未被選中
<form>
    Check to show a header:
    <input type="checkbox" ng-model="myVar">
</form>
 
<h1 ng-show="myVar">My Header</h1>




Radio(單選框)  myVar 的值可以是 dogs, tuts, 或 cars。


<body ng-app="">


<form>
  選擇一個選項:
  <input type="radio" ng-model="myVar" value="dogs">Dogs
  <input type="radio" ng-model="myVar" value="tuts">Tutorials
  <input type="radio" ng-model="myVar" value="cars">Cars
</form>


<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>


<p>ng-switch 指令根據單選按鈕的選擇結果顯示或隱藏 HTML 區域。</p>


</body>


select(下拉框)


<body ng-app="">


<form>
  選擇一個選項:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>


<div ng-switch="myVar">
  <div ng-switch-when="dogs">
     <h1>Dogs</h1>
     <p>Welcome to a world of dogs.</p>
  </div>
  <div ng-switch-when="tuts">
     <h1>Tutorials</h1>
     <p>Learn from examples.</p>
  </div>
  <div ng-switch-when="cars">
     <h1>Cars</h1>
     <p>Read about cars.</p>
  </div>
</div>


<p>ng-switch 指令根據下拉選單的選擇結果顯示或隱藏 HTML 區域。</p>


</body>




app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});






輸入驗證  HTML 表單屬性 novalidate 用於禁用瀏覽器預設的驗證。
$dirty表單有填寫記錄
$valid欄位內容合法的
$invalid欄位內容是非法的
$pristine表單沒有填寫記錄


<body>


<h2>驗證例項</h2>


<form ng-app="myApp" ng-controller="validateCtrl" 
name="myForm" novalidate>


<p>使用者名稱:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">使用者名稱是必須的。</span>
</span>
</p>


<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>


<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid">
</p>


</form>


<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
    $scope.user = 'John Doe';
    $scope.email = '

[email protected]';
});
</script>


</body>
 
 
AngularJS API
 
angular.lowercase()轉換字串為小寫
angular.uppercase()轉換字串為大寫
angular.isString()判斷給定的物件是否為字串，如果是返回 true。
angular.isNumber()判斷給定的物件是否為數字，如果是返回 true。




使用 AngularJS, 你可以使用 ng-include 指令來包含 HTML 內容:


sites.htm 檔案程式碼：
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>


<div ng-app="myApp" ng-controller="sitesCtrl"> 
  <div ng-include="'sites.htm'"></div>
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
    $http.get("sites.php").then(function (response) {
        $scope.names = response.data.records;
    });
});
</script>






AngularJS 動畫


<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
還需在應用中使用模型 ngAnimate：
<body ng-app="ngAnimate">


<style>
.hh {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}


.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}


</style>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">


<h1>隱藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>


<div class = "hh" ng-hide="myCheck"></div>


<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>


</body>




AngularJS 依賴注入
一句話 --- 沒事你不要來找我，有事我會去找你。


1.一個對別人有依賴的東西，它想要單獨測試，就需要在依賴項齊備的情況下進行。如果我們在執行時注入，就可以減少這種依賴
2.引數由定義方決定
3.與import還不完全一樣


AngularJS 提供很好的依賴注入機制。以下5個核心元件用來作為依賴注入：
value
factory
service
provider
constant




1.Value 是一個簡單的 javascript 物件，用於向控制器傳遞值（配置階段）：
// 定義一個模組
var mainApp = angular.module("mainApp", []);


// 建立 value 物件 "defaultInput" 並傳遞資料
mainApp.value("defaultInput", 5);
...


// 將 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   
});




2.factory
factory 是一個函式用於返回值。在 service 和 controller 需要時建立。
通常我們使用 factory 函式來計算或返回值。
// 定義一個模組
var mainApp = angular.module("mainApp", []);


// 建立 factory "MathService" 用於兩數的乘積 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};
   
   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 


// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...




3.provider
AngularJS 中通過 provider 建立一個 service、factory等(配置階段)。
Provider 中提供了一個 factory 方法 get()，它用於返回 value/service/factory。
// 定義一個模組
var mainApp = angular.module("mainApp", []);
...


// 使用 provider 建立 service 定義一個方法用於計算兩數乘積
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  
         
         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});


4.constant
constant(常量)用來在配置階段傳遞數值，注意這個常量在配置階段是不可用的。
mainApp.constant("configParam", "constant value");






練習：自定義directive（指令）
元素
<first/>
<second/>


angular.module('MyApp',[])
.directive('first',first)
.controller('Con',['$scope',func1]);


function first(){
  var directive = {
    restrict:'ACE',
    template:'this is the it-first directive',
  };
  return directive;
};


fucntion func1($scope){
  $scope.name = 'alice';
}


等價於 ：
 angular.module('myApp',[]).directive('first',[function(){
  return {
    restrict:'AE',
    template:'second directive',
    link:function(){
      console.log("this is a link");
    },
    controller:function($scope,$element,$attrs){
      console.log("this is a con");
    }
  };
 }]).controller('Con1',['$scope',function($scope){
  $scope.name = "alicehhh";
 }]);