角度路由非工作

我想用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

角度路由非工作

回答

相关问题