angularjs學(xué)習筆記之完整的項目結(jié)構(gòu)
今天的主要講解部分有以下幾點:1.演示一個完整的項目結(jié)構(gòu) 2.$scope的含義 3.模塊化和依賴注入。
一.演示一個完整的項目結(jié)構(gòu)。
下面的所有這些代碼,都是轉(zhuǎn)載于@大漠窮秋 老師的。我轉(zhuǎn)載來之后放到了github上,大家可以去這個鏈接看源代碼。一邊看,一邊學(xué)習,效果最好了~~~~
下面我們來看這個截圖,
這就是一個完整的angularjs項目應(yīng)該有的目錄結(jié)構(gòu)。下面我來講解每一個文件夾對應(yīng)的分別是什么含義。
1.css:不用說了,就是放一些css的樣式文件。
2.framework:這里一般放一些除了angularjs之外的第三方需要的前端框架(ui),比如bootstrap、ueditor等等。
3.imgs:也不用說,放圖片文件。
4.index.html:主要文件,當然,如果項目文件比較多,也可以單獨建個文件夾放頁面。
5.js:不用多說,放自己新建的js文件。
6.tpls:全稱是templates,意思是模版。里面放的是部分html代碼。與angualrjs的directive命令中的templateUrl屬性合用。
下面我們主要看一下tpls的使用方法:這里的tpls文件夾下有一個test.html文件,代碼如下:
<ul> <li> 第一行test </li> <li> 第二行test </li><li> 第三行test </li> </ul>
我們上面也說,這里的文件只是html的一部分,比如這里只是一個ul的部分代碼。那有些人就奇怪了,這樣寫有什么用呢,我該怎么使用呢?不急,下面我來告訴大家怎么使用:
其實我們上節(jié)課提到過了,不知道的人點擊這里,你可以看到第三點,我提到的directive方法。它的意思呢就是定義一個html標簽,然后返回的html內(nèi)容就是就是這里的ul部分啦。
下面來看具體使用代碼:
var appModule = angular.module('app', []); //app是html中ng-app指令的名稱 appModule.directive('hello', function() { //定義一個指令,名稱叫hello return { restrict: 'E', //template: '<div>Hi there</div>', templateUrl:'/tpls/test.html', replace: true }; });
對上面代碼的解釋:就是定義了一個hello標簽,使用此標簽的時候,返回的是test.html的內(nèi)容(使用template和templateUrl都行)。
為什么我們要把上面的ul內(nèi)容放到單獨的文件夾呢?現(xiàn)在想明白了嗎??就是為了當返回的內(nèi)容很多時,直接使用鏈接對應(yīng)就好了,讓代碼看起來很清晰。
二.看一些$scope。
我們來看下面這個圖片,深入講解一些scope和它的特性:
我們來看一下上面的代碼:先是定義了一個控制器叫做HelloCtrl,里面給$scope添加了一個屬性greeting,greeting屬性是一個對象,添加了text屬性,值為‘Hello',就這么簡單。然后在頁面中就可以直接調(diào)用greeting.text,就能夠得到‘Hello'的值了。是不是很神奇呢?那$scope到底是個什么東西呢?為什么能夠?qū)崿F(xiàn)這些功能呢?下面這些都是它的特性,看了之后一定要對它有一定的理解。
1.$scope是一個作用域,也可以理解為一個對象。
2.$scope提供了一些工具和方法,比如$watch()和$apply()等等。
3.$scope也是一個執(zhí)行環(huán)境(作用域)。
4.子$scope可以繼承父$scope的屬性和方法。
5.每一個Angular應(yīng)用只有一個跟$scope($rootscope,位于ng-app中)。
3.模塊化和依賴注入
來看下面這段定義控制器的代碼:
var myApp = angular.module('angularApp', []); myApp.controller('HelloCtrl', ['$scope',function($scope) { $scope.greeting = { text: 'Hello' }; } ]); myApp.controller('ByeCtrl', ['$scope',function($scope) { //..... } ]);
還記得最開始講解的定義控制器嗎?直接使用funciton name(){}的方法。 慢慢的我們發(fā)現(xiàn),如果控制器太多,這樣就不好管理了,為了實現(xiàn)angualrjs的模塊化,我們需要換成上面的寫法,然后我給大家解釋一下這段代碼的含義。
第1行: 先獲取整個頁面的modula名稱‘myApp',,,angularApp是html中ng-app的值。
第3行: 定義一個控制器,名稱為‘HelloCtrl';
第9行同上。
這樣,我們就不知不覺的實現(xiàn)了模塊化?。?!
這里我們只調(diào)用了controller方法,還有第一節(jié)提到的directive、filter等等方法,都應(yīng)該在myApp上調(diào)用,以實現(xiàn)響應(yīng)的功能。然后使用多個模塊完成一個項目,我們就實現(xiàn)了依賴注入??!
OK,以上就是對這3個主要模塊的使用說明了。希望對大家的學(xué)習有幫助啦。。。如果對于上面的筆記有不懂的地方,盡管問我,我肯定會給大家解答的。祝大家生活愉快!
- AngularJS實現(xiàn)樹形結(jié)構(gòu)(ztree)菜單示例代碼
- 在AngularJS中使用jQuery的zTree插件的方法
- AngularJS深入探討scope,繼承結(jié)構(gòu),事件系統(tǒng)和生命周期
- AngularJS教程之MVC體系結(jié)構(gòu)詳解
- AngularJS內(nèi)置指令
- AngularJS入門教程之學(xué)習環(huán)境搭建
- AngularJS中的模塊詳解
- angularjs中的單元測試實例
- AngularJS學(xué)習筆記之基本指令(init、repeat)
- AngularJS遞歸指令實現(xiàn)Tree View效果示例
相關(guān)文章
Angularjs根據(jù)json文件動態(tài)生成路由狀態(tài)的實現(xiàn)方法
最近做項目遇到這樣一個新需求,就是需要根據(jù)json文件動態(tài)生成路由狀態(tài),通過查閱相關(guān)資料實現(xiàn)了此功能,下面小編把問題總結(jié)分享到腳本之家平臺供大家參考2017-04-04Angular實現(xiàn)的敏感文字自動過濾與提示功能示例
這篇文章主要介紹了Angular實現(xiàn)的敏感文字自動過濾與提示功能,結(jié)合實例形式分析了AngularJS針對字符串的輸入判定及實時顯示相關(guān)操作技巧,需要的朋友可以參考下2017-12-12AngularJS實現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能詳解
這篇文章主要介紹了AngularJS實現(xiàn)的JSONP跨域訪問數(shù)據(jù)傳輸功能,較為詳細的分析了JSONP的概念、功能并結(jié)合實例形式給出了AngularJS使用JSONP進行跨域訪問數(shù)據(jù)傳輸?shù)南嚓P(guān)技巧,需要的朋友可以參考下2017-07-07