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

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

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

任何建议都将不胜感激。

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-include提取，编译并包含外部HTML片段。（它在一个解决方案中，对我来说最适合部分视图）

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

2 个答案: