Angularjs $stateProvider不重定向。这条路线运作良好。但必须切换到angular ui路由器以加载多个嵌套视图

为应用程序开发POC

正在使用的技术：

ASP.Net MVC4

和

AngularJs

刚开始使用时，我使用了

ngRoute

和

$routeProvider

。用于将服务器重定向到所需控制器操作的链接，以及用于在标有

ng view

指令的div中加载的页面。但我的要求是创建多个嵌套视图。因此，必须切换到支持此类要求的

$stateProvider

现在我面临的问题是链接没有被重定向。“项目”链接重定向，但“机会”不重定向。我的要求是在第一个div中加载一个视图，然后在AddOpportunityContainer中再加载一个视图

下面是我写的代码。谁能帮我一下我做错了什么。我已经在这上面花了不少时间

参考图书馆：

angular.js

和

angular-ui-router.js

守则：

var GuidanceApp = angular.module('GuidanceApp', ['ui.router']);

var configFunction = function ($stateProvider, $httpProvider, $locationProvider) {

    $stateProvider
        .state('Projects', {
            url: '/Projects',
            templateUrl: 'Projects/Index'
        })
        .state('Opportunity', {
            url: '/Opportunity',
            templateUrl: '/Opportunity/Index',
            views:{
                "AddOportunityContainer": {
                    templateUrl: '/Opportunity/Create'
                }
            }
        });


}
configFunction.$inject = ['$stateProvider', '$httpProvider', '$locationProvider'];
GuidanceApp.config(configFunction);

以下是主页的HTML。如您所见，最后一个div现在标记为

ui视图

，而不是

ng视图

，如

ngRoute

和

$routeProvider

<div>
    <ul>
        <li><a href="/#/Projects">Projects</a></li>
        <li><a href="/#/Opportunity">Opportunity</a></li>
        <li><a href="/#/Adjustments">Adjustments</a></li>
        <li><a href="/#/Summary">Summary</a></li>
    </ul>
</div>

<div ui-view></div>

单击Opportunity链接时要加载的不同部分视图

<h2>Opportunity-Index</h2>

<div ui-view="AddOportunityContainer"></div>

机会索引

锚元素的链接应更正如下，不带“/”：

<li><a href="#/Projects">Projects</a></li>

我发现了问题。这是一个蹩脚的错误。忘记使用GuidanceApp.config（）注册configFunction。错过了这一行-GuidanceApp.config（configFunction）；我发现了问题。这是一个蹩脚的错误。忘记使用GuidanceApp.config（）注册configFunction。错过了这一行-GuidanceApp.config（configFunction）；我编辑了这个问题。第一个环节起作用。这是一个获得一个视图的简单方法。第二个链接没有，我正在尝试加载嵌套视图