AngularJS 初印象------對比 Asp.net MVC

時間 2019-11-09

標籤 angularjs 印象對比 asp.net asp mvc 欄目 AngularJS 简体版

原文原文鏈接

以前就早耳聞前端MVC的一些框架，微軟自家的Knockout.js,google家的AngularJs，還有Backone。但不曾瞭解,也不解爲何前端也要這麼分。這兩天看了AngularJs的官方教程卻是吃了一驚（專業前端的就不要見怪個人out了），這小小的js，五臟俱全，不但有model,controller,view,這三個重要元素，還有Templates,Filter,Routing,依賴注入的DI都有，還有一套 Jasmine 框架下的單元測試！內心一想這javascript先後都搞定了嘛，也許這樣的「輕裝上陣」就是促成SPA流行的一個重要緣由吧。javascript

咱們來對比一下AngularJs的MVC（其實更偏向於MVVM）和Asp.Net MVC 。給我同樣的奧特曼（out man）認識下。html

先看幾段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;
});java

AngularJs的DI，卻是很像Asp.Net MVC 模型綁定，不像咱們平時在面向對象中的DI/IOC，都是經過一個屬性或者接口進行注入，而達到解耦的目的。但它的注入器injector，是在應用被加載的時候就被建立的，它的職責就是加載指定模塊，以及這個模塊中定義的全部服務(service 像$http,$localtion,$route)的提供者（provider）,當對象被請求時，就調用這些provider的方法來實現這些service，並且provider提供配置的api來控制service，這樣看來就有DI的味道了。有更詳細的解釋 Understanding Dependency Injection. git

一個應用的模型都是存在於$scope中的，$scope 用官網的原話就是它像膠水同樣，讓模板，模型和控制器一塊兒工做，並且讓他們保持分離但同步，模型的改變會映射到視圖上，視圖的改變也會反映到模型上。github

看到就是這樣的一個效果，沒有其餘代碼，在輸入框中輸入字符，就能對右邊的內容進行檢索，並實時更新。query這個模型改變，影響了phones這個模型值的改變，致使看到不一樣的結果。json

圖一bootstrap

圖二api

整個機制以下：app

這一點卻是讓我眼前一亮。效果很像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會有些些不友好。

本文就到這裏，但願對你有幫助，個人理解有限，歡迎拍磚。:）