Angularjs Routing funktioniert nicht

Alles funktionierte gut, bis ich versuchte, Routing hinzuzufügen. Ich habe gelesen, dass Angularjs Version 1.2+ 'ngRoute' als Abhängigkeit benötigt (ich benutze Version 1.2.16). Ich habe es hinzugefügt, aber es funktioniert immer noch nicht. Unten sind meine Codes.Angularjs Routing funktioniert nicht

test.html (Hauptseite)

<html ng-app="demoApp"> 
<head> 
    <title></title> 
</head> 
<body> 
    <p>Front Page</p> 
    <div ng-view></div> 
    <script src="angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script> 
    <script src="testjs.js"></script> 
</body> 
</html>

testjs.js

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

demoApp.config(function ($routeProvider) { 

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

}); 

var controllers = {}; 
controllers.SimpleController = function ($scope){ 
    $scope.first = "Info"; 
    $scope.customers=[ 
     {name:'jerry',city:'chicago'}, 
     {name:'tom',city:'houston'}, 
     {name:'enslo',city:'taipei'} 
    ]; 
}; 
demoApp.controller(controllers);

first.html

<div> 
    <input type="text" ng-model="name"/> 
    </br> 
    {{first}} 
    </br> 
    <ul> 
     <li ng-repeat="cust in customers | filter:name">{{cust.name | uppercase}} - {{cust.city}}</li> 
    </ul> 
</div>

Quelle

2014-04-17 yellowbyte

Es gibt einen Link zu einem Bild von meinem Arbeitsverzeichnis: http://postimg.org/image/979tsaecd/ – yellowbyte

Sind Sie sicher, dass dies die richtige Syntax ist: demoApp.controller (Controller)? Ich kann keinen Hinweis darauf finden. – Yoeri

Ja, ich habe es in diesem Tutorial gesehen: https://www.youtube.com/watch?v=Uj-KLCTsQrw. – yellowbyte

Hier ist die einfachste Einrichtung possble, werde ich versuchen, um einen anderen mit Ihrem Code zu machen: http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview

EDIT mit dem Beispielcode aktualisiert. Alles scheint zu funktionieren?

BEARBEITEN 2 Das Problem ist OP lief keinen Webserver. Ng-Route benötigt einen Webserver, um richtig zu funktionieren.

Quelle

2014-04-17 23:54:32 Yoeri

Danke! Ich werde versuchen zu sehen, was mit meinen Codes nicht stimmt. Trotzdem danke! – yellowbyte

anscheinend habe ich diesen Fehler "XMLHttpRequest kann Datei nicht laden: ///partials/first.html. Cross-Ursprungsanforderungen werden nur für HTTP unterstützt." Ich werde versuchen, es jetzt zu beheben. Vielen Dank! – yellowbyte

versuchen Sie mit Partials/first.html (ohne Schrägstrich) – Yoeri

Mein Routing funktionierte nicht, da ein Ausrufezeichen in die URL eingefügt wurde, als ich versuchte, zu meinen Routen zu navigieren. Ich habe $locationProvider wie diese

app.config(function($routeProvider, $locationProvider) { 
    $locationProvider.hashPrefix('');

das Ausrufezeichen und meine Vorlage Ansichten begann zu entfernen erscheint, wenn ich ihnen navigiert. Ich fand die Antwort hier Exclamation mark after hash (#!) in angularjs app

Quelle

2017-05-31 20:16:53 gary69

Antwort

Verwandte Themen