2014-04-01 99 views
0

我想學習角度和我有簡單的開箱即用應用程序。我有一個主頁,它工作正常,但當我嘗試去任何其他頁面時,它會將我重定向回主頁面。我懷疑這是造成它的原因,但我不知道如何解決它。 我app.js有這個如何使路線工作在角度

'use strict'; 

angular 
    .module('angularApp', [ 
    'ngCookies', 
    'ngResource', 
    'ngSanitize', 
    'ngRoute' 
    ]) 
    .config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
    }); 

我有我main.js和about.js控制器。 這裏是我的main.html中

<div class="header"> 
    <ul class="nav nav-pills pull-right"> 
    <li class="active"><a ng-href="#">Home</a></li> 
    <li><a ng-href="#">About</a></li> 
    <li><a ng-href="#">Contact</a></li> 
    </ul> 
    <h3 class="text-muted">angular</h3> 
</div> 

<div class="jumbotron"> 
    <h1>Shipit</h1> 
    <p class="lead"> 
    <img src="images/yeoman.png" alt="I'm Yeoman"><br> 
    Always a pleasure scaffolding your apps. 
    </p> 
    <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p> 
</div> 

<div class="row marketing"> 
    <div class="hero-unit"> 
     <ul> 

      <!-- Here we use the AngularJS directive: ng-repeat to loop through our awesomeThings 
      and print them out as list items using the {{}} bindings --> 
      <div ng-repeat="thing in awesomeThings">{{thing}}</div> 
     </ul> 
    </div> 
</div> 



<div class="footer"> 
    <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p> 
</div> 

,這裏是我的控制器

about.js控制器

'use strict'; 

angular.module('angularApp') 
    .controller('AboutCtrl', function ($scope) { 
    $scope.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma', 
     'php' 
    ]; 
    }); 

和main.js控制器

'use strict'; 

angular.module('angularApp') 
    .controller('MainCtrl', function ($scope) { 
    $scope.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma', 
     'php' 
    ]; 
    }); 

我想要的鏈接被路由到正確的地方在等...我想要做的角度的方式。

感謝

回答

1

是你只有一個路由中定義的問題:

.config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }) 
     .otherwise({ 
     redirectTo: '/' 
     }); 
}); 

因此,如果用戶進入/ foo的它會掉下來,否則這將給你爲主。

添加另一條路線:

.when('/about', { 
    templateUrl: 'views/main.html', //possibly uses a different template 
    controller: 'AboutCtrl' 
}); 
1

像這樣的事情

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

app.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { templateUrl: 'templates/dashboard.html', controller: 'DashboardCtrl' }) 
     .otherwise({ redirectTo: '/' }) 
});