webentwicklung-frage-antwort-db.com.de

Angularjs Routing funktioniert nicht

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

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>
14
yellowbyte

Hier ist das grundlegendste Setup, ich werde versuchen, ein weiteres mit Ihrem Code zu erstellen: http://plnkr.co/edit/sN9TagVBOdX3mkrxaTiu?p=preview

[~ # ~] bearbeiten [~ # ~] mit dem Beispielcode aktualisiert. Alles scheint zu funktionieren?

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

11
Yoeri

Mein Routing funktionierte nicht, weil in der URL ein Ausrufezeichen eingefügt war, als ich versuchte, zu meinen Routen zu navigieren. Ich fügte hinzu $locationProvider so was

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

um das Ausrufezeichen zu entfernen, wurden meine Vorlagenansichten angezeigt, als ich zu ihnen navigierte. Ich habe die Antwort hier gefunden Ausrufezeichen nach Raute (#!) In der App anglejs

7
gary69