Question

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

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

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

这是我的代码：

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

Answer 1

好吧，由于我无法访问您的代码，我只能猜测。错误是说$stateProvider无法加载。所以您的依赖项存在问题。

更改AnbarUniversalSystemApp.js前两行，并检查是否修复了错误：

来自：

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

to：

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

ui-router，全局控制器不工作

1 个答案: