使用JavaScript的AngularJS函式庫編寫hello world的方法_AngularJS
- WBOY原創
- 2016-05-16 15:53:261195瀏覽
本文展示了AngularJS框架實現的hello world程式碼範例.
如下是一些你在看Hello World 範例和接下來的程式碼範例時需要重點關注的方面.
- ng-app, ng-controller, ng-model 指示
- 兩個大括弧的模板
步驟 1: 在部分包含Angular Javascript
將下面的程式碼包含入
中，以引入 Angularjs javascript 檔案. 可以用以下寫法從 Google 管理的函式庫 取得最新的程式碼.<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
步驟 2: 將 ng-app 指令套用到 元素
如下將ng-app指令應用到 元素. 可以選擇給app指定名稱. 它可以被簡單的寫作. 這一指令被用來標記Angular會識別作為我們應用程序的根元素的html元素. 這給了應用程式開發者告訴Angular整個html頁面或只是其中一部分應該作為Angular應用程式來對待的自由.
<html ng-app="helloApp">
步驟 3: 將 ng-controller 指令套用到 元素
將 ng-controller 指令套用到
元素. controller 指令可以應用在任何元素上，例如div。在下面的程式碼中，, “HelloCtrl” 是控制器的名稱，可以被放在元素處<script></script>中的控制器程式碼引用.<body ng-controller="HelloCtrl">
步驟 4: 將ng-model指令套用到輸入元素
可以使用ng-model指令將輸入同模型綁定在一起.
<input type="text" name="name" ng-model="name"/>
步驟 5: 寫模板程式碼
下面是展示名稱為「name」的模型的模型值的範本代碼. 注意名稱為「name」的模型被綁定到了步驟四中的輸入上.
Hello {{name}}! How are you doing today?
步驟 6: 在<script>中建立控制器程式碼</script>
向下面這樣在script元素中創建控制器代碼. 在下面的程式碼中， “helloApp”是在元素中使用ng-app指令定義了的模組的名稱. 接下來的一行程式碼展示了用在
元素中使用ng-controller指令定義的名稱“HelloCtrl”創建一個控制器. 控制器“HelloCtrl”被註冊到了這個模組——“helloApp”. 最後一行程式碼展示將模型同$scope 物件關聯了起來
<script>
var helloApp = angular.module("helloApp", []);
helloApp.controller("HelloCtrl", function($scope) {
$scope.name = "Calvin Hobbes";
});
</script>
完整的程式碼請看這裡。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn