從ng-include移動到ngRoute

我是Angular的新手，最近了解了它的基礎知識。從ng-include移動到ngRoute

在我目前的項目中，我正在開發一個單頁面應用程序。截至目前，我的HTML/JS設置是按如下：

HTML：

<body> 
    <ng-include src='"src/includes/home.html"'></ng-include> 
    <!-- home.html is the HTML template with static data --> 
</body>

app.js：

'use strict'; 

    var app = angular.module('MyApp',['home']); 

    angular     
    .module('home', []) 
    .directive('homeDir', function(){ 
     return { 
     replace: true, 
     restrict: 'E', 
     templateUrl: 'src/includes/home.html' 
     }; 
    });

此代碼工作正常，但我想向大家介紹路由以更好地控制頁面，而不是使用ng-include。

所以，現在，我的HTML看起來是一樣的，實際上我不知道在使用路由時應該改變什麼。

我app.js現在看起來是這樣的：

'use strict'; 

var app = angular.module('MyApp',['home']); 

// trying to introduce routing: 

angular 
.module('home', ['ngResource', 'ngRoute']) 
.config(['$routeProvider', '$locationProvider'], 
    function($routeProvider, $locationProvider){ 
     $routeProvider. 
     when('/', { 
      templateUrl: 'src/includes/home.html', 
      controller: 'homeCtrl' 
     }). 
     when('/drawer', { 
      redirectTo: 'src/includes/home.html#drawer', 
      controller: 'drawerCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 

     // use the HTML5 History API 
     $locationProvider.html5Mode(true); 
    } 
); 

app.controller('homeCtrl', function($scope){ 
    $scope.message = "some message"; 
    console.log("homeCtrl called"); 
}); 

app.controller('drawerCtrl', function($scope){ 
    $scope.message = "some other message"; 
    console.log("drawerCtrl called"); 
});

不過，我得到一個錯誤：

Error: error:modulerr 
Module Error

按照以下錯誤鏈接：

This error occurs when a module fails to load due to some exception.

爲什麼不加載？我錯過了什麼？我應該將HTML更改爲？

UPDATE：

包括angular-route.min.js後，我收到錯誤：

Error: whole is undefined 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:8729:1 
LocationHtml5Url/[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:8772:9 
$LocationProvider/this.$get<@file:///D:/projects/svn/trunk/src/libs/angular.js:9269:5 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:3762:7 
createInjector/instanceCache.$injector<@file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:3725:11 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:3752:1 
createInjector/instanceCache.$injector<@file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:3725:11 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:3752:1 
registerDirective/</<@file:///D:/projects/svn/trunk/src/libs/angular.js:5316:21 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:322:7 
registerDirective/<@file:///D:/projects/svn/trunk/src/libs/angular.js:5314:13 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:3762:7 
createInjector/instanceCache.$injector<@file:///D:/projects/svn/trunk/src/libs/angular.js:3604:13 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:3725:11 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:6363:28 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:5801:1 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:5666:1 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:5682:1 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:5682:1 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:5603:1 
bootstrap/doBootstrap/</<@file:///D:/projects/svn/trunk/src/libs/angular.js:1343:11 
$RootScopeProvider/this.$get</[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:12077:9 
$RootScopeProvider/this.$get</[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:12175:11 
bootstrap/doBootstrap/<@file:///D:/projects/svn/trunk/src/libs/angular.js:1341:9 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:3762:7 
bootstrap/[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:1340:8 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:1353:5 
[email protected]:///D:/projects/svn/trunk/src/libs/angular.js:1301:37 
@file:///D:/projects/svn/trunk/src/libs/angular.js:21050:5 
jQuery.Callbacks/[email protected]:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1037:1 
jQuery.Callbacks/[email protected]:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:1148:7 
[email protected]:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:433:38 
[email protected]:///D:/projects/svn/trunk/src/libs/jquery-1.9.1.min.js:103:4 

file:///D:/projects/svn/trunk/src/libs/angular.js 
Line 9511

編輯：

這裏是我的HTML進口：

<head> 
    <title></title> 

    <!-- External libraries --> 

    <link rel="stylesheet" type="text/css" href="src/css/font-awesome-4.2.0/css/font-awesome.min.css"> 
    <link rel="stylesheet" type="text/css" href="src/css/headers.css"> 
    <link rel="stylesheet" type="text/css" href="src/css/drawer.css"> 
    <link rel="stylesheet" type="text/css" href="src/css/custom.css"> 

    <script type="text/javascript" src="src/libs/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="src/libs/bootstrap.min.js"></script> 
    <script type="text/javascript" src="src/libs/angular.js"></script> 
    <script type="text/javascript" src="src/libs/angular-resource.js"></script> 
    <script type="text/javascript" src="src/libs/angular-ui-router.js"></script> 
    <script type="text/javascript" src="src/libs/angular-sanitize.min.js"></script> 
    <script type="text/javascript" src="src/libs/angular-pull-to-refresh.js"></script> 
    <script type="text/javascript" src="src/libs/nprogress.js"></script>  
    <script type="text/javascript" src="src/libs/ng-modal.js"></script> 
    <script type="text/javascript" src="src/libs/angular-route.min.js"></script> 

    <script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.core.js"></script> 
    <script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.utils.js"></script> 
    <script type="text/javascript" src="src/js/jssor-slider-plugin/jssor.slider.js"></script> 

    <script type="text/javascript" src="src/js/app.js"></script> 

    <script> 
     document.write('<base href="' + document.location + '" />'); 
    </script> 
</head>

來源

2014-10-01 Rahul Desai

你可以在你的標記中分享你的進口嗎？順序很重要。 – benek 2014-10-01 09:17:59

@benek請參閱我上面的修改。 – 2014-10-01 09:28:45

有幫助的東西：請參考角度而不縮小和角度路線相同。您將能夠打破並查看錯誤的細節（而不是「未定義的...」）。另外刪除angular-ui-router.js，因爲你只使用角度基本路由器，而不是完全不同的ui-router。 – benek 2014-10-01 09:33:52

配置部分不正確。代替

.config(['$routeProvider', '$locationProvider'], function($routeProvider, $locationProvider) { ... });

它應該是

.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { ... }]);

。注意，函數定義屬於陣列對象。

另一個錯誤是redirectTo屬性的drawer路由，目前沒有任何意義。您可能需要改爲：

.when('/drawer', { 
    templateUrl: 'src/includes/drawer.html', 
    controller: 'drawerCtrl' 
})

來源

2014-10-01 06:18:48 dfsq

我做了你所建議的更改，但我仍然收到該錯誤。 – 2014-10-01 06:28:33

確保你有'ngView'指令。看看[this]（http://plnkr.co/edit/K23b5khgJ1iMHWffwRgw?p=preview）演示。 – dfsq 2014-10-01 06:30:50

在您的演示中，您沒有從模板HTML中加載數據。我需要在我的項目中這樣做。我試過[修改你的演示]（http://plnkr.co/edit/9FCDtFnh2EZV3xqdCD1g?p=preview），但它沒有奏效。 – 2014-10-01 07:07:56

確定您已將angular-route.js文件添加到html文件。而你在這裏缺少ngRoute模塊 -

var app = angular.module('MyApp',['ngRoute','ngResource' ]); 
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){... }]);

dfsq是正確的。代碼中有語法錯誤。

來源

2014-10-01 06:19:52 Rabi

不，模塊'home'定義了'ngRoute'依賴，所以沒關係。無需再次在'Amazon'模塊上聲明它。 – dfsq 2014-10-01 06:26:51

是的，沒有注意到它。 TX。 – Rabi 2014-10-01 06:35:19

@Rabi我在我的HTML中包含了'angular-route.min.js'，而不是'ng-route.js' – 2014-10-01 06:40:23

從ng-include移動到ngRoute

回答

相關問題