angular中的概念和原理淺析

1. 問題反饋

   • MVC 與 MVVM
   • • M: model 資料模型
     • V: view 檢視( 介面 )
     • C: controller 控制器
     • VM: ViewModel 檢視模型

   • 依賴注入
     .controller( ‘….’, [ ‘…’, function ( … ) {

   }] )

就是傳參

angular.module( 'mainApp' ) 獲得已定義的 模組 mainApp
模組定義到哪裡去了? 定義在 angular 內部.
怎麼藉助於中間的橋樑, 事先安排好的暗號: 此時就是 mainApp, 即模組的名字.

就是說 如果需要得到某一個東西, 首先呼叫對應的方法獲得, 就需要給定你要申請的名字.
angular 會根據的名字將你需要的東西返回給你.

在建立控制器的時候需要使用 $scope, $log, $timeout, $interval, …
然而這些物件都是 angular 建立的, 因此需要提交申請.

    .controler( 'mainController', [ '$scope', '$log', function ( $scope, $log ) {

    }] );

所謂的依賴注入:
- 依賴: 需要
- 注入: 傳入

* $scope 作用域
* controller 引數與作用


* 執行原理與基本結構( $watch, $apply )
* $scope和$watch裡面的機制是什麼
* 髒檢查


* 兄弟間傳值( 觀察者模式 )
* on( 'type' ,.. )
* 事件指令
* ng-class
* ng-model和ng-init的區別 為什麼加了init後在指令碼里就不能再修改標籤裡的值了

1. 網站開發的發展歷程
   
   • 靜態頁面時代 瀏覽器, 伺服器 特點: 伺服器只是接收請求, 讀取本地靜態資源( html, css, js, png, … ), 傳送這些資源
     瀏覽器接收資源, 渲染顯示

補充: 伺服器, 網站根目錄的含義
在 伺服器計算機上有一個 資料夾, 這個資料夾放置著頁面的所有檔案
利用 http 軟體, 設定該資料夾為網站根目錄.
由於安全問題, http 設定了網站根目錄後, 那麼只允許訪問該目錄下的所有資源.
不允許訪問其他父級目錄( 除非特殊設定 )

url: 
  協議://域名或IP:埠號/檔案路徑?引數...


* 動態網站時代 問題: 比如百度搜尋, 不可能將搜尋的頁面設計成靜態頁面. 必須引入動態網站( php ) 特點: 一般 url 都帶有引數( get, post )    伺服器拿到資料之後檢查如果是 php 請求, 將該請求交給 php 引擎
php 執行程式碼, 拼接 html 格式的字串, 返回給 伺服器
伺服器在將該 html 形式的字串 傳送給瀏覽器
瀏覽器再解析執行渲染顯示.

思想在這裡發展: MVC, …
* 過度階段( 分散式雛形 ) 特點: 伺服器接收請求, 獲得資料, 返回最小的資料, 由瀏覽器來顯示最終的效果( DOM )
* webapi 階段 特點: 伺服器只提供資料, 最終如何顯示由其他結構來決定

典型案例 給定一個 資料, 生成一個 table var data = [ { name: ‘jim1’, age: 19, gender: ‘男’ }, { name: ‘jim2’, age: 9, gender: ‘女’ }, { name: ‘jim3’, age: 29, gender: ‘男’ }, { name: ‘jim4’, age: 39, gender: ‘女’ }, { name: ‘jim5’, age: 49, gender: ‘女’ } ];
傳統的處理辦法( DOM )
改良的傳統辦法( innerHTML )

2.1. 分離的思想早期將 資料, 介面, 邏輯混合在一起開發, 維護的時候就會很麻煩
將資料, 介面, 邏輯分離

1. MVVM 問題引入- 維護程式碼需要提供互動

   • 資料模型的準確性
   • 儲存使用者資訊: 性別
   • 漢字: GB2312 2 個位元組, unicode 2 個位元組, utf-8 三個位元組
   • 一般資料儲存的時候 男使 用 m( male ), 女 使用 f ( female )

   var data = [
   { name: ‘jim1’, age: 19, gender: ‘m’ },
   { name: ‘jim2’, age: 9, gender: ‘f’ },
   { name: ‘jim3’, age: 29, gender: ‘m’ },
   { name: ‘jim4’, age: 39, gender: ‘f’ },
   { name: ‘jim5’, age: 49, gender: ‘f’ }
   ];

   • 需要提供一個轉換

   • 電商的例子

   • 使用者儲存單獨存放

   • 商品儲存單獨存放

   • 頁面顯示的時候是一起顯示

   • 在實際應用中, 更多的是進行頁面的互動, 而最後一次性向伺服器提交處理
     也就是說以前 控制器( 維護檢視與 Model 的橋樑 )功能被弱化. 而增強了
     檢視與檢視模型的使用. 因此將其稱為 MVVM

