angularjs ngRoute nicht funktioniert

ngRoute nicht arbeiten, während Sie keine Fehler werden auf der Konsole .

gegeben, keine Fehler zu Konsole, wie es möglich ist, zu Folgen, Ausführung von ngRoute Verfahren ?

sah ich Beispiele für die Verwendung von $locationProvider.html5Mode(true), verstehe ich nicht, wenn, dass sollte verwendet werden, aber ich glaube nicht, dass es erforderlich ist, um ngRoute Arbeit.

index.html hat die navigation links und ngView :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script src="bower_components/angular/angular.js"> </script>
  <script src="bower_components/angular-route/angular-route.js"> </script>
  <script src="main.js"> </script>
</head>

<body ng-app="Main">
<ul>
  <li> <a href="#content/first"> first partial </a> </li>
  <li> <a href="#content/second"> second partial </a> </li>
</ul>
<div ng-view></div>

</body>
</html>

main.js definiert die router und dem Controller :

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

function router($routeProvider) {

 var route = {templateUrl: 'partials/default.html'};
  $routeProvider.when('', route);

  route = {
    templateUrl: 'partials/first.html',
    controller: 'first'
  };
  $routeProvider.when('content/first', route);

  route = {
    templateUrl: 'partials/second.html',
    controller: 'second'
  };
  $routeProvider.when('content/second', route);
}

Main.config(['$routeProvider', router]);

Main.controller('first', function($scope) {
  $scope.list = [1,2,3,4,5];
});

Main.controller('second', function($scope) {
  $scope.list = [1,2,3];
});

partials machen Sie einfach Gebrauch von ngRepeat:

<header> First content </header>
<p ng-repeat="iter in list">
  first
</p>

gelöst :
mein problem war, dass meine ganze Anwendung befindet sich unter /ang/Präfix, und nach dem hinzufügen das Präfix für urls nun geht es .
müsste es nicht einen Weg, um relative urls verwenden ? ich denke, es sollte und ich werde versuchen, es zu beheben .

das problem ist NICHT mit der unterschiedlichen syntax wie jeder vorgeschlagen, und das ist beunruhigend an der Tatsache, dass die JS-Entwickler müssen in der Tat nicht zu verstehen, die eine Zeile syntax, die Sie verwenden, überall .

<a href="#/content/first"> prüfen Sie, wie dieses
Nein, mit #/Inhalt/erste hat nicht funktioniert .
Ich sehe nicht, wo rufst du an dein controller im html-Code...
der controller sollte nicht aufgerufen werden, in html, da es fertig ist mit $routeProvider "wenn" - Klausel .
Sie sind missusing die $routeProvider, warum nicht Sie Folgen Sie einfach den docs?

InformationsquelleAutor yakoub abaya | 2014-12-10

  1. 2

    Überprüfen Sie bitte diesen code
    HTML-code

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"> </script>
  <script src="script.js"> </script>
</head>

<body ng-app="Main">
<ul>
  <li> <a href="#/content/first"> first partial </a> </li>
  <li> <a href="#/content/second"> second partial </a> </li>
</ul>
<div ng-view></div>

</body>
</html>

    Js-Datei 

    var app = angular.module('Main', ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
 $routeProvider.
      when('/content/first', {
        templateUrl: 'first.html', 
        controller: 'first'
      }).
      when('/content/second', {
        templateUrl: 'second.html',
        controller: 'second'
      }); 
}]); 

app.controller('first', function($scope) {
  $scope.list = [1,2,3,4,5];
});

app.controller('second', function($scope) {
  $scope.list = [1,2,3];
});

    ersten Seite HTML -

    <header> First content </header>
<p ng-repeat="item in list">
{{item}}
</p>

    hier ist Ihr code arbeiten klicken Sie auf

    InformationsquelleAutor sagar43

  2. 0

    Nicht wiederverwenden route-Objekt, da es Probleme verursachen könnte. Überlegen Sie es in der form (Vorschlag des docs https://docs.angularjs.org/api/ngRoute/service/$route#Beispiel ):

    $routeProvider
   .when('content/second', {
    templateUrl: 'partials/second.html',
    controller: 'second'
});

    Wenn Sie wollen, um das Debuggen der Strecken, Winkel durchläuft, möchten Sie vielleicht zu schauen, eckig - Abfangjäger: https://docs.angularjs.org/api/ng/service/$http#Abfangjäger

    Auch $locationProvider.html5Mode(true) ist nicht notwendig, um ngRoute Arbeit. Es ist einfach eine Möglichkeit, zu definieren, wie die URLs Aussehen sollte und arbeiten. im HTML-Modus ändern Sie können die links nicht verwenden, um nicht # mehr und einfach www.yoursite.com/app/content/second statt www.yoursite.com/app#content/second

    geändert von code, so dass andere route-Objekte werden verwendet für jede when-Klausel . ich Stimme nicht mit, wie sich JS-Entwickler schreiben einzige Zeile code, es ist eine schlechte Praxis, meiner Meinung nach .

    InformationsquelleAutor Adrian B.

  3. 0

    Ihre route-Konfiguration nicht korrekt ist, übernehmen Sie route - Funktion ausführen für jeden link u klicken Sie aber auch nicht.

    damit Ihre route Funktion sollte wie

      function router($routeProvider) {

      $routeProvider.
      when('/content/first', {
        templateUrl: 'partials/first.html',
        controller: 'first'
      }).
      when('/content/second', {
        templateUrl: 'partials/second.html',
        controller: 'second'
      }).
      otherwise({
        templateUrl: 'partials/default.html'
      });
  }

    beachten Sie, dass urls werden sollte, wie <a href="#/content/first"> //Hinweis: der Schrägstrich nach #

    übereinstimmen, dass die Strecken in route Funktion sollte wie when('/content/first', { Hinweis zu den führenden slash

    hier ist die Arbeit Plunker

    Geht das, dass nur eine Kopie von dem was ich gerade schrieb?
    lol, noo, do u haben router - Funktion, überprüfen Sie die otherwise route überprüfen Sie die when URL
    Ich könnte dich dasselbe Fragen 🙂
    ich freue mich auf Ihre Plunker Beispiel zu entdecken mein problem, sondern die unterschiedliche syntax sollte keinen Unterschied machen, nur dass meine version hat bessere code-Lesbarkeit .
    warum u sagte u bessere Lesbarkeit ?

    InformationsquelleAutor K.Toress

  4. 0

    Definieren Sie Ihre Routen in routes.js

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

route.config(function ($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "views/home.html",
            controller : 'homeCtrl'
        })
        .when("/home", {
            templateUrl: "views/home.html",
            controller : 'homeCtrl'
        })
        .when("/product", {
            templateUrl: "views/product-info.html"
        })
        .otherwise({redirectTo :'/'});
});

    Befestigen Sie den router an Ihren Haupt-Modul.

    angular.module('myApp', ['route']);

    Importieren Sie die Skripts in Ihre index.html

    InformationsquelleAutor Edison D'souza

Schreibe einen Kommentar