角度路由非工作

我想用MEAN棧構建我的第一個web應用，並且我正面臨着Angular路由的問題。角度路由非工作

<!-- public/index.html --> 
    <!DOCTYPE HTML> 
    <html lang="en" content-type="text/css"> 
    <head name="viewport" content="width=device-width, initial-scale=1"> 
     <meta charset="UTF-8"> 
     <base href="/"> 

     <title>Trova colori in tinta</title> 

     <!-- CSS --> 
     <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/style.css"> <!-- custom styles --> 
     <link rel="stylesheet" href="normalize.css"> <!-- custom styles --> 

     <!-- JS --> 
     <script type="text/javascript" src="libs/angular/angular.min.js"></script> 
     <script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script> 

     <!-- ANGULAR CUSTOM --> 

     <script type="text/javascript" src="js/controllers/MainCtrl.js"></script> 
     <script type="text/javascript" src="js/controllers/NerdCtrl.js"></script> 
     <script type="text/javascript" src="js/services/NerdService.js"></script> 


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

    </head> 
    <body > 
    <div class="container" ng-app="sampleApp" ng-controller="NerdController"> 

     <!-- HEADER --> 
     <nav class="navbar navbar-default" > 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="/">Colori</a> 
      </div> 

      <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE --> 
      <ul class="nav navbar-nav"> 
       <li><a href="/nerd">Nerds</a></li> 
       <li><a href="/lacci">lacci</a></li> 
      </ul> 
     </nav> 
    <div class="container-fullwidth"></div> 
     <!-- ANGULAR DYNAMIC CONTENT --> 
     <div ng-view></div> 

    </div> 
    </body> 
    </html>

當我點擊「書呆子」或「lacci」鏈接它不顯示這些頁面。

這裏是文件appRoute.js

angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
$routeProvider.when('/', { 
      templateUrl: '/public/views/home.html', 
      controller: 'MainController' 
     }) // nerds page that will use the NerdController 
     .when('/nerds', { 
      templateUrl: '/public/views/nerd.html', 
      controller: 'NerdController' 
     }).when('/lacci', { 
      templateUrl: '/public/views/lacci.html', 

     }).otherwise({ redirectTo: "/home" }); 

    $locationProvider.html5Mode(true);}]);

兩個文件是在型動物的文件夾。我在哪裏錯了？

來源

2017-07-07 michele

我可能是錯的，但我認爲對的'href's錨標籤需要'＃'在前面[W3Schools角路由]（https://www.w3schools.com/angular/angular_routing.asp）像'Nerds' –

@SenSok他沒有使用ui路由器在這裏，所以他做不需要它 –

@michele import ngRoute in this like'angular.module（'appRoutes'，['ngRoute']）' –

我想你忘記注入'ngRoute'

angular.module('appRoutes', ['ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
$routeProvider.when('/', { 
      templateUrl: '/public/views/home.html', 
      controller: 'MainController' 
     }) // nerds page that will use the NerdController 
     .when('/nerds', { 
      templateUrl: '/public/views/nerd.html', 
      controller: 'NerdController' 
     }).when('/lacci', { 
      templateUrl: '/public/views/lacci.html', 

     }).otherwise({ redirectTo: "/home" }); 

    $locationProvider.html5Mode(true);}]);

來源

2017-07-08 01:25:14 query

不，它不工作.. – michele

在上面的代碼中你沒有提到的「ngRoute」的依賴。您需要將其添加到角度模塊的空白數組中。

請使用本地服務器運行您的應用程序。不需要任何Tomcat服務器。您可以輕鬆下載Google Chrome插件「Chrome的Web服務器」。這裏 - https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

您也可以參考這個例子在這裏：https://plnkr.co/xRLK9DvPqSHOEtDuEbtZ`

<html ng-app="myApp"> 
 

 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
 

 
    <script> 
 
    var app = angular.module("myApp", ["ngRoute"]); 
 

 
    app.controller() 
 

 
    app.config(function($routeProvider) { 
 

 
     $routeProvider 
 
     .when('/abc', { 
 
      'template': "This is the ABC page" 
 
     }) 
 

 
     .when('/Home', { 
 
     'template': "This is the home page" 
 
     }) 
 

 
     .when('/About', { 
 
     'template': "This is the About page" 
 
     }) 
 

 
     .when('/Contact', { 
 
     'template': "This is the Contact page" 
 
     }) 
 

 
     .when('/Service', { 
 
     'template': "This is the Service page" 
 
     }) 
 

 
    }) 
 
    </script> 
 

 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 

 
     <nav class="navbar navbar-inverse"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
      <a class="navbar-brand" href="#">Routing App</a> 
 
      </div> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#abc">Abc</a></li> 
 
      <li><a href="#About">About us</a></li> 
 
      <li><a href="#Service">Services</a></li> 
 
      <li><a href="#Contact">Contact</a></li> 
 
      <li><a href="#Contact">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
    <div ng-view></div> 
 
    </div> 
 
</body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
 
</script> 
 
<script src="script.js"></script> 
 

 

 

 
</html>

來源

2017-10-30 10:42:41

角度路由非工作

回答

相關問題