ui-router 没有显示任何东西而不是 <div ui-view>答案

【问题标题】：ui-router not showing anything instead of <div ui-view>ui-router 没有显示任何东西而不是 <div ui-view>
【发布时间】：2017-11-28 02:39:28
【问题描述】：

我正在尝试使用ui-router 模块创建一个页面表单。我在我的配置文件中创建了状态。然而，当打开account/trade 时，它只显示<div ui-view></div>。我有什么遗漏吗？

配置

var app = angular.module("KryptoApp", ["ngRoute", "ui.router", "ngCookies", "ngAnimate"]);
// app.config(['$qProvider', function ($qProvider) {
//     $qProvider.errorOnUnhandledRejections(false);
// }]);
app.config(function ($stateProvider, $routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/static/templates/index.html",
            controller: "IndexController"
        })
        .when("/register", {
            templateUrl: "/static/templates/register.html",
            controller: "RegisterController"
        })
        .when("/Login", {
            templateUrl: "/static/templates/login.html",
            controller: "LoginController"
        })
        .when("/account/trade", {
            templateUrl: "/static/templates/trade.html",
            controller: "TradeController"
        });

    $stateProvider
        .state('trade', {
            url: '/account/trade',
            templateUrl: "/static/templates/trade.html",
            controller: "TradeController"
        })
        .state('trade.coin', {
            url: 'account/trade/coin',
            templateUrl: "/static/templates/trade_coin.html",
            controller: "TradeController"
        });

        $routeProvider.otherwise('/'); 
});

app.config(function ($interpolateProvider) {
    $interpolateProvider.startSymbol('{[{');
    $interpolateProvider.endSymbol('}]}');
});

app.config(['$urlRouterProvider',function($urlRouterProvider){
    $urlRouterProvider.otherwise('/');
}]);

/static/templates/trade.html

<div ui-view>

/static/templates/trade_coin.html

测试

【问题讨论】：

标签： html angularjs angular-ui-router

【解决方案1】：

我不确定 ngRouter 和 uiRouter 是否可以无害共存。我可能是 ngRoute 捕获浏览器位置，然后不呈现您的视图。并且你没有 ng-view 指令，ngRouter 无法显示内容。

您可以尝试将所有 $routeProvider.when(.. 东西迁移到 $stateProver.state(.. 然后停止将 ngRoute 注入您的应用程序吗？

【讨论】：

【解决方案2】：

当您使用ui-router 时，您需要按照ui-router documentation 如下配置您的路由：

var app = angular.module("KryptoApp", ["ngRoute", "ui.router", "ngCookies", "ngAnimate"]);
app.config(function ($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('home', {
        url: '/',
        templateUrl: "/static/templates/index.html",
        controller: "IndexController"
    })
    .state('trade', {
        url: '/account/trade',
        templateUrl: "/static/templates/trade.html",
        controller: "TradeController"
    })
    .state('register', {
        url: '/register',
        templateUrl: "/static/templates/register.html",
        controller: "RegisterController"
    })
    .state('login', {
        url: '/login',
        templateUrl: "/static/templates/login.html",
        controller: "LoginController"
    })
    .state('trade.coin', {
        url: 'account/trade/coin',
        templateUrl: "/static/templates/trade_coin.html",
        controller: "TradeController"
    });

    $urlRouterProvider.otherwise('/'); 
});

app.config(function ($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

【讨论】：