javascript
AngularJS基础01 从HelloWorld说起
作者：arccosxy ?轉(zhuǎn)載請(qǐng)注明出處：http://www.cnblogs.com/arccosxy/
準(zhǔn)備工作
首先，創(chuàng)建一個(gè)名為index.html的HTML文件，代碼如下：
<!DOCTYPE html> <head><title>Learning AngularJS</title> </head> <body></body> </html>接下來(lái)就是加載angular.js庫(kù)，訪問(wèn)https://angularjs.org/獲取AngularJS最新的CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）鏈接，或者用下面這個(gè)鏈接https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js，這是Google的CDN，把它加入到head標(biāo)簽中：
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content'></div> </body> </html>好了，現(xiàn)在我們有了一個(gè)加載了AngualarJS的HTML頁(yè)面，go on!
一些設(shè)置
要告訴AngularJS將這個(gè)頁(yè)面渲染為一個(gè)應(yīng)用，需要做幾件事情。
使用ng-app告訴AngularJS應(yīng)該管理頁(yè)面中的哪一部分。如果你正在構(gòu)建一款純AngularJS應(yīng)用，你應(yīng)該把ng-app指令寫在<html>標(biāo)簽中。這里，我們演示讓AngularJS只管理頁(yè)面中的一部分，簡(jiǎn)單地在DIV標(biāo)簽中加入ng-app="MyTutorialApp"即可。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp'></div> </body> </html>現(xiàn)在，我們告訴了AngularJS這個(gè)DIV是一個(gè)angular應(yīng)用。然后，我們需要聲明使用哪一個(gè)控制器：
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'></div> </body> </html>MainController是我給控制器起的名字，你可以取任何更有意義的名字。Ok，現(xiàn)在MainController將可以控制DIV中的一切，但是這個(gè)控制器在哪？我們需要?jiǎng)?chuàng)建它！在index.html所在的目錄下新建名為app.js的JS文件，內(nèi)容如下：?
var app = angular.module('MyTutorialApp',[]);這個(gè)JS文件所做的是新建一個(gè)名為MyTotorialApp的AngularJS應(yīng)用，并且把它賦給了變量app，我們稍后會(huì)使用到它。現(xiàn)在我們需要再創(chuàng)建一個(gè)名為maincontroller.js的文件，內(nèi)容如下：
app.controller("MainController", function($scope){});這個(gè)文件為MyTotorialApp分配了一個(gè)名為MainController的控制器。這兩個(gè)JS文件其實(shí)可以合并為一個(gè)，但為了方便維護(hù)和容易理解，我把它們拆成兩個(gè)分離的文件。接下來(lái)，把這兩個(gè)JS文件都加載進(jìn)HTML頁(yè)面中。注意，app.js需要在maincontroller.js之前被加載進(jìn)來(lái)。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script><script src="app.js" type="text/javascript"></script><script src="maincontroller.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'></div> </body> </html>現(xiàn)在，我們的準(zhǔn)備工作已經(jīng)做完了，接下來(lái)看一個(gè)應(yīng)用是怎樣產(chǎn)生的。
Hello World
當(dāng)我們創(chuàng)建maincontroller.js的時(shí)候，你可能已經(jīng)注意到了$scope這個(gè)變量，它被當(dāng)做控制函數(shù)的參數(shù)，是我們分配控制器變量的地方，這些變量可以在HTML頁(yè)面的DIV中被使用。不明白沒關(guān)系，舉個(gè)栗子來(lái)說(shuō)明，在控制器內(nèi)聲明一個(gè)$scope變量。
app.controller("MainController", function($scope){$scope.welcome = "Hello World"; });在上面的代碼中我們新建了一個(gè)scope變量并分配一個(gè)字符串給它。接下來(lái)我們可以在HTML中訪問(wèn)它。
<!DOCTYPE html> <head><title>Learning AngularJS</title><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script><script src="app.js" type="text/javascript"></script><script src="maincontroller.js" type="text/javascript"></script> </head> <body><div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>{{welcome}}</div> </body> </html>我們?cè)贖TML中用{{}}(兩個(gè)花括號(hào))把welcome變量包起來(lái)，這樣AngularJS就知道該處理它了。注意，在這里welcome前面沒有加$scope。現(xiàn)在用瀏覽器打開index.html，你會(huì)看到如下內(nèi)容：?
現(xiàn)在你應(yīng)該大致上理解scope變量了，它們通過(guò)在HTML中用雙花括號(hào){{}}來(lái)訪問(wèn)。同時(shí)也應(yīng)該明白scope變量只在該控制器范圍內(nèi)有效，你不能從DIV之外訪問(wèn)到welcome變量。
總結(jié)
ng-app，ng-controller
$scope變量
轉(zhuǎn)載于:https://www.cnblogs.com/arccosxy/p/3805679.html
總結(jié)
以上是生活随笔為你收集整理的AngularJS基础01 从HelloWorld说起的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【Linux高级驱动】如何分析并移植网卡
- 下一篇： 计算机网络之网络概述：3、性能指标（速率