本文展示了AngularJS架構實現的hello world程式碼範例.
如下是一些你在看Hello World 樣本和接下來的程式碼範例時需要重點關注的方面.
步驟 1: 在<Head>部分包含Angular Javascript
將下面的程式碼封裝含入 <head></head> 中，以引入 Angularjs javascript 檔案. 可以用如下寫法從 Google 管理的庫 獲得最新的代碼.
| 1 2 | <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script> |
步驟 2: 將 ng-app 指令應用到 <Html> 元素
如下將ng-app指令應用到 <html> 元素. 可以選擇給app指定名稱. 它可以被簡單的寫作<html ng-app>. 這一指令被用來標記Angular會識別作為我們應用程式的根項目的html元素. 這給了應用程式開發人員告訴Angular整個html頁面或者只是其中一部分應該作為Angular應用程式來對待的自由.
| 1 | <html ng-app="helloApp"> |
步驟 3: 將 ng-controller 指令應用到 <Body> 元素
將 ng-controller 指令應用到 <Body> 元素. controller 指令可以被應用在任何元素上，比如div。在下面的代碼中，, “HelloCtrl” 是控制器的名稱，可以被放在<head>元素處<script></script>中的控制器代碼引用.
| 1 | <body ng-controller="HelloCtrl"> |
步驟 4: 將ng-model指令應用到輸入元素
可以使用ng-model指令將輸入同模型繫結在一起.
| 1 | <input type="text" name="name" ng-model="name"/> |
步驟 5: 編寫模板代碼
下面是展示名稱為“name”的模型的模型值的模板代碼. 注意名稱為“name”的模型被綁定到了步驟四中的輸入上.
| 1 | Hello {{name}}! How are you doing today? |
步驟 6: 在<Script>中建立控制器代碼
向下面這樣在script元素中建立控制器代碼. 在下面的代碼中， “helloApp”是在<html>元素中使用ng-app指令定義了的模組的名稱. 接下來的一行代碼展示了用在<body>元素中使用ng-controller指令定義的名稱“HelloCtrl”建立一個控制器. 控制器 “HelloCtrl”被註冊到了這個模組——“helloApp”. 最後一行代碼展示將模型同 $scope 對象關聯了起來
?| 1 2 3 4 5 6 | <script> var helloApp = angular.module("helloApp", []); helloApp.controller("HelloCtrl", function($scope) { $scope.name = "Calvin Hobbes"; }); </script> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
