Question

处理简单的测试应用程序，而且它让我非常愤怒，为什么它没有路由页面对我来说，似乎每件事都很好，但我不能看到关于页面和联系页面

<ul class="nav navbar-nav navbar-right">
  <li><a href="#"> Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>
<div id="main">
  <div ng-view></div>
</div>
<script src="/node_modules/angular/angular.js"></script>
<script src="/node_modules/angular-route/angular-route.js"></script>
<script src="js/app.min.js"></script>

** app.js **

(function () {
    var app = angular.module('fjapp', ['ngRoute']);

    app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'pages/home.html',
                controller: 'homeController'
            })
            .when('/about', {
                templateUrl: 'pages/about.htm',
                controller: 'aboutControler'
            })
            .when('/contact', {
                templateUrl: 'pages/contact.html',
                controller: 'contactController'
            });
    });

    app.controller('homeController', ['$scope', function ($scope) {
        $scope.message = "Welcome to the home page";
    }]);

    app.controller('aboutController',['$scope', function($scope){
        $scope.message = "Ok, now you are in About page";
    }]);

    app.controller('contactController',['$scope',function($scope){
        $scope.message = "Here find all the contact information";
    }]); 
})();

我错过了什么..

Answer 1

您错过了<exclude/>标记中的/。它应该是这样的：

<强>更新

将<li><a href="#/about">About</a></li> <li><a href="#/contact">Contact</a></li>添加到您的$locationProvider.hashPrefix('');。这是一个工作 plunker

Answer 2

可以做这样的事情

<强> HTML

<button type="button" class="btn btn-default" ng-click="goto('main')">Main</button>

<强>控制器

$scope.goto = function(pState){
   $state.go(pState);
}

以角度js路由页面

2 个答案: