AngularJs學習二--路由、模塊、依賴注入

路由 模塊 依賴注入
-> AngularJS的模塊化實現
-> 一個完整的項目結構是怎樣的
-> 使用ngRoute進行視圖之間的路由
-> 一切都是從模塊開始的
-> ng官方推薦的模塊切分方式是什麼
-> 模塊之間的依賴應該怎麼做?–依賴注入

<– 全局污染 –>
把一個函數或變量定義成全局函數,叫做全局空間污染。爲了避免全局空間污染,angular提供了ng-module
-> 用angular這個全局對象,通過.module定義一個’HelloAngular’模塊
var helloModule=angular.module(‘HelloAngular’,[]);
-> 用module方法的實例調用模塊上controller方法,創建一個’helloNgCtrl’的控制器,後面的[]不確定是什麼意思(防止壓縮嗎?)。實現模塊化
helloModule.controller(‘helloNgCtrl’,[‘scope,function( scope){}]);
<– angular模塊 –>
-> 模塊是什麼?
是一個集合,模型、視圖、控制器、過濾器、服務…組合到一起,實現某一個功能;

<– ngRoute進行視圖之間的路由 –>(一個項目之間有多個視圖,而多個視圖進行切換的方法就是通過URL進行切換,然後有控制器將視圖生成。)
routeProvider : 提供路由,通過訪問不同路徑,展示不同視圖,視圖由控制器生成出來
controller 控制器(遙控器)控制視圖,數據模型(機頂盒),即遙控器可以跟機頂盒交互也可以和電視機(視圖)交互。可以看出在MVC中控制器處於主控方的地位。
-> routeProvider.when()

路由:通過when和otherwise兩個方法,讓url與相應內容對應
這裏寫圖片描述

路由:本質上是利用地址欄中url的不同展示不同的視圖,視圖由控制器利用模板生成出來的(和監察者模式相似),url中還可以帶參數(/list:bookid)
兩個方法:when和otherwise

url地址中的#:防止瀏覽器向後臺提交請求,代表內部錨點,不會向服務端發起請求
通過”#/目錄名”方式告訴瀏覽器在頁面內進行跳轉,angular會攔截到這個url地址,把”#”後面的內容取出來,和routeProvider進行匹配,展示相應的視圖;所以可以把不同的視圖交給不同的控制器處理,把視圖之間的職能分開,用多個控制器處理不同的視圖內容

模塊:入口文件app,然後通過module,存放多個依賴注入,和路由配置
模塊之間的依賴注入
angularjs的模塊是一個集合,由模型 視圖 控制器 過濾器 服務…等等東西組合在一起 實現某一個功能 就叫一個模塊
這裏寫圖片描述

ng-app作爲啓動點的開始,在加載AngularJS完畢之後它就會去找ng-app這個指令(只有一個)。
這裏寫圖片描述
這裏寫圖片描述

這裏寫圖片描述
ng開頭的angular自己提供的

一個項目的結構,將模塊分開方便多人開發
這裏寫圖片描述

發佈了25 篇原創文章 · 獲贊 10 · 訪問量 15萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章