首頁 > web前端 > js教程 > 使用JavaScript的AngularJS函式庫編寫hello world的方法_AngularJS

使用JavaScript的AngularJS函式庫編寫hello world的方法_AngularJS

WBOY
發布: 2016-05-16 15:53:26
原創
1158 人瀏覽過

 本文展示了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&#63;
登入後複製

 
步驟 6: 在

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板