是否有可能在MVC部分视图中运行AngularJS应用程序

Question

我试图在MVC应用程序中运行AnugularJS。对我来说，这似乎合乎逻辑，可以通过创建一个小的角度应用程序来完成此任务，该应用程序将MVC部分视图推送到客户端时运行。

<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" /> 

<style> 
    .gridStyle { 
     border: 1px solid rgb(212,212,212); 
     width: 600px; 
     height: 124px; 
    } 
</style> 

<div ng-app="app"> 
    <div ng-controller="GridCtrl"> 
     <table cellspacing="5" cellpadding="5"> 
      <tr> 
       <td valign="top"> 
        <div dropdownlist="" options="options" ng-model="selectedCategory" 
         on-change="onChangeCategoryList()"></div> 
       </td> 
       <td> 
        <div ng-show="contentAvailiable"> 
         <div grid-angular=""></div> 
        </div> 
       </td> 
      </tr> 
     </table> 

    </div> 
</div> 

<script src="~/Scripts/Libraries/angular/angular.js"></script> 
<script src="~/Scripts/Libraries/angular/angular-route.js"></script> 

<script type="text/javascript" src="//rawgithub.com/angular-ui/ng-grid/v2.0.13/build/ng-grid.debug.js"></script> 
<script src="~/app/app.js"></script> 
<script src="~/app/controllers.js"></script> 
<script src="~/app/directives.js"></script> 
<script src="~/app/filters.js"></script> 
<script src="~/app/services.js"></script> 

angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directives', 'app.controllers', 'ngGrid']) 


     .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) { 

      $stateProvider 
       .state('home', { 
        url: '/', 
        templateUrl: 'views/index', 
        controller: 'HomeCtrl' 
       }) 
       .state('grid', { 
        url: '/grid', 
        templateUrl: 'views/grid', 
        controller: 'GridCtrl' 
       }); 

      // $locationProvider.html5Mode(true); 

     }]) 


     .run(['$templateCache', '$rootScope', '$state', '$stateParams', function ($templateCache, $rootScope, $state, $stateParams) { 

      var view = angular.element('#ui-view'); 
      $templateCache.put(view.data('tmpl-url'), view.html()); 

      // Allows to retrieve UI Router state information from inside templates 
      $rootScope.$state = $state; 
      $rootScope.$stateParams = $stateParams; 

      $rootScope.$on('$stateChangeSuccess', function (event, toState) { 

       $rootScope.layout = toState.layout; 
      }); 
     }]); 

而是这个工作，我得到以下错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

任何建议，将不胜感激。

Answer 1

你需要确保你在你的ng-app指令之前加载你的Angular文件。

只要把这些文件在您的</head>：

<script src="~/Scripts/Libraries/angular/angular.js"></script> 
<script src="~/Scripts/Libraries/angular/angular-route.js"></script> 

<script type="text/javascript" src="//rawgithub.com/angular-ui/ng-grid/v2.0.13/build/ng-grid.debug.js"></script> 
<script src="~/app/app.js"></script> 
<script src="~/app/controllers.js"></script> 
<script src="~/app/directives.js"></script> 
<script src="~/app/filters.js"></script> 
<script src="~/app/services.js"></script> 

Answer 2

是

这是可能的，非常容易使用。它只是你需要使用ng-include（“'controller/action'”）来调用局部视图。撇号（'）在编写url时很重要。

例

<div id="TestDiv" ng-include="templateUrl"></div> 

和角速度控制器内部

var app = angular.module("Layout", []); 
    app.controller("LoadPage", function ($scope, $http, $sce) { 

    //Initially 
    $scope.templateUrl = '/Home/DefaultPage'; 

    // To dynamically change the URL. 
    $scope.NewProjFn = function() { 
     $scope.templateUrl = '/Home/ProjectPage'; 
    }; 
}); 

NG-包括读取，编译并包括外部HTML片段。 （其全部在一个解决方案中，对于我来说最适合部分视图）