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