标签：
演示AngularJS简单的双向绑定功能示例
数据双向绑定
这应该算Angular比较特有的属性，概括来说，Angular通过监听变量的变化来实现双向数据绑定。传统技术上，当model改变时，开发与人员需要手动处理DOM元素并将属性反映到变化中。而在Angular中，程序员可以轻轻松松解决这种问题，省掉了很多的代码。
<!--本示例演示AngularJS简单的双向绑定功能--> <!doctype html> <!--html标签上加了一个 ng-app属性，意思是整个HTML都属于AngularJS控制--> <html ng-app> <head> <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script> </script> </head> <body> <div> <label>Name:</label> <!--input输入框加了一个 ng-model="yourName"，这样就表明input的value与内存中的变量yourName是双向绑定的--> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <!--h1标签内部有个{{yourName}}，这个表示内存中的yourName属性和h1节点的内容实现了双向绑定--> <h1>Hello {{yourName}}!</h1> </div> </body> </html> <!--传统的做法： 在input上添加change事件，当触发change事件后，获取input输入框的内容，再组合字符串，通过DOM操作修改h1的innerHTML，前提可能要给 input和h1加上id或者name属性。 大家应该能够很明显的感觉到AngularJS的优势了，不用写一行JS代码，就能实现一个很完美的功能。--> <!--上面的例子只是展示了一个简单的双向绑定功能，AngularJS既然是一个MVC框架，上面说的yourName是Model，HTML是View，那么*（Controller或者ViewModel）去哪了？-->
<!doctype html> <html ng-app> <head> <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script> </head> <body> <!--在div上加了一个ng-controller="testCtrl"，表示这个DIV内部所有元素都属于testCtrl管辖；--> <!--同时script加了一个函数testCtrl，这个函数有个$scope的参数，并且函数内给$scope.yourName赋了一个”world“的值， 而且还有个clearInputValue函数，这个$scope大家可以理解为ViewModel，ng Model的载体（或者说上下文）， 所有模板中使用的ng变量都在$scope上，初始化给$scope.yourName赋值说明input输入框的Value默认就为”world“；--> <div ng-controller="testCtrl"> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <!--界面上多了一个Button，button上有个ng-click="clearInputValue()"，ng-click表示给这个Button绑定了一个click事件， 点击Button执行clearInputValue函数，这个函数给$scope.yourName赋值了空字符串，清空了输入框的值。--> <button ng-click="clearInputValue()">Clear Input Value</button> <hr> <h1>Hello {{yourName}}!</h1> </div> <script> function testCtrl($scope) { $scope.yourName = "world"; $scope.clearInputValue = function () { $scope.yourName = ""; } } </script> </body> </html> <!--从这个例子中大家可以清楚的看到AngularJS是怎么样实现MV*的，具体传统的做法大家可以自行在脑海中想想， ng的实现方式是不是更加的简单，至此你有没有被ng所吸引？？？--> <!--大家看了上面的例子后，或许有些人就开始疑问了，每个controller绑定一个函数，这个函数的第一个参数是$scope， 所有的数据和方法都在$scope上下文里面，而且这个函数是全局函数，如果界面上有很多controller呢？不会有很多个全局函数吧？ 哈哈，其实ng早就想到了这一步，ng有自己的一套模块加载机制，而且还引入了依赖注入。-->
MVC(MVVM)模式
MVC顾名思义：Model-view-Controll设计模式，其实这个有点类似于Java的思想，模型、视图、控制器的分离。但是Angular又有点不同于传统的MVC，严格意义上说它是MVVM（model-view-viewModel）。Model是简单的javascript对象；ViewModel是$scope对象，Angular依靠$scope检测状态变化；Controller负责设置初始状态和参数化$scope方法用以控制行为；View是Angular解析渲染后生成的HTML。
MVC的核心是$scope
菜单切换示例
<!doctype html> <html ng-app="app"> <head> <meta charset="utf-8" /> <style> ul { list-style: none; clear: both; } ul > li { list-style: none; float: left; margin-left: 15px; display: block; } .active { background: #1f292e; color: #FFFFFF; } a { color: #000066; } .active > a { color: #FFFFFF; } [ng\\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak, .ng-hide { display: none !important; } ng\\:form { display: block; } .ng-animate-start { border-spacing: 1px 1px; -ms-zoom: 1.0001; } .ng-animate-active { border-spacing: 0px 0px; -ms-zoom: 1; } </style> </head> <body ng-cloak> <div ng-controller="testCtrl"> <ul> <li ng-class="{‘active‘:currentMenu == ‘menu1‘}"><a href="javascript:;" ng-click="selectMenu(‘menu1‘)">菜单1</a> </li> <li ng-class="{‘active‘:currentMenu == ‘menu2‘}"><a href="javascript:;" ng-click="selectMenu(‘menu2‘)">菜单2</a> </li> </ul> <br> <br> <div ng-if="currentMenu == ‘menu1‘"> 我是菜单1里面的内容 </div> <div ng-if="currentMenu == ‘menu2‘"> 我是菜单2里面的内容 </div> </div> <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script> <script> angular.module("app", []); angular.module("app").controller("testCtrl", ["$scope", function ($scope) { $scope.currentMenu = "menu1"; $scope.selectMenu = function (menu) { $scope.currentMenu = menu; } }]); </script> </body> </html> <!--我给ng-app指定了一个名称叫”app“，同时js代码使用angular.module("app", []);定义了一个名称为”app“的module， 同时用这个app module 的controller方法定义了一个testCtrl；定义module函数是angular对象上的静态方法，第一个参数传名称，第二个参数是一个数组， 这个数组表示这个module所引用的其他module，在这个例子中我们没有使用任何其他的module，所以传入一个空的数组，如果第二个参数不传，表示获取名称为”app“的module；--> <!--这个例子是大家在项目中经常遇见的菜单模块，页面共有2个菜单，默认选中菜单1，当选择哪个菜单， 下面的内容区域就显示选中菜单的内容，同时菜单的样式需要修改为选中状态； *关于显示哪个内容区域我使用了ng-if="currentMenu == ‘menu1‘"和ng-if="currentMenu == ‘menu2‘",顾名思义， ng-if意思是如果表达式为真编译并且显示ng-if内部的模板元素，如果为假，不显示任何内容； 至于选中菜单的样式，我使用了ng-class="{‘active‘:currentMenu == ‘menu1‘}", 意思就是currentMenu 为menu1时添加class ”active“，否则没有任何样式。 --> <!--上面的3个例子，很好的展示了如何开启一个ng的web，并且如何模块化的使用ng，如果你都看懂了,说明你已经掌握了如何使用ng-controller、数据的双向绑定，写模板， 并且初步接触了很多内置的指令（如：ng-app,ng-controller,ng-model,ng-if,ng-class,ng-click）。-->
TODOLIST的示例
<!DOCTYPE html> <html ng-app="todoApp"> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .done-true { text-decoration: line-through; color: grey; } </style> </head> <body> <h2>Todo</h2> <div ng-controller="TodoController"> <span>{{remaining()}} of {{todos.length}} remaining </span> [ <a href="" ng-click="archive()">archive</a> ] <ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add"> </form> </div> <script src="http://ngnice.com/lib/angular/1.2.16/angular.js"></script> <script> angular.module(‘todoApp‘, []) .controller(‘TodoController‘, [‘$scope‘, function($scope) { $scope.todos = [ {text:‘learn angular‘, done:true}, {text:‘build an angular app‘, done:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = ‘‘; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; }]); </script> </body> </html> <!--todolist的例子，默认界面上有2个todo，一个完成一个未完成，每个todo前面有个checkbox表示是否已完成， 下面有个输入框和添加按钮，输入内容点击添加则列表上会多一个todo。 大家可以先不用看下面的代码，自己尝试做一下，这个例子需要用到的几个directive：<li ng-repeat="todo in todos"> 表示循环todos列表， 在li标签内部就可以写模板语言显示每个todo的内容，如{{toodo.text}} 。-->
利用angularjs特性来快速建立算法视觉化,使用angularjs可以十分简单的实现一个算法视觉化
<!-- 利用angularjs特性来快速建立算法视觉化,使用angularjs可以十分简单的实现一个算法视觉化--> <!DOCTYPE html> <html ng-app> <head> <script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script> <style type="text/css"> .value-line { margin-bottom: 1px; background: green; color: white; } </style> </head> <body> <meta charset="UTF-8"> <h1>冒泡排序算法视觉化</h1> <div ng-controller="ctrl"> <div class="value-line" ng-repeat="i in data" style="width:{{i*10}}px;">{{i}}</div> <button ng-click="start()">排序</button> <button ng-click="reset()">重置</button> <span style="color:red">{{alertMsg}}</span> </div> <script type="text/javascript"> // Code goes here function ctrl($scope,$timeout){ var defaultData=[37,28,29,24,21,11,5,10,4,3,8,1,25,12,20,30]; $scope.reset=function(){ $scope.data=defaultData.map(function(i){ return i; }); pointer=0; checklen=$scope.data.length; $scope.alertMsg=""; } var sorting=function(){ var data=$scope.data; if(data[pointer]>data[pointer+1]) { var tmp=data[pointer]; data[pointer]=data[pointer+1]; data[pointer+1]=tmp; } pointer++; if( pointer>=checklen){ checklen--; pointer=0; } if(checklen <=0){ $scope.alertMsg="排序结束"; }else{ $timeout(sorting,100); } }; $scope.start=function(){ $timeout(sorting,100); } $scope.reset(); } </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/Bobby0322/p/5128266.html
