AngularJS UI路线:模板未加载.空白页

我不知道为什么当我访问'/todo-list'状态URL时我的模板没有加载。

// main.js - routes
angular.module('myapp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('todolist', {
            url: '/todo-list',
            view: {
                '@': {
                    template: 'test!',
                }
            }
        })
        .state('otherwise', {
            url: '*path',
            template: 'Oops! Blank page!' // <- the otherwise is working
        });
}]);

。

// index.html
<html ng-app="app">
<head>
  <title>Project</title>
  <script src="./js/lib/angular.min.js"></script>
  <script src="./js/lib/angular-ui-router.js"></script>
  <script src="./js/main.js"></script>
</head>
<body>
  <div class="container">
    <ui-view></ui-view>
  </div>
</body>
</html>

"否则"可以正常工作，但是当我导航到"/todo-list"时，它给我一个空白页。该路线正在工作..但不能使用模板。它与UI-View元素有关吗？

我只是将 view更改为 views，并且可以按预期工作。

var app = angular.module('myapp', ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('todolist', {
      views: {
        '@': {
          template: 'test!<button ng-click="clickEvt()">Click me!</button>',
          controller: function($scope) {
            $scope.clickEvt = function() {
              alert('Thanks!');
            };
          }
        }
      }
    })
    .state('otherwise', {
      url: '*path',
      template: 'Oops! Blank page!<button ng-click="go()">todolist</button>', // <- the otherwise is working
      controller: 'defaultCtrl'
    });
}]);
app.controller("defaultCtrl", function($scope, $state) {
  $scope.go = function() {
    $state.go("todolist");
  };
});

<html ng-app="myapp">
<head>
  <title>Project</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0/angular-ui-router.js"></script>
</head>
<body>
  <div class="container">
    <ui-view></ui-view>
  </div>
</body>
</html>

相关内容

最新更新

热门标签：