是否可以在 MVC 局部视图中运行 AngularJS 应用程序

Posted 2023-02-26

【中文标题】是否可以在 MVC 局部视图中运行 AngularJS 应用程序

【英文标题】：Is it possible to run an AngularJS application inside an MVC Partial View

【发布时间】：2014-09-18 23:58:15

【问题描述】：

我正在尝试在 MVC 应用程序中运行 AnugularJS。在我看来，这可以通过创建小型 Angular 应用程序来完成，该应用程序将在 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;
            );
        ]);

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

未捕获的错误：[$injector:modulerr] 无法实例化模块应用程序，原因是： 错误：[$injector:nomod] 模块“app”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

任何建议将不胜感激。

【参考方案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>

【参考方案2】：

是的

这是可能的并且非常容易使用。只是您需要使用 ng-include("'controller/action'") 调用局部视图。 Apostrophe(') 在写 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-include 获取、编译并包含外部 HTML 片段。 （这是一个解决方案，对我来说最适合部分视图）