Question

您好我正在尝试使用Angular和UI-Router的简单应用程序... 但由于某种原因，它根本不起作用。

在chrome中，控制台中没有错误，但根本没有输出

也许有人对发生的事情有一些线索......我绝对不知道。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-ui-router.js"></script>
</head>
<body>
    <div>
        <a href="#/media/list">Route 1</a>
        <div ui-view="viewSidebar"></div>
        <div ui-view="viewContent"></div>
    </div>

    <script>
        var app = angular.module('app', ['ui.router']);
        app.config(
          ['$stateProvider', '$urlRouterProvider',
              function ($stateProvider, $urlRouterProvider) {
                  $urlRouterProvider.otherwise('/media/list');
                  $stateProvider.state('mediaList', {
                      views: {
                          url: "/media/list",
                          'viewSidebar': {
                              template: '<p>SideBar</p>',
                              controller: 'SidebarControllerView'
                          },
                          'viewContent': {
                              template: '<p>Thumb view</p>',
                              controller: 'MediaControllerView'
                          }
                      }
                  });
              }]);

        app.controller('MediaControllerView', ['$scope', MediaControllerView]);
        app.controller('SidebarControllerView', ['$scope', SidebarControllerView]);


        function MediaControllerView($scope) {
            $scope.model = 1;
        };


        function SidebarControllerView($scope) {
            $scope.model = 1;
        };


    </script>
</body>
</html>

Answer 1

有a working plunker

一个重要的错误设置是URL。它不属于视图，而属于状态：

...
$stateProvider.state('mediaList', {
      // url belongs to the state
      url: "/media/list",
      views: {
          // url does not belong to the views
          // url: "/media/list",
          'viewSidebar': {
              template: '<p>SideBar</p>',
              controller: 'SidebarControllerView'
          },
          'viewContent': {
              template: '<p>Thumb view</p>',
              controller: 'MediaControllerView'
          }
      }
  });
  ...

检查here

而且，当发现DTing时，我们必须提供ng-app：

<html ng-app="app" ng-strict-di>
  ...

注意：ng-strict-di 不是必须但是......这是必须的 - 以避免以后的问题......

如果app元素上存在此属性，则将在＆＃34; strict-di＆＃34;中创建注入器。模式。这意味着应用程序将无法调用不使用显式函数注释的函数（因此不适合缩小），如“依赖注入指南”中所述，有用的调试信息将有助于跟踪这些错误的根源。 / p>

angular和ui-router示例不起作用

1 个答案: