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

            <
            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;
 });

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‘
            });
      }]);   

             context.MapRoute(
               
            null
            ,
              
            "
            RemoteData
            ",//new { controller = "RemoteData", action = "Data" }//name = UrlParameter.Optional             );
            context.MapRoute(
               null,
              "FileManager/{action}", 
             new { controller = "FileManager", action = "Index" } 
             );
       //....