Question

我一直在努力将ng-view用于我的应用程序子视图。我已经遵循了多个教程，甚至检查了routeProvider和locationProvider属性，以确保它们指向正确的路径。

的index.html

<html ng-app="elephantApp">
...
     <div id="view" ng-view>{{$scope.message}}</div>
...
</html>

的application.js

/*
Main AngularJS for Elephant Blog App

* /

var elephantApp = angular.module("elephantApp", ["ngRoute", "ui.bootstrap"]); 

elephantApp.config(function ($routeProvider, $locationProvider){ 
$routeProvider 
// Home 
.when('/', {
    templateUrl: "app/partials/home.html", 
    controller: "ElephantController"
})
.when('/about', {
    templateUrl: 'partials/about.html', 
    controller: 'PageCtrl'
}) ; 

$locationProvider

.html5Mode(true);
});

elephantApp.controller("ElephantController", function($scope, $route, $routeParams, $location){
    $scope.contentClass = 'content-home';

    $scope.message = {message: "Hi"}; 
}); 

elephantApp.controller("PageCtrl", function($scope, $route, $routeParams, $location){
    $scope.contentClass = 'content';
    $scope.model = {message: "Hey!"};
});

/*
function ElephantController($scope, $route, $routeParams, $location){
    $scope.contentClass = 'content-home';
     $scope.$route = $route;
     $scope.$location = $location;
     $scope.$routeParams = $routeParams;
     $scope.model = {message: "Hey"};

}
*/

所以我根本不知道发生了什么。

我甚至尝试过像：

这样的代码

// Pages 
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"}) 
.when("/faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"}) 
.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})

// Blog 
.when("/blog", {templateUrl: "partials/blog.html", controller: "BlogCtrl"}) 
.when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"})

 // else 404 
 .otherwise("/404", {
    templateUrl: "partials/404.html", 
    controller: "PageCtrl"
 });

我想使用上面的代码，因为这是我主要想做的事情。虽然它不起作用。 ng-include工作但不包括我的ng-views。我错过了什么吗？

感谢。

Answer 1

默认情况下，angular中的路由是＃之后的URI路径中的哈希值，例如http://app/#/about。通过将$locationProvider.html5Mode设置为true，我们可以在没有＃http://app/about的情况下编写，但需要该服务器始终返回index.html。为此，您可以使用Express服务器：http://www.seankenny.me/blog/2013/08/05/angularjs-in-html5-mode-with-expressjs/

ng-view和路由不起作用

1 个答案: