Angular 1.5路由示例

时间:2015-10-21 10:55:35

标签: angularjs routing

我正在尝试使用$ route定位角度1.5路由示例。如果我使用比创建代码示例更高的角度版本,我已经看过了JSFiddle示例。我找不到任何高于1.2的东西。理想情况下,我需要一个AngularJS 1.5的工作示例。

我已经尝试了this示例:

var app = angular.module( "myApp", [] );

app.config( function ( $routeProvider ) {
  $routeProvider
  .when( '/this', { templateUrl: 'this.html' } )
  .when( '/that', { templateUrl: 'that.html' } )
  .when( '/other', { templateUrl: 'other.html' } )
  .otherwise( { redirectTo: '/this' } );
});

app.controller( 'MainCtrl', function ( $scope ) {
});

对于1.2(并且可能在上面)失败了。

1 个答案:

答案 0 :(得分:7)

当AngularJS 1.2发布时,ngRoute已被移入其自己的模块中。这意味着您需要包含一个单独的文件以使路由工作在上面并且等于AngularJS 1.2。这意味着要做的第一件事就是包含angular-route.js文件,就像包含任何其他脚本一样

<script src="angular-route.js">

其次,将依赖项包含在您的应用模块中。

var myApp = angular.module('myApp', ['ngRoute', 'otherModule']);

最后,您可以像在上面的代码中一样配置$routeProvider

app.config(function($routeProvider){
    $routeProvider
      .when('/',{
          template: '<h1>Work</h1><a href="#/test">Test Route</a>'
      })
      .when('/test',{
          template: '<h1>Test</h1><a href="#/">Back</a>'
      })
      .otherwise({ 
        template: '<h1>Not Found</h1>'
      });
});

这就是路由背后的整个设置魔力。这是一个有效的example

修改1:

如果您使用的是bower,则可以使用以下内容获取模块:

bower install angular-route