Angular.JS Routing-Probleme

Ich bin ein Anfänger zu Angular JS. Ich arbeite durch das hier aufgelistete Tutorial: "https://tests4geeks.com/tutorials/single-page-application-using-angularjs-tutorial/". Ich kann die Seiten, die aus einer separaten Vorlagendatei stammen, nicht weiterleiten. Der Autor des Tutorials erklärt, dass "Browser nicht das Laden von Ressourcen von der Festplatte mit Ajax unterstützen." Also habe ich die Dateien auf meinen VPS hochgeladen. Aber ich kann immer noch kein Routing machen. Ich habe erfolgreich viele Webseiten mit diesem gut konfigurierten VPS gehostet.Angular.JS Routing-Probleme

angular_test.html

<html ng-app="myApp"> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script> 
    </head> 

    <body> 
    <a href="#/">Home</a> 
    <a href="#/blog">Blog</a> 
    <a href="#/about">About</a> 

    <h1>{{message}}</h1> 
    <div ng-view></div> 

    <script src="app.js"></script> 
    </body> 
</html>

app.js

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

app.controller('HomeController', function($scope) { 
    $scope.message = 'This is home controller'; 
}); 
app.controller('BlogController', function($scope) { 
    $scope.message = 'Hello from BlogController'; 
}); 

app.controller('AboutController', function($scope) { 
    $scope.message = 'Hello from AboutController'; 
}); 
app.config(function($routeProvider) { 
    $routeProvider 

    .when('/', { 
    templateUrl : 'home.html', 
    controller : 'HomeController' 
    }) 

    .when('/blog', { 
    templateUrl : 'blog.html', 
    controller : 'BlogController' 
    }) 

    .when('/about', { 
    templateUrl : 'about.html', 
    controller : 'AboutController' 
    }) 

    .otherwise({redirectTo: '/'}); 
});

home.html

<h1>Home</h1> 

<h3>{{message}}</h3>

blog.html

<h1>Blog</h1> 

<h3>{{message}}</h3>

about.html

<h1>About</h1> 

<h3>{{message}}</h3>

Quelle

2016-05-23 Min Htet Oo

es wie Ihr Beispiel sieht arbeitet für mich (Lauf http-serverhttps://www.npmjs.com/package/http-server)

Haben Sie sich vergewissert, dass die Verzeichnisstruktur

- index.html (angular_test.html) 
- app.js 
- pages/ 
    |-- home.html 
    |-- blog.html 
    |-- about.html

Quelle

2016-05-23 14:42:54

Ich hatte Fehler mit meinem Verzeichnis und ich habe meinen Code bearbeitet. Aber es funktioniert immer noch nicht. Sie können es hier überprüfen "http://128.199.161.212/gym/Anglar/angular_test.html". –

Versuchen korrekt ist diese

<!DOCTYPE html> 

<html> 
<head> 
    <script src="~/angular-1.5.3/angular-1.5.3/angular.min.js"></script> 
    <script src="~/angular-1.5.3/angular-1.5.3/angular-route.min.js"></script> 
    <meta name="viewport" content="width=device-width" /> 
    <title>test</title> 
</head> 
<body ng-app="myApp"> 
    <a href="#/contact">contact</a> 
    <a href="#/about">about</a> 
    <div ng-view></div> 
</body> 
</html> 
<script> 
    angular.module('myApp', ['ngRoute']).config(function ($routeProvider) { 
     $routeProvider.when('/home', { 
      controller: 'homeCtrl', 
      templateUrl: '/Html/home.html' 
     }); 
     $routeProvider.when('/contact', { 
      controller: 'contactCtrl', 
      templateUrl: '/Html/contact.html' 
     }); 
     $routeProvider.when('/about', { 
      controller: 'aboutCtrl', 
      templateUrl: '/Html/about.html' 
     }); 

     $routeProvider.otherwise({ redirectTo: "/home" }); 
    }).controller('homeCtrl', function ($scope) { 
     $scope.PageName = "Home Page " 
    }).controller('contactCtrl', function ($scope) { 
     $scope.PageName = "Contact Page " 
    }).controller('aboutCtrl', function ($scope) { 
     $scope.PageName = "About Page " 
    }) 
</script>

Quelle

2016-05-23 14:48:17

Ich habe es. Das ist, weil mein Chrom-Browser ' t lade meine Ressourcendateien herunter. Ich habe gerade die folgenden Schritte ausgeführt. (Failed to load resource under Chrome) 1.Klicken Sie mit der rechten Maustaste auf chrome 2. Gehen Sie zu 'inspect element' 3. Suchen Sie nach der 'Netzwerk' Registerkarte irgendwo oben. Klick es. 4. Aktivieren Sie das Kontrollkästchen "Cache deaktivieren". Es löst meine Probleme, aber ich weiß nicht warum.

Quelle

2016-05-23 15:52:26

Angular.JS Routing-Probleme

Antwort

Verwandte Themen