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会有些些不友好。

本文就到这里，希望对你有帮助，我的理解有限，欢迎拍砖。:）

 
 
分类: MVC

AngularJS and Asp.net MVC的更多相关文章

  1. ABP示例程序-使用AngularJs，ASP.NET MVC，Web API和EntityFramework创建N层的单页面Web应用

    本片文章翻译自ABP在CodeProject上的一个简单示例程序,网站上的程序是用ABP之前的版本创建的,模板创建界面及工程文档有所改变,本文基于最新的模板创建.通过这个简单的示例可以对ABP有个更深 ...

  2. AngularJS与ASP.NET MVC登录超时解决方案

    问题: 1.在Action中判断Ajax请求的方法Request.IsAjaxRequest()始终是false 2.返回给前台StatusCode和HttpUnauthorizedResult,前台 ...

  3. 如何在 ASP.NET MVC 中集成 AngularJS（1）

    介绍 当涉及到计算机软件的开发时,我想运用所有的最新技术.例如,前端使用最新的 JavaScript 技术,服务器端使用最新的基于 REST 的 Web API 服务.另外,还有最新的数据库技术.最新 ...

  4. [渣翻译] 在ASP.NET MVC WebAPI项目中使用 AngularJS

    原文地址http://blog.technovert.com/2013/12/setting-up-angularjs-for-asp-net-mvc-n-webapi-project/ 我们最近发布 ...

  5. ABP 教程文档 1-1 手把手引进门之 AngularJs, ASP.NET MVC, Web API 和 EntityFramework（官方教程翻译版 版本3.2.5）含学习资料

    本文是ABP官方文档翻译版,翻译基于 3.2.5 版本 转载请注明出处:http://www.cnblogs.com/yabu007/  谢谢 官方文档分四部分 一. 教程文档 二.ABP 框架 三. ...

  6. Angularjs 通过asp.net web api认证登录

    Angularjs 通过asp.net web api认证登录 Angularjs利用asp.net mvc提供的asp.net identity,membership实现居于数据库的用户名/密码的认 ...

  7. ASP.NET MVC和EF集成AngularJS开发

    参考资料: 如何在ASP.NET MVC和EF中使用AngularJS AngularJS+ASP.NET MVC+SignalR实现消息推送 [AngularJs + ASP.NET MVC]使用A ...

  8. 如何在 ASP.NET MVC 中集成 AngularJS（3）

    今天来为大家介绍如何在 ASP.NET MVC 中集成 AngularJS 的最后一部分内容. 调试路由表 - HTML 缓存清除 就在我以为示例应用程序完成之后,我意识到,我必须提供两个版本的路由表 ...

  9. 如何在 ASP.NET MVC 中集成 AngularJS（2）

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

随机推荐

  1. Java工程(3)——但从谈论用户的角度UI图案

    前言: 海南项目宣告竣工,验收之日,除部分代码有待优化外,亟待改进的就是界面. 米老师说:连你都忍不住去拖下滚动栏,你还指望用户用的舒坦吗? 顿悟: 业务.功能也许是软件的核心,技术也许是软件的精髓. ...

  2. ABP应用层——应用服务（Application services）

    ABP应用层——应用服务(Application services) 点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之15.ABP应用层——应用服务(Applic ...

  3. NYNU_省赛选拔题(6)

    题目描述 有一天,小米找到了一个藏宝的迷宫地图,迷宫在一个沙漠里有,迷宫里面有许多宝藏.迷宫里可能有N个藏宝地点,用1到K标记.藏宝地点之间最多有一条通路相连.标记1为迷宫的进出口. 他已经知道其中K ...

  4. crawler_爬虫开发的准备工作【工具】

    俗话说工欲善其事必先利其器,做java网络爬虫开发分析网页的分析工具,抓包工具比不可少,一下是个人常用的几个工具. 1.firefox低版本是为了支持httpwather , ie各个版本都支持htt ...

  5. uva 11987 Almost Union-Find （并检查集合）

    标题效果: 三操作. 1. 合并两个集合 2.代替所述第二组的第一个元素 3.输出设置数量,并.. IDEAS: 使用p该元素的记录数,其中集合,建立并查集. #include <cstdio& ...

  6. Swift中文手册 -- The Basics

    原文:Swift中文手册 -- The Basics 基础部分 Swift 是 iOS 和 OS X 应用开发的一门新语言.然而,如果你有 C 或者 Objective-C 开发经验的话,你会发现 S ...

  7. JavaWeb显示器

    本文研究的总结.欢迎转载,但请注明出处:http://blog.csdn.net/pistolove/article/details/44310967 A:监听器的定义      专门用于其它对象身上 ...

  8. struts2 模型分配问题和延迟加载问题

    傅型号值问题: 首先须要说明的是:Action在请求到达ActionProxy时已经创建出来了,而且对应的创建了一个值栈. 在拦截器到达之前这个图片已经OK了.Action已经创建.并且压入了值栈vs ...

  9. pinyin4j新手教程

    Pinyin4j新手教程 pinyin4j是一个支持将简体和繁体中文转换到成拼音的Java开源类库,作者是Li Min (xmlerlimin@gmail.com). 下面是一些详细的介绍和使用方式. ...

  10. Web API 2 对 CORS 的支持

    Web API 2 对 CORS 的支持 CORS概念 跨域资源共享 (CORS) 是一种万维网联合会 (W3C) 规范(通常被认为是 HTML5 的一部分),它可让 JavaScript 克服由浏览 ...