角度和ui路由器的例子不起作用

你好我正在嘗試一個簡單的應用程序與角度和UI路由器... 但由於某種原因，它根本不工作。角度和ui路由器的例子不起作用

在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>

來源

2015-04-02 Laurent Lequenne

你永遠不會在這個代碼片段中初始化角度。永遠不會提及'ng-app'。 – Claies 2015-04-02 11:03:03

有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是不是必須的但是...這是必須的 - 以避免以後的問題...

如果該屬性存在於應用程序元素上，則注入器將以「strict-di」模式創建。這意味着應用程序將無法調用不使用顯式函數註釋的函數（因此不適合縮小），如依賴注入指南中所述，有用的調試信息將有助於追蹤這些錯誤的根源。

來源

2015-04-02 10:52:45

還應該提到缺乏'ng-app'。 – DTing 2015-04-02 11:02:36

好的很好......謝謝，我會檢查一下有什麼不同......讓我的例子工作。所以我不會一次又一次地犯同樣的錯誤......這三天我忙着嘗試找到一個可行的解決方案，並以ui路由器結束......但是，我想了一下，然後嘗試然後重試才能正常工作：=）感謝您的幫助：=） – 2015-04-02 16:42:07

角度和ui路由器的例子不起作用

回答

相關問題