本文展示了AngularJS框架實現的hello world程式碼範例.
如下是一些你在看Hello World 範例和接下來的程式碼範例時需要重點關注的方面.
步驟 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: 在