帶templateUrl的AngularJS路由

我對AngularJS路由有問題：我沒有得到任何頁面的反饋。沒有錯誤或視圖切換。帶templateUrl的AngularJS路由

我檢查了模塊的實現，但它是以正確的方式聲明的。然後我搜索了錯別字，如templateURL，但我沒有找到任何。我也嘗試在列表中使用ng-href而不是href，但這些鏈接不再可點擊。

和我的代碼：

創建我的導航：

<body ng-app="Productportfolio"> 

<ul> 
    <li> 
    <a href="#/home">Home</a> 
    </li> 
    <li> 
    <a href='#/privat'>Log in</a> 
</li> 
</ul> 

<ng-view></ng-view> 

<!--own js --> 
<script src="app.js"></script> 
<!--Controller --> 
<script src="ProductCtrl.js"></script> 
<!--Services --> 
<!--Direktives--> 
</body>

取得的模板：

//home.html 
<div> 
    <h1> Home </h1> 
</div> 

//private.html 
<div> 
    <h1> Private</h1> 
</div>

聲明一個角模塊：

angular.module('Productportfolio', ['ngRoute'])

添加了$ routeProvider到我的配置：

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) 

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

    $routeProvider 

    .when('/home', { 
     templateUrl: 'home.html', 
     controller: 'ProductCtrl' 
    }) 

    .when('/private', { 
     templateUrl: 'private.html', 
     controller: 'ProductCtrl' 
    }) 

    .otherwise({ 
     redirectTo: '/home', 
     controller: 'ProductCtrl' 
    }); 

    $locationProvider.hashPrefix('!'); 

}]);

來源

2016-11-16 Ame Lives

這是確切的錯誤你是得到些什麼？ – AndreaM16

我沒有收到任何錯誤;我沒有得到頁面的反饋 –

在角度加載之前jQuery必須被加載。 – Matheno

在您的Plunker中，有一些與進口有關的問題。爲了簡單起見，我只是刪除了jQuery和Bootstrap。我還將所有模塊放在一個app.js文件中。

有你HTML一些錯誤：

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 

    <!--AngularJS--> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> 
    </head> 

    <body ng-app="Productportfolio"> 

    <ul> 
    <li> 
     <a ng-href="#home">Home</a> 
    </li> 
    <li> 
     <a ng-href="#private">Private</a> 
    </li> 
    </ul> 

    <ng-view></ng-view> 

    <!--own js --> 
    <script src="app.js"></script> 
    </body> 

</html>

進口Angular前ngRoute或任何其他模塊
使用ng-href='#routeName'或以其他方式

而在你JS：

var myApp = angular.module('Productportfolio', ['ngRoute']); 

myApp.controller('ProductCtrl', ['$scope',function ($scope) { 
    var vm = this; 
}]); 

myApp.config(['$routeProvider', function ($routeProvider) { 

     $routeProvider 
      .when('/home', { 
       templateUrl: 'home.html', 
       controller: 'ProductCtrl' 
      }) 

      .when('/private', { 
       templateUrl: 'private.html', 
       controller: 'ProductCtrl' 
      }) 

      .otherwise({ 
       redirectTo: '/home', 
       controller: 'ProductCtrl' 
      }); 
}]);

你需要你的應用模塊，不是所有的控制器，服務等

注意，可以很容易的注入只是外部模塊，我也刪除您的服務，因爲你沒有分享它，它很有用。

最後但並非最不重要的，如果你想使用$locationProvider.hashPrefix('!');使用hashbangs，你需要在你的head的末尾添加<base href="/" />。

出於某種原因，plunker不允許我這樣做，但我相信你會在你的版本中使用它。

Here你可以找到工作plunker再現你的應用程序。

希望我一直有幫助。

來源

2016-11-16 15:41:38 AndreaM16

我想我們在同一分鐘內寫了評論，所以我沒有看到它。你解釋得比我好。並且帶有$ locationProvider的部分很好知道:) –

標題標籤中缺少基本標籤聲明的相關注釋。 – davidxxx

@AmeLives你應該將這個答覆標記爲答案，因爲它可以解決你的問題，請閱讀：http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – StepUp

加載Java腳本文件的順序是非常重要的。負載按以下順序：

<link data-require="[email protected]*" data-semver="4.0.0-alpha.2" rel="stylesheet" 
       href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 
<script data-require="[email protected]*" data-semver="3.0.0" 
       src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> 
<script data-require="[email protected]*" data-semver="4.0.0-alpha.2" 
      src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 


<!--AngularJS--> 
<script data-require="[email protected]" data-semver="1.5.8" 
      src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
<script data-require="[email protected]*" data-semver="1.5.8" 
      src="https://code.angularjs.org/1.5.8/angular-route.js"></script>

這意味着你加載Bootstrap.js文件，但引導離不開jQuery庫工作。所以這意味着你應該首先加載jQuery，然後Bootstrap.js。其他庫應該重新排序（我在上面的例子中已經展示過）。

此外，您可以在瀏覽器中使用Console來查看是否存在錯誤和錯誤。

來源

2016-11-16 15:01:03 StepUp

謝謝，我想，我也必須改變角度和角度路線的順序。但它不能解決問題 –

將剩餘的不可見的問題是在這裏：模塊對象的

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) 
.config(['$routeProvider, $locationProvider',

config()函數採用作爲參數，串的陣列，而不是一個字符串「」作爲在其內部隔板炭。見例子和文檔在這裏： https://docs.angularjs.org/guide/providers#provider-recipe

所以，它應該是：

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) 
.config(['$routeProvider', '$locationProvider',

更新：

但事實上，你的情況，它的工作即使沒有precising陣列：

angular.module('Productportfolio', ['ngRoute', 'ProductService', 'ProductCtrl']) 
.config(

我更新了兩個版本的plunker和app.js。我有一個印象，陣列不是強制性的（不再）。所以，忽略該參數似乎更好，特別是如果價值不好，可能會產生副作用。

這裏與修正（有序lib中，錯別字和配置功能調用）的plunker： http://plnkr.co/edit/NTn6Zmav5RX4V8zgHPOG?p=preview

我已刪除$locationProvider.hashPrefix('!')不適合您使用的URL。請參閱@ AndreaM16回答。

此外，您還沒有聲明您想要在控制器中使用的服務。

app.js

angular.module('Productportfolio', ['ngRoute']) 
     .config(['$routeProvider', '$locationProvider', 
      function ($routeProvider, $locationProvider) { 

     $routeProvider 
      .when('/home', { 
       templateUrl: 'home.html', 
       controller: 'ProductCtrl' 
      }) 

      .when('/private', { 
       templateUrl: 'private.html', 
       controller: 'ProductCtrl' 
      }) 

      .otherwise({ 
       redirectTo: '/home', 
       controller: 'ProductCtrl' 
      }); 


     }] 
    );

或config功能，而不陣列參數app.js：

angular.module('Productportfolio', ['ngRoute']) 
     .config(
      function ($routeProvider, $locationProvider) { 

     $routeProvider 
      .when('/home', { 
       templateUrl: 'home.html', 
       controller: 'ProductCtrl' 
      }) 

      .when('/private', { 
       templateUrl: 'private.html', 
       controller: 'ProductCtrl' 
      }) 

      .otherwise({ 
       redirectTo: '/home', 
       controller: 'ProductCtrl' 
      }); 

     // $locationProvider.hashPrefix('!'); 
     } 
    );

的index.html：

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <!--Bootstrap--> 
    <script data-require="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 

    <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script><!-- Tether for Bootstrap --> 
    <link data-require="[email protected]*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" /> 
    <script data-require="[email protected]*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 


    <!--AngularJS--> 
     <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <script data-require="[email protected]*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script> 


    <!--own js --> 
    <script src="app.js"></script> 
    <!--Controller --> 
    <script src="ProductCtrl.js"></script> 
    <!--Services --> 
    <!--Direktives--> 
    </head> 

    <body ng-app="Productportfolio"> 

    <ul> 
    <li> 
     <a href="#home">Home</a> 
    </li> 
    <li> 
     <a href="#private">Log in</a> 
    </li> 
    </ul> 
    <div ng-view></div> 


    </body> 

</html>

來源

2016-11-16 16:06:21 davidxxx

你對於Plunker爲什麼不喜歡'hashPrefix'有什麼想法？從來沒有見過。 – AndreaM16

@ AndreaM16，不知道。也許與基地網址的副作用。你已經用Plunker使用hashPrefix？ – davidxxx

好吧，從來沒有使用它，但我通常在我的應用程序中使用它。 – AndreaM16

帶templateUrl的AngularJS路由

回答

相關問題