初识angularjs
之前有学习过一段时间的backbone，近期在同事的建议了稍稍的来了解了一下angularjs，和backbone一样，同是比较著名和流行的前端MVC框架。另外值得一提的是angularjs是由google组织开发的。
一开始看到angularjs的用法时还有些惊艳的，竟然可以这么操作DOM元素，可以说angularjs对html的标签进行了扩充。相比于backbonejs，它和DOM的结合是相当紧密，backbonejs本身对模板的支持感觉挺弱的。当然这取决于不同框架的设计目标不同。
另外再说MVC的事情，从目前所了解的angularjs来说，用它来写MVC的代码感觉不是那么清晰，它和DOM结合的如此紧密导致不同的层都要以页面为基础来做。从这点对比backbone来看，backbone中关于MVC的使用就清晰很多了。
因为目前还没大量的来使用angularjs进行练习，或者运用到项目中，所以随着以后不断的使用，或许会对angularjs有更深入的认识。
下面是一个练习的代码，简单的演示了angularjs对DOM的操作，也可以到这里进行在线查看：http://plnkr.co/edit/UHTR83x42XZpyg7wvX9z?p=preview
代码：
.. code:: html
<!doctype html>
<html ng-app="timeExampleModule">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script>
function GreetCtrl($scope) {
$scope.name = 'World';
}
function ListCtrl($scope) {
$scope.names = ['Igor', 'Misko', 'Vojta'];
}
function MyCtrl($scope) {
$scope.action = function() {
$scope.name = 'OK';
}
$scope.name = 'World';
}
angular.module('timeExampleModule', []).
// Declare new object called time,
// which will be available for injection
factory('time', function($timeout) {
var time = {};
(function tick() {
time.now = new Date().toString();
$timeout(tick, 1000);
})();
return time;
});
function ClockCtrl($scope, time) {
$scope.time = time
}
</script>
</head>
<body>
<div>
<div class="1">
1 + 2 = {{ 1 + 2 }}
</div>
<hr/>
<div class="2">
10 * 2 = {{10 * 2 }}
</div>
<hr/>
<div class="3">
<input type="text" ng-model="message"/>
<div>
{{ message }}
</div>
</div>
<hr/>
<div class"4">
<div ng-controller="GreetCtrl">
Hello {{name}}!
</div>
<div ng-controller="ListCtrl">
<input type="text" ng-model="filtername"/>
<ol>
<li ng-repeat="name in names|filter:filtername">{{name}}</li>
</ol>
</div>
</div>
<hr/>
<div ng-controller="MyCtrl">
Hello {{name}}!
<button ng-click="action()">
OK
</button>
</div>
<hr/>
<div>
<div ng-controller="ClockCtrl">
Current time is: {{ time.now }}
</div>
</div>
</div>
</body>
</html>代码中最后的一个注入的例子还是挺有意思的。
相关资源： angularjs视频教程：http://pan.baidu.com/share/link?shareid=421562&uk=724988755&third=15#dir/path=%2Fangularjs 官网文档：http://docs.angularjs.org/guide/concepts 12种前端框架：http://www.infoq.com/cn/news/2012/05/js-mvc-framework/