標籤：建議 put [] 依賴注入 copy 百度 表示 ret dos
AngularJS誕生於2009年，由Misko Hevery 等人建立，後為Google所收購。是一款優秀的前端JS架構，已經被用於Google的多款產品當中。
AngularJS有著諸多特性，最為核心的是：MVC、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。
-----------百度百科
下面做入門介紹，本篇主要以代碼的形式解析。
1.在web頁面引入angularJS的js檔案。
可以通過官網下載，也可以在百度上搜尋，建議從官網上下載。
http://www.angularjs.net.cn/這個中文網地址。上面也有相關教程。
2.程式碼分析
下面是copy來的例子：
<!DOCTYPE html><html lang="en" ng-app="todoApp"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="angular.min.js"></script> <script>angular.module(‘todoApp‘, []) //定義模組 .controller(‘TodoListController‘, function() { //定義控制器 var todoList = this; todoList.todos = [ //定義一些初始化的屬性 { text: ‘learn AngularJS‘, done: true }, { text: ‘build an AngularJS app‘, done: false } ]; todoList.addTodo = function() { //定義方法 todoList.todos.push({ text: todoList.todoText, done: false }); todoList.todoText = ‘‘; }; todoList.remaining = function() { //定義方法 var count = 0; angular.forEach(todoList.todos, function(todo) { //遍曆todos count += todo.done ? 0 : 1; }); return count; }; todoList.archive = function() { //定義方法 var oldTodos = todoList.todos; todoList.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) todoList.todos.push(todo); }); }; });</script></head><body> <div ng-controller="TodoListController as todoList"> <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span> [ <a href="" ng-click="todoList.archive"></a> ] <ul> <li ng-repeat="todo in todoList.todos"> <lable> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </lable> </li> </ul> <form ng-submit="todoList.addTodo()"> <input type="text" ng-model="todoList.todoText" size="30" placeholder="請輸入新的項目"> <input type="submit" value="add"> </form> </div> <div ng-app="myApp" ng-controller="myCtrl"> 名字: <input ng-model="name"> </div> <script> var app = angular.module(‘myApp‘, []); app.controller(‘myCtrl‘, function($scope) { $scope.name = "John Doe"; }); </script></body></html>
其中ng-app是指定一個angularJS應用。
對應js代碼為：angular.module("todoApp",[]);定義一個module模組
ng-controller指定一個控制器，指明該標籤下所有的子項目都歸該控制器管理。
對應js代碼為： .controller(‘TodoListController‘, function() {});定義一個控制器
一個ng-app可以定義多個控制器。
本例是通過var todoList=this;讓todoList代替了這個控制器。
通過定義todoList的屬性和方法向外暴露這個控制器的可用屬性和方法。
可以看見在html中是通過todoList屬性的名字對其進行引用的。
其中{{}}代表資料繫結。
ng-model：表示把前台是資料繫結到控制器中，當然後台初始化有資料，也會顯示在前台。
ng-submit：定義在form標籤中，代碼提交表單，也可以在button標籤添加ng-click達到同樣的效果。
ng-repeat：重複屬性，會對需要遍曆的元素產生對應個數的標籤。
上述例子中就會產生對應todoList數目的span標籤。
屬性應用直接是todoList.todos。
方法的引用則為：todoList.addTodo()。 當然這隻是其中一個暴露的方法。以後的篇章會介紹另外的。
AngularJS的簡單使用(入門級)
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
