AngularJs Understanding Angular Templates

NO IMAGE

  angular template是一個宣告規範,與model、controller的資訊一起,渲染成使用者在瀏覽器中所看到的檢視。它是靜態的DOM,包括HTML、CSS、angular特別的元素和angular指定的元素屬性。angular元素和屬性指示angular去擴充套件行為以及將template DOM轉換為動態檢視的DOM。

  下面是我們可以在template中使用的angular元素已經元素屬性的型別:

Directive(//www.jb51.net/article/91739.htm) – 一個擴充套件現有DOM元素或者代表一個可複用的DOM元件的屬性或者元素,即控制元件。
Markup(http://code.angularjs.org/1.0.2/docs/api/ng.$interpolate) – 通過雙大括號表示法{{}}來繫結表示式到元素中,是內建的angular標記。
Filter(http://code.angularjs.org/1.0.2/docs/guide/dev_guide.templates.filters)- 用於格式化我們給使用者看的資料。
Form controls (//www.jb51.net/article/91744.htm)- 讓我們驗證使用者輸入。

  注意:除了可以在模版中宣告上面的元素以外,我們也可以在javascript程式碼中訪問這些元素。

  下面的程式碼片段,展示了一個簡單的angular template,它由標準的HTML標籤以及angular directive、花括號繫結的expression({{expression}},//www.jb51.net/article/91742.htm)組成。


<!DOCTYPE html>
<!--ng-app,定義應用範圍,在這裡建立root scop-->
<html ng-app>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>template</title>
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<!--
ng-cloak,在編譯後會去掉的class
ng-controller,一個directive,用於指定當前的模版對應的Controller為MyController
-->
<body class="ng-cloak" ng-controller="MyController">
<!--
ng-model,directive,用於指定input的值對應的model為foo。
-->
<input type="text" ng-model="foo" value=""/>
<!--
ng-click,directive,單擊後需要做的事情,可以是expression,如 buttonText = '1';
也可以是呼叫函式,如下面所示。
{{buttonText}},用於展示當前scope鏈中能夠或得到的buttonText的值
-->
<button ng-click="changeFoo()">{{buttonText}}</button>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
function MyController($scope) {
$scope.buttonText = "預設的東東";//初始化model buttonText
$scope.foo = "修改我吧";//初始化model foo
$scope.changeFoo = function() {//宣告changeFoo
this.buttonText = this.foo;//將foo的值賦給buttonText
//這裡使用的this,就是指向當前$scope的。
};
}
</script>
</body>
</html>

  在一個簡單的單頁應用中,模版由HTML、CSS以及angular directive組成,都包含在一個HTML檔案中(通常叫它index.html)。但在一些更加複雜的應用中,我們可以在一個頁面中,通過使用“partials”來顯示多個檢視,即將模版分段存放在獨立的HTML檔案中。我們可以在主頁面中使用$route服務(http://code.angularjs.org/1.0.2/docs/api/ng.$route)與ngView directive(http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngView)來協同“include”那些partials。這個技術的一個例子,展示在angular tutorial(http://code.angularjs.org/1.0.2/docs/tutorial/index)的第七、八步驟中。(這部分我稍後再玩-_-!)

以上就是對 AngularJs Understanding Angular Templates的資料整理,後續繼續補充相關資料,謝謝大家對本站的支援!

您可能感興趣的文章:

AngularJS延遲載入html templateAngularJS ng-bind-template 指令詳解AngularJS ng-template寄宿方式用法分析淺談AngularJs指令之scope屬性詳解angularJs關於指令的一些冷門屬性詳解AngularJS使用帶屬性值的ng-app指令實現自定義模組自動載入的方法Angular.JS中的指令引用template與指令當做屬性詳解