標籤：log 使用 [] 應該 擷取資料 hello 單元 綁定 body
以前很早就聽說了ng,但是一直沒有去接觸去學習，那時覺得不做一個後台不學h5不學js架構，直到前一段時間基於tp3.2,自己能完成簡單的pc站後台了，才開始著手h5和ng的學習。
看見ng的文檔還是比較興奮的，因為：
紅圈的地方在tp上或是vue(曾經根據官方文檔自學了基礎部分)都是有的，（至於依賴注入好像是在tp5才有。覺得應該上手起來不會太難。
下文為了簡便統一把AngularJs寫成ng。
開始了，angular:
1：首先談及指令，何為指令呢？
指令可以理解為聲明特殊的標籤或屬性
ng內建了很多的指令，你所看到的所有以ng開頭的所有標籤，如ng-app、ng-init、ng-if、ng-model等,這和vue是很相像的，v-model，v-on，v-if等。
ng-app：用於標識頁面是一個AngularJs頁面。一般載入HTML的根對象上
ng-init：用於初始化了一個變數
ng-model：我們可以用ng-model對input輸入框進行綁定，從而我們可以使用動態擷取資料對象的值。你可以認為ng-model是一個指定的屬性，就像html元素的屬性。這裡的雙向資料繫結可以用在很多表單元素上，
比如input、textarea、select。ng利用ng-model這個指令綁定了一個資料，而這個資料是我們希望能夠通過使用者輸入操作而更新的資料
2：第一個ng demo 初識指令：
<!DOCTYPE html><html ng-app lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> name: <input type="text" ng-model="name">{{name}}</div><script src="angular.min.js"></script></body></html>
表現為：
ng通過運算式的方式將資料繫結到HTML標籤內。ng的運算式寫在雙大括弧內：{{name}}，ng-model指令實現雙向資料繫結。當我們改變輸入框的值時，對應的改變會反應到{{name}}運算式上。
2：第二個ng demo 初識模版：
1：以tp為例，所有頁面的渲染都是在服務端來完成的。模版布局，模版繼承，變數輸出等，這樣不可避免會加重伺服器端的壓力，
2：ng有內建的前端模板引擎，即所有頁面渲染的操作都是放在瀏覽器端來渲染的。
3：在ng中的模板就是指帶有ng-app指令的HTML代碼。ng發現Html頁面是否需要用ng模板引擎去渲染的標誌就是ng-app標籤
4：在ng中，我們寫的其實並不是純的Html頁面，而是模板，終端使用者看到的Html頁面（也就是視圖）是通過模板渲染後的結果。
見代碼：
<!DOCTYPE html><html ng-app="cApp"><head> <meta charset="UTF-8"> <title>ng demo2</title> <script src="angular.min.js"></script> <script> (function() { // 建立模組 var mainApp = angular.module("cApp",[]); // 建立控制器，並注入scope mainApp.controller("tempController", ["$scope", function ($scope) { $scope.val = "hello world"; }]); })() </script></head><body><h2>ng模版示範</h2><div ng-controller="tempController"> <div> <input type="text" ng-model="val"> <h4>{{val}}</h4> </div></div></body></html>
表現為：
此時你可能會覺得，這和上面的資料繫結不是一模一樣嗎？為什麼要多寫多餘的代碼呢？
我們先來探究與第一個demo的不同。
（1） ：ng-app="cApp"
（2） : ng-controller="tempController"
（3） ：
<script> (function() { // 建立模組 var mainApp = angular.module("cApp",[]); // 建立控制器，並注入scope mainApp.controller("tempController", ["$scope", function ($scope) { $scope.val = "hello world"; }]); })() </script>
會發現多出來這三個不同，當把三個任何一個去掉的時候雙向繫結都不會生效。
此時，可以理解為指定的某一個模組進行操作輸出。
（未完待續..
angular.js 學習1
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