2. 中午反饋- DOM 的含義是 文件物件模型.

   123
   4

   5

   6
   789
   • 將 第二個 div 中文字的顏色改成 紅色
   • 將整個 頁面 看成一個節點( Node )樹, 任何內容都是節點. 節點與節點之間只有父子關係與兄弟關係

‘get-element-by-id’ => ‘getElementById’

‘get-element-by-id’.replace( /-(.)/g, function ( _, first ) {
return first.toUpperCase();
});

‘getElementById’ => ‘get-element-by-id’

‘AAA’ => ‘a-a-a’
‘getElementById’.replace( /(.)([A-Z])/g, function( _, prev, next ) {
return prev + ‘-’ + next.toLowerCase();
}).replace( /(.)([A-Z])/g, function( _, prev, next ) {
return prev + ‘-’ + next.toLowerCase();
})

1. angular- ng 他是一個典型的 mvvm 框架
   
   • 框架與庫的區別
   • 如果使用 ng 的步驟
     
     1. 引入 angular.js
     2. 新增 ng-app 屬性
     3. 新增 ng-xxx 等屬性
   • ng 最大的特點就是雙向資料繫結

5.1. 案例:- 要求頁面中提供兩個 文字框, 要求任意在一個文字框中輸入內容, 兩個文字框的資料同步

• 補充:
  
  • 在 ng 中凡是以 ng- 開頭的這些屬性 都稱為 ng 的 指令( directive )
  • 所謂的指令就是給 標準的 html 標籤提供一些額外的操作( 額外的功能 )
  • 指令不一定都是 以 ng- 開頭, 還有以標籤形式存在的, 以 class 形式存在的, 以 註釋形式存在的

5.2. 文件- http-server
是一個 輕量級的 http 伺服器, 使用的 是 node 平臺( npm )
使用 npm 安裝 http-server
語法: npm install -g http-server –registry=https://registry.npm.taobao.org
安裝好以後可以使用 http-server 或 hs 表示該命令
使用的語法: hs -o -p 8081, 將當前目錄作為 網站的根目錄

5.3. 模組( module )- ng 中, 所有的 頁面不可能將所有的東西都做成屬性, 還需要事件等其他更多的功能
- 如果需要提供點選的行為, 那麼就需要使用 ng-click 的指令
語法: ng-click=”func()”
當使用者點選行為發生的時候, ng 就會自動的呼叫 函式 func()
問題是 這個函式應該在哪? 就在 $rootScope 上
此時需要編寫程式碼
- 如果使用者不寫任何程式碼( 不給 ng-app 來提供名字 ), 那麼 ng 就會自動的維護一個 模組 物件.
- 但是如果需要實現一些複雜的功能 就必須手動的建立模組, 那麼就必須讓我們建立的模組與 介面繫結( 給 ng-app 賦值 )
- 如果使用者給 ng-app 提供了名字, 那麼 ng 就不會再建立 模組來維護程式碼了

建立模組的語法
angular.module( ‘模組名’, [] ) -> 模組物件
該方法會建立一個模組, 並將其命名為 指定的名字
說明:
1> 第二個引數 [] 是用於載入其他模組使用的
2> 如果不提供第二個引數, 那麼就表明是在獲得模組( 以前已經定義 )

在 ng 中 一個 頁面就相當於一個 angular 的應用程式( ng-app ),
在 ng 中 一個頁面預設只允許有一個主模組, 即 ng-app.

如果必須讓一個頁面有多個 ng-app 必須使用手動程式碼繫結( 引導 )
語法: angular.bootstrap( dom元素, [ ‘模組名’ ] )

1. run 方法在 ng 中 有一個 run 方法, 表示一執行起來的方法, 類似於 window.onload
   語法:
   .run( [ ‘rootScope′,function(

   rootScope', function (
   rootScope ) {
   // …
   }] );
   使用 run 方法一般都是進行初始化, 如果需要有點選的行為 那麼就給 $rootScope 提供方法即可

2. 控制器
   與傳統 mvc 中的 控制器不一樣. ng 的控制器用於劃分邏輯, 與初始化資料
   在頁面中定義多個 控制器, 可以將全域性 rootScoep解放出來.每一個控制器背後依舊會有一個

   rootScoep 解放出來. 每一個 控制器背後依舊會有一個
   scope
   每一個控制器單獨維護一個具體的任務.

使用步驟:
1> 在模組中要建立控制器
2> 在 頁面中使用 ng-controller 指令, 註明使用哪一個控制器
3> 在 控制器中寫初始化程式碼