Angular routing funktioniert nicht

Ich versuche meine erste Web-App mit MEAN-Stack zu bauen und ich habe ein Problem mit dem Angular-Routing.Angular routing funktioniert nicht

Wenn ich auf "Nerds" oder "Lacci" Link klicke, werden diese Seiten nicht angezeigt.

hier ist die Datei 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);}]);

Die beiden Dateien in differents Ordner sind. Wo liege ich falsch?

Quelle

2017-07-07 michele

Ich könnte falsch sein, aber ich denke, die 'href's auf die Anchor Tags müssen '#' in Front [W3Schools Winkelrouting] (https://www.w3schools.com/angular/angular_routing.asp) wie 'Nerds' –

@SenSok er ist nicht mit UI-Router hier, also tut er nicht brauchen es –

@michele import ngRoute in Modul wie diesem 'angular.module ('appRoutes', ['ngRoute'])' –

Ich glaube, Sie '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);}]);

Quelle

2017-07-08 01:25:14 query

Nein, es funktioniert nicht .. – michele

In obigen Code zu injizieren, vergessen Sie nicht die "ngRoute" Abhängigkeit erwähnt haben. Sie müssen es in das leere Array Ihres Winkelmoduls einfügen.

Bitte führen Sie Ihre Anwendung mit einem lokalen Server. Es ist kein Tomcat-Server erforderlich. Sie können einfach ein Google Chrome Plugin "Webserver für Chrome" herunterladen. hier- https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

Sie können hier auf dieses Beispiel beziehen: 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>

Quelle

2017-10-30 10:42:41

Angular routing funktioniert nicht

Antwort

Verwandte Themen