標籤：south tty 大致 方便 func process attr mod tag
簡介：AngularJS 是一個 JavaScript 架構。它是一個以 JavaScript 編寫的庫。一、AngularJS大致功能模組 二、頁面互動變得簡單1、樣本：計算價格<html><head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <title>樣本</title></head><body> <div ng-app="" ng-init="quantity=1;price=5"> <h2>價格計算機</h2> 數量： <input type="number" ng-model="quantity"> 價格： <input type="number" ng-model="price"> <p><b>總價：</b> {{ quantity * price }}</p> </div></body></html>效果：
我感覺都沒寫js代碼，就完成了一個計算邏輯！
2、樣本：表單值不需要寫js代碼來擷取json值<html><head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <title>樣本</title></head><body> <div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> 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> </form> <p>表單值 = {{user}}</p> <p>初始值 = {{inituser}}</p> </div> <script> var app = angular.module(‘myApp‘, []); app.controller(‘formCtrl‘, function ($scope) { $scope.inituser = { firstName: "John", lastName: "Doe" }; $scope.reset = function () { $scope.user = angular.copy($scope.inituser); }; $scope.reset(); }); </script></body></html>效果：
頁面輸入值改變，不需要重新取值，比如使用jquery，不使用angular，則需要這樣取值：
var json={};json.firstName=$("#firstName").val();json.lastName=$("#lastName").val();現在這樣簡單是方便了不止一點！
2、樣本：綁定事件讓代碼變得更容易維護<html><head> <meta name="viewport" content="width=device-width" /> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <title>樣本</title></head><body ng-app="myNoteApp" ng-controller="myNoteCtrl"> <h2>我的筆記</h2> <textarea ng-model="message" cols="40" rows="10"></textarea> <p> <button ng-click="save()">儲存</button> <button ng-click="clear()">清除</button> </p> <p>剩餘字數: <span ng-bind="left()"></span></p> <script> var app = angular.module("myNoteApp", []); app.controller("myNoteCtrl", function ($scope) { $scope.message = ""; $scope.left = function () { return 100 - $scope.message.length; }; $scope.clear = function () { $scope.message = ""; }; $scope.save = function () { alert("Note Saved"); }; }); </script></body></html>效果：
這裡的message字數改變，會觸發修改剩餘字數提示。
未使用angular時，我們會把這樣改變綁定在message的change事件上，這樣，要查剩餘字數的代碼，必須要想到是message的事件,類似這樣：
$("#message").change(function({ $("#leftwordcount").text(left());});現在是查到剩餘字數對應span的ng-bind事件，就能知道是哪裡實現了這個邏輯，更容易找到實現方法從而更加易於維護這種實現。
三、其他總結比如我學習到angular的http部分,文法更加簡單，只要傳重要的參數就行，不用jquery http那麼多選項，對於簡單的資料請求更加便於使用：
$http.get(‘/someUrl’, config).then(successCallback, errorCallback);
$http.post(‘/someUrl’, data, config).then(successCallback, errorCallback);
當然，也可能是有些方法封裝好了，參數減少，同時也不適用於複雜情境的處理，我覺得angular結合其他js架構的使用，才能達到一個相對完美的狀態吧，一個架構肯定是不能滿足所有使用需求的。不過多瞭解一個架構，就可能會在需要它的時候想起來用它。
附angular基礎內容學習網址：http://www.runoob.com/angularjs/angularjs-tutorial.html
3天學習完AngularJS基礎內容小結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
