UI路由器不显示任何内容，而不是<div UI视图>

Question

我正在尝试使用ui-router模块创建页面表单。我在配置文件中创建了状态。但是，打开account/trade时仅显示<div ui-view></div>。我缺少什么？

config

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

测试

Answer 1

我不确定ngrouter和uirouter是否可以在没有伤害的情况下共存。我可能是Ngroute捕获浏览器位置，然后不要呈现您的视图。而且您是否没有NG-View指令，Ngrouter无法显示内容。

您可以尝试迁移所有$ ruteprovider.when（.. forte to $ stateprover.state（..然后停止向您的应用程序注入ngroute吗？

Answer 2

在使用ui-router时，您需要按照UI-Router文档进行以下配置，以下图：

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