本期更新，博主將給大家分享一些AngularJs常用的一些屬性和方法，AngularJS 是由 Google 的員工 Miško Hevery 從 2009 年開始著手開發。這是一個非常好的構想，該項目目前已由 Google 正式支持，有一個全職的開發團隊繼續開發和維護這個庫。AngularJS 是一個 JavaScript 框架。它是一個以 JavaScript 編寫的庫。因此，有一定JavaScript基礎的朋友會更容易理解，其中的一些用法也可參照Javascript的使用方法。
一、AngularJS入門之指令與表達式
AngularJS 通過 指令 擴展了 HTML，且通過 表達式 綁定數據到 HTML。
【AngularJS常用指令】
1、ng-app:聲明Angular所管轄的區域。一般寫在body或html上，原則上一個頁面只有一個；
<body ng-app=""></body>
2、ng-model:把元素值（比如輸入域的值）綁定到應用程序的變量中。
<input type="text" ng-model="name"/>
3、ng-bind:把應用程序變量中的數據綁定到 HTML視圖中。可用表達式{{ }}替代；
<div ng-bind="name"></div><div>{{name}}</div>4、ng-init:初始化 AngularJS應用程序中的變量。
<body ng-app="" ng-init="name=123">
5、表達式： {{}} 綁定表達式，可以包含文字、運算符和變量。但表達式在網頁加載瞬間會看到{{}},所以可以用ng-bind=""替代
{{ 5 +""+ 5 + ',Angular'}}
【基本概念】
1、指令：AngularJS中，通過擴展HTML的屬性提供功能。所以，ng-開頭的新屬性，被我們成為指令
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>AngularJS入門</title> </head><body ng-app="" ng-init="name=123"> <input type="text" id="input" ng-model="name"/> <div id="div" ng-bind="name+',Angular'">{{name}}</div> <input type="text" id="input2" ng-model="name"/> <p>我的第一個表達式： {{ 5 +""+ 5 + ',Angular'}}</p> </body> <script src="libs/jquery-3.1.1.js"></script> <script src="libs/angular.js"></script> <script type="text/javascript">// var input1 = document.getElementById("input");// var div = document.getElementById("div");// // input1.onkeyup = function(){// div.innerHTML = input1.value;// }// $("#input").keyup(function(){// $("#div").html($("input").val());// }); </script></html>二、AngularJS中的MVC與作用域
[MVC三層架構]
1、Model(模型)：應用程序中用于處理數據的部分。(保存或修改數據到數據庫、變量等)。AngularJS中的Model特指的是：數據
View(視圖)：用戶看到的用于顯示數據的頁面；
Controller(控制器)：應用程序中處理用戶交互的部分。負責從視圖讀取數據，控制用戶輸入，并向模型發送數據。
新聞熱點
疑難解答
圖片精選
