AngularJS 初印象------对比 Asp.net MVC
之前就早耳闻前端MVC的一些框架，微软自家的Knockout.js,google家的AngularJs，还有Backone。但未曾了解,也不解为什么前端也要这么分。这两天看了AngularJs的官方教程倒是吃了一惊（专业前端的就不要见怪我的out了），这小小的js，五脏俱全，不但有model,controller,view,这三个重要元素，还有Templates,Filter,Routing,依赖注入的DI都有，还有一套 Jasmine 框架下的单元测试！心里一想这javascript前后都搞定了嘛，也许这样的“轻装上阵”就是促成SPA流行的一个重要原因吧。
我们来对比一下AngularJs的MVC（其实更偏向于MVVM）和Asp.Net MVC 。给我一样的奥特曼（out man）认识下。
先看几段AngularJs的代码。
<html ng-app="phonecatApp"> //除了申明这是一个AngularJS 应用之外，会创建全局的root scope,这个就相当于Asp.net MVC中繁多的context
<head>
...
<script src="../bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">// 这里就是声明，这个body范围类的都是PhoneListCtrl这个Controller的控制范围。
Search: <input ng-model="query"> // 定义query是一个模型，
<ul>
<li ng-repeat="phone in phones| filter:query">//这里phones 也是一个model。 而这个ng-repeat就相当于Asp.net MVC中cshtml中的foreach语法。但这个filter又不是Asp.net MVC中用于AOP的Filter，这里就是作为过滤的一个条件。
{{phone.name}}//双大括号表示这里是和模型中的数据绑定的。 相当于Asp.net MVC 中的@符号
<p>{{phone.snippet}}</p>
</li>
（对比图）
</ul>
</body>
</html>
//controllers.js
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {//这里就把phonecatApp这个应用和控制器PhoneListCtrl关联了起来，并负责把模型数据赋值给$scope.这个
$scope 就是上面提到的context，带有$都是表示Angular提供的Services，这里作为参数传递进来，就应用了AngularJs的DI。
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.'},
{'name': 'Motorola XOOM™ with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
'snippet': 'The Next, Next Generation tablet.'}
];
});
当然也可以通过请求的方式获取数据
phonecatApp.controller('PhoneListCtrl',function($scope, $http){//这里也是用了DI
$http.get('phones/phones.json').success(function(data){
$scope.phones = data;
});
AngularJs的DI，倒是很像Asp.Net MVC 模型绑定，不像我们平时在面向对象中的DI/IOC，都是通过一个属性或者接口进行注入，而达到解耦的目的。但它的注入器injector，是在应用被加载的时候就被创建的，它的职责就是加载指定模块，以及这个模块中定义的所有服务(service 像$http,$localtion,$route)的提供者（provider）,当对象被请求时，就调用这些provider的方法来实现这些service，而且provider提供配置的api来控制service，这样看来就有DI的味道了。有更详细的解释 Understanding Dependency Injection.
一个应用的模型都是存在于$scope中的，$scope 用官网的原话就是 它像胶水一样，让模板，模型和控制器一起工作，而且让他们保持分离但同步，模型的改变会映射到视图上，视图的改变也会反映到模型上。
看到就是这样的一个效果，没有其他代码，在输入框中输入字符，就能对右边的内容进行检索，并实时更新。query这个模型改变，影响了phones这个模型值的改变，导致看到不同的结果。
图一
图二
整个机制如下：
这一点倒是让我眼前一亮。效果很像JqueryUi里面的autocomplete. bootstrap里面的typeahead ,但更灵活了。排序什么的就很简单。filter后面跟对应的属性就行了。
（bootstrap2 typeahead）
再简单的看看它的路由
phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',//相当于分布式图
controller: 'PhoneListCtrl' //控制器
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
对比Asp.net MVC的路由设置
context.MapRoute(
null,
"RemoteData",//
new { controller = "RemoteData", action = "Data" }//name = UrlParameter.Optional
);
context.MapRoute(
null,
"FileManager/{action}",
new { controller = "FileManager", action = "Index" }
);
//....
这个when的写法让人心存忌讳。有些像if语句了。还是倾向于Asp.net MVC，只写你特定的规则就行了，不必一个一个url的去对应。最后用一张图简单的总结下，当然这么做是不完全正确的。毕竟我对AngularJs了解不够深，又是不同层面的语言。对比也不是要拿谁把谁比下去。
主要是想做个参照，看彼此代码的时候联系起来就容易理解一些。因为这些天看到BlogEngine源码中，前端UI的部分用到了AngularJs，当时就看得有点傻，这才了解AngularJs的。到现在觉得，AngularJs 非常不同于Jquery,Kendo，Bootstrap这些同样基于Javascript的专门处理UI的前端类库，而是一个轻量级的MVC/MVVM开发框架，更关注于模型的改变，数据格式是Json。不用其他的高级语言，也能开发出一个完整的应用；这种绑定机制可以很便捷的实现一些功能。至于SEO，google创造了它，问google吧。 我是觉得SEO只是辅助，先是技术发展，规范形成，再是SEO如何去匹配这种技术。只是当下对SEO会有些些不友好。
本文就到这里，希望对你有帮助，我的理解有限，欢迎拍砖。:）
AngularJS 初印象------对比 Asp.net MVC的更多相关文章
- AngularJS and Asp.net MVC
AngularJS 初印象------对比 Asp.net MVC 之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone.但未曾了 ...
- AngularJS2 + ASP.NET MVC项目
环境:VS2015, NodeJS:v 6.5, npm: v3.10, AngularJs 2 通过将ASP.NET MVC项目与Angualr 2官网上的quick start整合的过程中遇到些问 ...
- ASP.NET MVC 的 WebGrid 的 6 个重要技巧 【已翻译100%】
ASP.NET MVC 中 WebGrid 的 6 个重要技巧 https://www.oschina.net/translate/webgrid-in-asp-net-mvc-important-t ...
- 7 天玩转 ASP.NET MVC — 第 1 天
0. 前言正如标题「7 天玩儿转 ASP.NET MVC」所言,这是个系列文章,所以将会向大家陆续推出 7 篇.设想一下,一天一篇,你将从一个愉快的周一开始阅读,然后在周末成为一个 ASP.NET M ...
- 7 天玩转 ASP.NET MVC - 第 1 天
0. 前言 正如标题「7 天玩儿转 ASP.NET MVC」所言,这是个系列文章,所以将会向大家陆续推出 7 篇.设想一下,一天一篇,你将从一个愉快的周一开始阅读,然后在周末成为一个 ASP.NET ...
- 在Asp.net MVC 3 web应用程序中，我们会用到ViewData与ViewBag，对比一下：
Asp.net MVC中的ViewData与ViewBag ViewData ViewBag 它是Key/Value字典集合 它是dynamic类型对像 从Asp.net MVC 1 就有了 ASP. ...
- ASP.NET MVC和EF集成AngularJS开发
参考资料: 如何在ASP.NET MVC和EF中使用AngularJS AngularJS+ASP.NET MVC+SignalR实现消息推送 [AngularJs + ASP.NET MVC]使用A ...
- 如何在 ASP.NET MVC 中集成 AngularJS（3）
今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...
- 如何在 ASP.NET MVC 中集成 AngularJS（2）
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
随机推荐
- AX2009按照批次生产日期预留
AX2009如果想按照批处理号预留,它默认是按照InventBatchId排序的,但并不是InventBatchd小的批次的生产日期就早,所以这个逻辑得改一下,让它按照InventBatch的Prod ...
- windows10-桌面图标不见了，资源管理器的桌面中可以看到？？
问题描述: 1. 桌面的图标,在桌面上看不到, 但是在通过资源管理器可以看到, 图标仍然在桌面 2. 桌面仍然可以右击, 就是看不见新建或者拷贝到桌面的所有图标 解决方案: Google 后请参考: ...
- form 上传 html 代码
$("#fm").form('submit',{ url: url, onSubmit: function(){ //进行表单验证 $scope.editor.sync(); va ...
- 国内外著名B2C系统介绍兼比较ASP.NET和PHP
国内外著名B2C系统介绍兼比较ASP.NET和PHP 2010-06-08 11:44 来源: 我来投稿 我要评论 中介交易 SEO诊断淘宝客 站长团购 云主机 A5外包 国内外著名 ...
- [2015hdu多校联赛补题]hdu5371 Hotaru's problem
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5371 题意:把一个数字串A翻过来(abc翻过来为cba)的操作为-A,我们称A-AA这样的串为N-se ...
- 屏蔽input导致的回车提交事件
onkeypress="if(event.keyCode == 13) return false;"
- 新手接触java
第二个程序,求同时被3,5,7整除
- PHP高级——抽象类与接口的区别(转)
在学习PHP面向对象时,都会在抽象类与接口上迷惑,作用差不多为什么还那么容易混淆,何不留一去一?但是事实上两者的区别还是很大的,如果能够很好地运用PHP的两个方法,面向对象的程序设计将会更加合理.清晰 ...
- 【随笔】vmstat性能监测
vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况.相比top,vmstat可以看到整个机 ...
- 简述UICollectionView 使用
一.介绍 UICollectionView类负责管理数据的有序集合以及以自定义布局的模式来呈现这些数据,它提供了一些常用的表格(table)功能,此外还增加了许多单栏布局.UICollectionVi ...