0

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

索引.html

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

应用程序.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-includes 工作,但不是我的 ng-views。我错过了什么吗?

谢谢。

4

1 回答 1

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/

于 2014-11-13T16:51:18.740 回答