|
在本章中，我們將討論如何建立AngularJS庫在Web應(yīng)用程序開發(fā)中使用。我們還將簡要地學(xué)習(xí)目錄結(jié)構(gòu)和它的內(nèi)容,。 打開鏈接https:///，會看到有兩個下載AngularJS庫的選項： View on GitHub- 單擊此按鈕跳到GitHub,，并獲得所有最新的腳本,。 Download- 或者點擊此按鈕，會看到屏幕如下： 此屏幕給出了使用AngularJS如下多種選擇： Downloading and hosting files locally 有兩種不同的選擇：舊版和最新版,。舊版是版本低于1.2.x版本,，最新是1.3.x版本。 我們也可以使用縮小,，非壓縮或壓縮版本,。 CDN access: 也可以使用一個CDN。CDN全世界可訪問,，它放在谷歌主機區(qū)域性數(shù)據(jù)中心,。 這也提供了一個優(yōu)點，即如果訪問者的網(wǎng)頁已經(jīng)從相同的CDN 下載了AngularJS的副本,，它不必再重新下載,。 在本教程中我們使用的是CDN版本庫 示例 現(xiàn)在讓我們使用AngularJS庫編寫一個簡單的例子。讓我們創(chuàng)建一個HTML文件 first-angular.html 如下： <!doctype html>
<html>
<head>
<script src="https://ajax./ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<title>第一個AngularJS程序</title>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>你好 ,！第一個{{helloTo.title}}程序示例</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>
1234567891011121314151617181920復(fù)制代碼類型：[html]下面的章節(jié)詳細描述上面的代碼： 包括AngularJS 我們已經(jīng)包括了AngularJS的JavaScript文件到HTML頁面中,，所以我們可以用AngularJS： <head> <script src="http://ajax./ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> 1234復(fù)制代碼類型：[html] 在其官方網(wǎng)站檢查AngularJS的最新版本。 指向AngularJS應(yīng)用程序 接下來我們指示HTML的哪一部分包含了AngularJS應(yīng)用程序,。這可以通過ng-app屬性到AngularJS應(yīng)用程序的根HTML元素,。可以把它添加到HTML元素或body元素,，如下所示： <body ng-app="myapp"> </body>12復(fù)制代碼類型：[html] 視圖 這是視圖的一部分： <div ng-controller="HelloController" >
<h2>Welcome {{helloTo.title}} to the world of kaikeba tutorials!</h2>
</div>
1234復(fù)制代碼類型：[html]ng-controller 告訴AngularJS什么控制器使用在視圖中,。helloTo.title告訴AngularJS將命名helloTo.title的值寫入到HTML的“model”中。 控制器 這里是控制器部分： <script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>1234567復(fù)制代碼類型：[html]此代碼注冊一個名為HelloController的控制器功能,，在myapp模塊,。 我們將學(xué)習(xí)更多關(guān)于它們在各自的模塊和控制器章節(jié)?？刂破骱瘮?shù)注冊在Angular中,，通過angular.module(...).controller(...) 的函數(shù)來調(diào)用。 傳遞給控制器函數(shù)的$scope參數(shù)是模型,?？刂破骱瘮?shù)增加了helloTo的 JavaScript對象，并在該對象它增加了一個標題字段,。 當頁面在瀏覽器中加載,，輸出下面的結(jié)果： HTML文檔加載到瀏覽器，并且由瀏覽器進行評估計算。AngularJS JavaScript文件被加載,，Angular 全局對象被創(chuàng)建,。接下來，JavaScript一個注冊控制器的函數(shù)被執(zhí)行,。 接下來AngularJS通過HTML掃描，以尋找AngularJS應(yīng)用程序和視圖,。當視圖的定位后,，它連接視圖到對應(yīng)的控制器函數(shù)。 接下來,，AngularJS執(zhí)行控制器函數(shù),。然后，它呈現(xiàn)通過控制器模型數(shù)據(jù)來自填充的視圖,。此時網(wǎng)頁已準備就緒,。 |
|
|
來自： 碼農(nóng)9527 > 《Python》
