0

アプリケーションのサブビューに ng-view を使用するのに苦労しています。複数のチュートリアルに従い、routeProvider 属性と locationProvider 属性をチェックして、それらが正しいパスを指していることを確認しました。

index.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 に答える