AngularJS Hello World 代碼執行個體，隻需 6 步 【已翻譯100%】

本文展示了angularjs架構實作的hello world代碼示例.

如下是一些你在看hello world 示例和接下來的代碼示例時需要重點關注的方面.

ng-app, ng-controller, ng-model 指令

帶有兩個大括弧的模闆

步驟 1: 在部分包含angular javascript

将下面的代碼包含入

中，以引入 angularjs javascript 檔案. 可以用如下寫法從 google 管理的庫 獲得最新的代碼.

步驟 2: 将 ng-app 指令應用到 元素

如下将ng-app指令應用到 元素. 可以選擇給app指定名稱. 它可以被簡單的寫作

ng-app>. 這一指令被用來标記angular會識别作為我們應用程式的根元素的html元素. 這給了應用程式開發者告訴angular整個html頁面或者隻是其中一部分應該作為angular應用程式來對待的自由.

将 ng-controller 指令應用到

元素. controller 指令可以被應用在任何元素上，比如div。在下面的代碼中，, “helloctrl” 是控制器的名稱，可以被放在元素處中的控制器代碼引用.

步驟 4: 将ng-model指令應用到輸入元素

可以使用ng-model指令将輸入同模型綁定在一起.

步驟 5: 編寫模闆代碼

下面是展示名稱為“name”的模型的模型值的模闆代碼. 注意名稱為“name”的模型被綁定到了步驟四中的輸入上.

步驟 6: 在

向下面這樣在script元素中建立控制器代碼. 在下面的代碼中， “helloapp”是在元素中使用ng-app指令定義了的子產品的名稱. 接下來的一行代碼展示了用在

元素中使用ng-controller指令定義的名稱“helloctrl”建立一個控制器. 控制器 “helloctrl”被注冊到了這個子產品——“helloapp”. 最後一行代碼展示将模型同 $scope 對象關聯了起來.

完整的代碼請看這裡。