带有全局控制器的 ui-router 不起作用答案

【问题标题】：ui-router with global controllers not working带有全局控制器的 ui-router 不起作用
【发布时间】：2015-08-17 07:35:25
【问题描述】：

我在 angularjs、ui-router 和 MVC 方面非常业余。我有两个视图和控制器作为我的 SPA 的两个页面。

我在我的项目中使用 mvc、web api、angularjs 和 ui-router。

当我运行我的代码时，它不起作用。这个错误显示在浏览器控制台中：

enter link description here

这是我的代码：

Index.cshtml：

<!DOCTYPE html>
<html ng-app="AnbarUniversalSystemApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sample</title>
</head>
<body>

<a ui-sref="DraftType">Draft Type</a>
<a ui-sref="Inv">Inv</a>

<div class="container body-content">
    <div ui-view></div>    
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/angularjs")
@Scripts.Render("~/bundles/ui-router")
@Scripts.Render("~/bundles/AnbarUniversalSystemApp")

Inv.cshtml：

<div ng-controller="InvCtrl">
{{InvName}}
</div>

DraftType.cshtml：

<div ng-controller="DraftTypeCtrl">
{{DraftTypeName}}
</div>

AnbarUniversalSystemApp.js：

angular.module('AnbarUniversalSystemApp', ['ui.router', 'ui.bootstrap']);
var App = angular.module('AnbarUniversalSystemApp', []);
var configFunction = function ($stateProvider, $locationProvider,
$controllerProvider) {
$locationProvider.hashPrefix('!').html5Mode(true);
$controllerProvider.allowGlobals();
$stateProvider
.state('Inv', {
    url: '/Payeh/Inv',
    templateUrl: 'Payeh/Inv.cshtml',
    controller: 'InvCtrl'
})
.state('DraftType', {
    url: '/Payeh/DraftType',
    templateUrl: 'Payeh/DraftType.cshtml',
    controller: 'DraftTypeCtrl'
})
}
configFunction.$inject = ['$stateProvider', '$locationProvider',
'$controllerProvider'];

App.config(configFunction);
App.controller('InvCtrl', InvCtrl);
App.controller('DraftTypeCtrl', DraftTypeCtrl);

InvCtrl.js：

function InvCtrl($scope) {
    $scope.InvName = "first Inv";
}

InvCtrl.$inject = ["$scope"];

DraftTypeCtrl.js：

function DraftTypeCtrl($scope) {
    $scope.DraftTypeName = "first Inv";
}

DraftTypeCtrl.$inject = ["$scope"];

RouteConfig.cs：

namespace AnbarUniversalSystem
{
    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        routes.MapRoute(
            name: "Inv",
            url: "Payeh/Inv",
            defaults: new { controller = "Payeh", action = "Inv" });

        routes.MapRoute(
            name: "DraftType",
            url: "Payeh/DraftType",
            defaults: new { controller = "Payeh", action = "DraftType" });

        routes.MapRoute(
            name: "Default",
            url: "{*url}",
            defaults: new { controller = "Home", action = "Index",
            id = UrlParameter.Optional }
        );
    }
}
}

【问题讨论】：

无法打开错误链接。请在此处复制您的错误消息。

标签： angularjs angular-ui-router

【解决方案1】：

好吧，由于我无权访问您的代码，我只能猜测。错误是说$stateProvider 加载失败。所以你的依赖有问题。

如下更改您的AnbarUniversalSystemApp.js 前两行并检查它是否修复了您的错误：

来自：

angular.module('AnbarUniversalSystemApp', ['ui.router', 'ui.bootstrap']);
var App = angular.module('AnbarUniversalSystemApp', []);

到：

var App = angular.module('AnbarUniversalSystemApp', ['ui.router', 'ui.bootstrap']);

【讨论】：

是的。尝试了你所说的，但仍然给出同样的错误。