標籤：好的 沒有 渲染 tin ack 雙向 name 傳遞資料 1.2
1.1. AngularJS概述 1.1.1. 介紹ngAngularJS 誕生於2009年，由 Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS架構，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是：MVC、模組化(編程)、自動化雙向資料繫結、語義化標籤、指令、依賴注入等等。Single Page Application單頁Web應用（single page application，SPA），就是只有一個Web頁面的應用，是載入單個HTML頁面，並在使用者與應用程式互動時動態更新該頁面的Web應用程式。單頁面應用程式：
傳統多頁面應用程式：
4 可以選擇性的保留狀態，如音樂網站，切換頁面時不會停止播放歌曲
傳統ajax的劣勢：
1 ajax請求不會留下記錄2 使用者無法直接通過URL直接進入指定頁面3 ajax對SEO不友好ng-app 指令ng-model 指令ng-click 指令ng- 的屬性稱之為指令，其作用是為DOM元素繫結資料、添加事件 等<input type="text" ng-model="userName">ng-app 指令指定了應用的根項目，通常放置在頁面的根項目，也可以是任意的元素例如：body或html標籤應用程式運行時，會自動執行邊界內部的其他指令。標記的範圍儘可能小，提高效能注意：每個頁面中可以出現多次 `ng-app` 指令（不推薦！）如果是多個需要手動引導：`angular.bootstrap()`ng-click="expression"<button ng-click="val + 1"></button>ng-model指令將嘗試把屬性綁定到當前範圍中。如果當前範圍中沒有該屬性，那麼AngluarJS會幫我們隱式建立並且添加到當前範圍中。ng-init="uName=‘Jack‘"從JS角度，使用運算子和資料 串連起來的有 結果 的代碼就是：運算式注意：不帶分號例如：可以使用 console.log(); 列印出來， 或者 console.log( expression );可以用作 賦值運算子 的右值 var test = expression;<p>{{user.name}}</p><p>{{1 + 8}}</p><p>{{"hello" + "world"}}</p><div ng-click="sayHi()"></div><body ng-app> <input type="text" ng-model="user.name" /> <p>Hello {{user.name}}</p></body>ng-app告訴AngularJS讓它來管理 body內部的代碼ng-app指令建立了一個對象，對象中包含了AngularJS的相關內容，例如：資料模型ng-model指令查詢資料模型中有沒有 user 對象以及name屬性，沒有則建立user對象以及name屬性，並初始化name值為：Null 字元串{{user.name}} 從資料模型中尋找有沒有該資料，如果有就取出來，並展示ng-model和{{}} 中的 user.name 指向的是資料模型中同一個資料模組是一個容器包含了應用程式的不同組成部分，並且這些內容必須要依附於一個模組 例如：controllers, services, filters, directives, configs 等模組是應用程式的組成單元，例如：登入模組、註冊模組、商品列表模組 等，這些模組組合在一起構成了一個完整的應用程式。var app = angular.module(moduleName, []);// 第一個參數：模組名稱，字串// 第二個參數：數組，用來添加當前模組的依賴項var app = angular.module("firstApp", ["otherModuleName"]);var app = angular.module(moduleName);ng-controller指令來使用app.controller(ctrlName, callback);app.controller("DemoController", function($scope) { // $scope 相當於當前的資料模型});$scope這個名稱必須這麼寫！$scope 是在控制器建立的時候，被注入進去的1 ng 在使用的時候，頁面中只要有 ng-app 就會建立一個 scope，名字是：$rootScope2 $scope 是 HTML（視圖）背後的“男人” ----> 視圖：女人，負責美（展示） $scope：男人，負責提供美的資源（資料）3 所有的控制器都繼承自 $rootScope 4 繼承是按照：原型式繼承 來實現5 對於HTML來說，參照原型式繼承：子節點繼承自父節點ng-model 指令實現資料模型的值發生改變，就會導致頁面值的改變；頁面值的改變，也會導致資料模型中值的改變，這種相互影響的關係就是雙向資料繫結。{{}} 運算式來實現MVC（Model–view–controller）是一種軟體架構模式，把軟體系統分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。MVC是一種應用程式的設計思想（不是設計模式）ng-app 指令包裹的HTML代碼例如：移動端和PC端兩個View，共用同一個Model在MVC設計模式中， Model 響應使用者請求並返迴響應資料，View 負責格式化資料並把它們呈現給使用者，商務邏輯和展示層分離，同一個 Model 可以被不同的 View 重用，所以大大提高了代碼的可重用性。M: model 模型，相當於 User（建構函式）V: view 視圖， ng-app 管理的頁面VM: ViewModel 視圖模型 在Angular中就是：$scopeMVW ===> "Model View Whatever"getItem(keyName)：讀取，參數類型：stringsetItem(keyName, keyValue)：設定，參數類型：string$scope.$watch(attrName, callback, flag);app.controller("demoController", function($scope) { $scope.name = "jack"; // 參數一：表示監聽的$scope中的屬性名稱，類型為：字串 // 參數二：表示資料變化執行的回呼函數，有兩個參數分別是：當前值與變化之前的值 // 參數三：比較方式，false：表示比較引用；true：表示比較值。預設值為false $scope.$watch("name", function(curValue, oldValue) { // 只要被監聽的資料發生變化，就會指定該回呼函數中的代碼！ // 略過第一次執行 if(curValue === oldValue) return; });});ng-app 指令啟動angular.bootstrap(document, [‘MyModule‘])// 等待文檔載入完成後，啟動 angularangular.element(document).ready(function() { angular.bootstrap(document, [‘MyModule‘]);});ng-appng-app 並且啟動，如果啟動其他的，需要手動啟動<div ng-app="FirstApp"></div><div ng-app="SecondApp"></div>使用jQuery的思路：1 想要擷取元素，我調用 $(selector)2 元素繫結事件，我調用 .on()3 進行什麼DOM操作，我調用什麼方法完成總結：你告訴jQuery你要做的操作，jQuery就能幫你做好。 **在使用庫的過程中，開發人員是 控制者**Angular提供了一套完整的解決方案，所有的流程都設定好了我們只需要按照流程規則，把我們的代碼進行填坑。1.Angular架構-angular介紹與基本使用，MVC模式介紹
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
