1

こんにちは、Angular と UI-Router を使用して単純なアプリケーションを試しています... しかし、何らかの理由で、まったく機能しません。

クロムでは、コンソールにエラーはありませんが、出力さえありません

何が起こっているのか手がかりを持っている人がいるかもしれません...私にはまったくわかりません。

<!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>
4

1 に答える 1

1

作業プランカーがあります

重要な間違った設定の 1 つは 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'
          }
      }
  });
  ...

ここで確認してください

また、DTingが発見したように、以下を提供する必要がありますng-app。

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

注：ng-strict-diは必須ではありませんが...必須です-後で問題を回避するために...

この属性が app 要素に存在する場合、インジェクターは「strict-di」モードで作成されます。これは、依存性注入ガイドで説明されているように、アプリケーションが明示的な関数アノテーションを使用しない (したがって縮小化には適していない) 関数の呼び出しに失敗することを意味し、有用なデバッグ情報はこれらのバグの原因を追跡するのに役立ちます。

于 2015-04-02T10:52:45.980 に答える