angularJS學習筆記二

時間 2020-07-07

原文原文鏈接

angularJS四個特性javascript

1.MVC　php

<!doctype html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div ng-controller="HelloAngular">
            <p>{{greeting.text}},Angular</p>
        </div>
    </body>
    <script src="js/angular-1.3.0.js"></script>
    <script src="HelloAngular_MVC.js"></script>
</html>

function HelloAngular($scope) {
    $scope.greeting = {
        text: 'Hello'
    };
}

　　輸出爲：Hello，Angularhtml

　　ng-controller控制器綁定到HelloAngular函數，函數中定義了一個greeting對象，屬性text值爲'hello'java

分析：angularjs

M：{{}}爲模型web

V：視圖是能看得見的，固然是HTML咯數組

C：HelloAngular充當控制器瀏覽器

下面是demo，若是是新手，仍是老老實實的把代碼敲一遍比較好，畢竟俺們都是寫代碼的，不停地敲，不停地思考才能敲得更快，更好，bug更少！服務器

上面是圖片格式的，最下面爲懶人準備了html併發

懶人場所

  1 <!DOCTYPE html>
  2 <html ng-app="myapp">
  3 
  4 <head>
  5     <script type="text/javascript" 
  6     src='http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js'></script>
  7 </head>
  8 
  9 <body>
 10     <h3>寫在前面的話</h3>
 11     <div>
 12         <pre>
 13 
 14                                                 angularjs簡介
 15 
 16 AngularJS是爲了克服HTML在構建應用上的不足而設計的，是一個用於設計動態web應用的javascript
 17 結構框架（區別於類庫）。可以像backbone同樣提供一整套方案用於設計web應用。
 18 
 19 HTML是一門很好的爲靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。一般，
 20 咱們是經過如下技術來解決靜態網頁技術在構建動態應用上的不足：
 21 
 22 1）類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定何
 23 時使用類庫。類庫有：jQuery等。
 24 2）框架 - 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架
 25 是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。框架有：knockout、sproutcore等。
 26 
 27 AngularJS使用了不一樣的方法，它嘗試去補足HTML自己在構建應用方面的缺陷。AngularJS經過使用咱們
 28 稱爲標識符(directives)的結構，讓瀏覽器可以識別新的語法。例如：
 29     使用雙大括號{{}}語法進行數據綁定；
 30     使用DOM控制結構來實現迭代或者隱藏DOM片斷；
 31     支持表單和表單的驗證；
 32     能將邏輯代碼關聯到相關的DOM元素上；
 33     能將HTML分組成可重用的組件。
 34 AngularJS是一個開源的web應用框架，由Google和社區進行維護，它能夠建立單頁的應用程序，一個頁
 35 面的應用僅僅須要HTML,CSS和JavaScript在客戶端。它的目標是加強頁面的模型-視圖-控制（MVC）的功能，爲簡化開發和測試。
 36 它經過雙向數據綁定使你的UI（視圖層）與你的JavaScript對象（層模型層）的數據自動同步。幫助你
 37 更好的構建你的應用和更方便的測試，AngularJs告訴瀏覽器如何依賴注入和控制反轉。它幫助改良了允
 38 許異步回調和延遲、使客戶端導航和深層連接使用哈希bang格式地址和HTML5 pushStat與服務端通訊更容易。
 39 
 40 Angular 提供了：
 41     結構模型的引入（MVC,SPA等）;
 42     加強HTML支持新特性;
 43     避免直接DOM操做來避免很難調試不可追蹤的代碼;
 44     包含低耦合和高可複用性;
 45     應用程序內部規則測試;
 46     視圖模板更接近服務器端模板;
 47 設計初衷:
 48     將DOM操做從應用中解耦. 加強了可測試性.
 49     應用測試性與開發代碼一樣重要. 測試的複雜程度與代碼的設計結構強相關.
 50     客戶端與服務端解耦. 實現了併發處理機制加強了代碼複用性.
 51     在開發全過程當中做出指引: 從UI到業務邏輯最終到測試環節.
 52 
 53 
 54 
 55 
 56                                      angularjs關鍵特性
 57 1）雙向數據綁定:
 58 　　數據綁定多是AngularJS裏最酷，最實用的功能。 它將節省你大量的樣板代碼編寫。 一個典型的Web應用程序能夠包含多達80％的代碼基礎，如遍歷，操做，並聽取了監聽DOM。 數據綁定使得不用編寫這些代碼，這樣你就能夠專一於你的應用程序。
 59 2）模板
 60 　　在AngularJS，模板就是原生的HTML. 作了基於視圖的加強. 這樣作最大的好處在於拉近了開發與設計人員的工做流. 設計人員操做HTML完成設計，開發直接在HTML上做相應的功能開發。
 61 3）MVC
 62 　　AngularJS引入了軟件設計的MVC模式.這對於使用者來講仁者見仁智者見智. AngularJS並不
 63 是徹底的MVC而是 MVVM (Model-View-ViewModel).
 64 4）依賴注入
 65 　　AngularJS 提供了依賴注入的子系統幫助開發人員下降開發複雜度，提升測試效率.依賴注入將業務代碼與配置實現解耦，提升了代碼的可測性. 
 66 　　有了DI,無需每次都建立指定的對象依賴關係及後面配置. 這樣就能按需分配而無需本身制
 67 定或是查找. 就像要說一句"Hey I need X',DI就會幫你建立併發送給你.
 68 
 69 採用依賴注入後能體驗到的好處主要包括:
 70 代碼更易於維護。
 71 API更爲簡練和抽象。
 72 代碼更易於測試。
 73 代碼更加模塊化、可複用性更強。
 74 5）指令
 75 　　指令能夠被用來建立自定義的HTML標籤，這些標籤能夠用做新的自定義的控件。它們也可
 76 以用來"渲染"有必定行爲的元素，也能夠以一些有趣的方式來操做DOM屬性。一個指令就是一個
 77 能引入新語法的東西。把分離的組件組合成一個組件，這種建立應用的方式將使得添加、修改
 78 和刪除頁面功能變得異常簡單。指令是AngularJS的一個很是強大且獨有的特性。
 79 
 80 　　從更高的層次說,  DOM 元素上的指令 (像是屬性，元素名，註釋或是 CSS ) 等給 
 81 AngularJS's HTML 編譯器傳遞的數據($compile) 從而傳遞指定的功能到DOM元素或是子元素。
 82 
 83 　　Angular 有不少這樣的內置指令，像是 ngBind, ngModel, 和ngView.Y還能自定義指令，當Angular啓動後HTML編譯器就會自動創建DOM元素的指令映射.
 84 6）測試
 85 　　AngularJS 意識到凡是js寫的代碼須要增強測試. 這在 AngularJS 設計之初就有了, 因而Angular的可測試性不言而喻.
 86 　　JS是解釋性的動態語言，設計相應的測試決不可小覷.
 87 　　AngularJS 徹底基於可測的根基設計出來的. 它提供了端到端的單元測試.
 88 摘自：http://www.admin10000.com/document/5121.html
 89 
 90 
 91 模塊定義了一個應用程序。
 92 模塊是應用程序中不一樣部分的容器。
 93 模塊是應用控制器的容器。
 94 控制器一般屬於一個模塊。
 95 
 96 問題：函數會影響到全局命名空間
 97 你們應該常常性的會看到這句話，「JavaScript 中應避免使用全局函數」。由於他們很容易被
 98 其餘腳本文件覆蓋。
 99 AngularJS 模塊讓全部函數的做用域在改模塊下，避免了該問題。
100 
101 模塊的定義
102 var app = angular.module("myApp", []);s
103 在模塊定義中 [] 參數用於定義模塊的依賴關係。
104 中括號[]表示該模塊沒有依賴，若是有依賴的話會在中括號寫上依賴的模塊名字。
105 
106 何時載入庫?
107 對於 HTML 應用程序，一般建議把全部的腳本都放置在 body 元素的最底部。
108 這會提升網頁加載速度，由於 HTML 加載不受制於腳本加載。
109 在 body 元素中加載 AngularJS 庫，必須放置在您的 AngularJS 腳本前面：
110         </pre>
111     </div>
112     <hr>
113     <h3>demo1 雙向數據綁定</h3> Your name:
114     <input type="text" ng-model="yourname" 
115         placeholder="World"> Hello {{yourname || 'World'}}!
116     <hr>
117     <h3>demo2 ng-repeat循環輸出</h3>
118     <div ng-app="" ng-init="name=[11,22,33]">
119         <p>循環對象</p>
120         <ul>
121             <li ng-repeat="i in name">{{i}}</li>
122         </ul>
123     </div>
124     <hr>
125     <h3>demo3 控制器雙向數據綁定</h3>
126     <div ng-controller="funcf">
127         姓
128         <input type="text" ng-model="firstname" /> 名
129         <input type="text" ng-model="lastname" />
130         <br /> name:{{ firstname +" "+ lastname }}
131     </div>
132     <script>
133     var myapp = angular.module('myapp', []);
134     myapp.controller('funcf', function funcf($scope) {
135         $scope.firstname = "X";
136         $scope.lastname = "y";
137     });
138     </script>
139     <hr>
140     <h3>demo4 過濾器</h3>
141     <div>
142         轉換成小寫
143         <input type="text" ng-model="enter">{{enter | lowercase}}
144         <br />
145         <br />
146         <!-- lowercase小寫 uppercase大寫 currency格式化數字爲貨幣格式
147              filter從數組項中選擇一個子集 orderBy根據某個表達式排列數組 -->
148         向指令添加過濾器
149         <input type="text" ng-model="test">模型test做爲過濾關鍵字
150         <ul ng-init=" names = [{name:'b'},{name:'a'},{name:'c'}] ">
151             <li ng-repeat="i in names | filter:test | orderBy:'name' "
152                 >{{ $index +" "+i.name | uppercase}}</li>
153             <!-- $index應該是內置索引  -->
154         </ul>
155     </div>
156     <hr>
157     <h3>demo5 http</h3>
158     <div ng-controller="httpDemo">
159         <ul>
160             <li ng-repeat="i in names">{{i.Names}}</li>
161         </ul>
162         <script>
163         myapp.controller('httpDemo', function($scope, $http) {
164             var httpObj = 
165             $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php");
166             //這裏固然會報錯，由於這是w3cschool的例子，不是我本身的域名，受到js同源策略限制
167             httpObj.success(function(response) {
168                 $scope.names = response.records;
169                 console.log($scope);
170             });
171         });
172         </script>
173     </div>
174     <hr>
175     <h3>demo6 html DOM</h3>
176     <div ng-init="mySwitch=true">
177         <p>
178             <button ng-disabled="mySwitch">點一下</button>
179         </p>
180         <p>
181             <input type="checkbox" ng-model="mySwitch">選擇</p>{{ mySwitch }}
182         <!-- ng-disabled 指令綁定應用程序數據 "mySwitch" 到 HTML 的 disabled 屬性。
183              ng-model 指令綁定 "mySwitch" 到 HTML input checkbox 元素的內容（value）。
184          -->
185         <br />
186         <br /> ng-show
187         <p ng-show="true">你看得見我，看不見我兄弟</p>
188         <p ng-show="false">你看不見我，看得見我弟兄</p>
189         ng-hide
190         <p ng-hide="true">你看得見我，看不見我兄弟</p>
191         <p ng-hide="false">你看不見我，看得見我弟兄</p>
192     </div>
193     <hr>
194     <h3>demo7 事件</h3>
195     <div ng-init="count = 0">
196         <input type="button" ng-click="count = count + 1" value="計數器" />
197         <!-- 發現不能寫爲count+=1  -->
198         <p> {{count}} </p>
199     </div>
200 </body>
201 
202 </html>