angular學習(七)—— Template

來源地址:http://blog.csdn.net/lastsweetop/article/details/54585484

在Angular中,模板是包含一些特定元素和屬性的HTML,Angular將模板結合模型和控制器的信息在瀏覽器中以動態視圖的形式呈現給用戶。

下面是你可以使用的angular元素和屬性:

  • Directive — 增強現有的DOM元素或者展現可重複的DOM組件
  • Markup — 雙大括號是angular的內置標記,將表達式和元素綁定
  • Filter — 格式化數據用於顯示
  • Form controls — 用於驗證用戶輸入

    下面代碼是一個帶有指令和雙大括號表達式的模板

<html ng-app>
 <!-- Body 標籤擴展了ngController指令  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button標籤擴展了ngClick指令,
         雙大括號字符串表達式buttonText -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="angular.js">
 </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

簡單的app只需要一個html文件,裏面的模板由HTML,CSS,和angular指令構成。

複雜一點的app,你可以在一個主頁面通過partials顯示不同的視圖(partials是一個單獨的html文件,文件內容是模板段),你也可以用ngView指令加載partials,這些partials由$route服務配置。 

發佈了29 篇原創文章 · 獲贊 16 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章