Question

我无法弄清楚为什么我的角状态提供程序不起作用而且它没有显示错误。以前当我使用ngRoute时，一切正常，但现在当我加入ui.router时似乎没有任何效果。以前，一旦我打开应用程序，/＃/ link就会生成（路由），但现在它只挂在myapp.com /

上

我的HTML index.html

   <html>
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>MyApp</title>
        <style type="text/css">
          [ng\:cloak], [ng-cloak], .ng-cloak {
            display: none !important;
          }
        </style>
    </head>
    <body class="hold-transition skin-blue sidebar-mini" ng-app="app">
        <div class="wrapper">
        <div class="content-wrapper">
               <div ng-view></div>
        </div><!-- /.content-wrapper -->
        </div>
        <script src="plugins/angularJs/angular.js"></script>
        <script src="plugins/angularJs/angular-ui-router.js"></script>
        <script src="plugins/angularJs/angular-resource.js"></script>
        <script src="plugins/angularJs/ui-bootstrap-tpls-1.3.2.js"></script>
        <script src="app/app.js"></script>
        <!-- Controllers  -->
        <script src="app/controllers/locations/locationsCtrl.js"></script>
        <script src="app/controllers/dashboard/dashboardCtrl.js"></script>
        <!-- Factories  -->
        <script src="app/factories/locationFactory.js"></script>
        <script src="app/factories/countriesFactory.js"></script>
        <script src="app/factories/provincesFactory.js"></script>
        <!-- Filters  -->
        <script src="app/filters/selectionFilters.js"></script>
  </body>
</html>

我的dashboard.html

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>Dashboard</h1>
    <ol class="breadcrumb">
        <li><a href="/"><i class="fa fa-dashboard"></i>Home</a></li>
        <li class="active">Dashboard</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    {{data}}
</section>

我的app.js

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

app.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/dashboard");
    $stateProvider
        .state('dashboard', {
            url: "/dashboard",
            templateUrl: "app/templates/dashboard/dashboard.html",
            controller: 'dashboardCtrl'
        })
        .state('locations', {
            url: "/locations",
            templateUrl: "app/templates/locations/locations.html",
            controller: 'locationsCtrl'
        })
        .state('/locations/add_location', {
            url: "/locations/add_location",
            templateUrl: "app/templates/locations/add_location.html",
            controller: 'addLocationCtrl'
    });

});

接口和控制台输出加载的文件我希望你们知道发生了什么或者我错过了什么。如果您需要任何其他信息，请告诉我，我会提供。

Answer 1

将<div ng-view></div>替换为<div ui-view></div>

Answer 2

尝试添加

<base href="/">

HTML头中的

和

$locationProvider.html5Mode(true);

在路线配置中。

顺便说一下，在状态声明中使用点语法.而不是/：

.state('locations.add_location')

完全，将<div ng-view></div>替换为<div ui-view></div>解决问题。

$ stateprovider不起作用或显示任何类型的错误

2 个答案: