如何使路线有角度地工作

Question

我正在尝试学习角度，我有简单的开箱即用应用程序。 我有一个主页，它工作正常，但当我尝试去任何其他页面时，它将我重定向回主页。 我怀疑这是导致它的原因，但我不确定如何解决它。 我的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'
    ];
  });

我希望链接被路由到大约等的正确位置...我想以角度方式进行。

谢谢

Answer 1

问题是您只定义了一条路线：

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

因此，如果用户进入/ foo，它将落入否则将使您进入main。

添加另一条路线：

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

Answer 2

像这样的东西

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

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