updream 一键生成高质量推广成片剧云中文短剧剧本制作平台 Laper 剧本策划到成片协作 AniShort AI短剧协同制作平台

PHP MySQL jquery HTML CSS

AngularJS教程参考手册

AngularJS教程

更新时间2025-08-11

动画应用程序

什么是 AngularJS 中的路由？

如果您想导航到应用程序中的不同页面，但也希望应用程序成为 SPA（单页应用程序），并且没有页面重载，则可以使用 ngRoute 模块。

ngRoute 模块将您的应用程序路由到不同的页面，而无需重新加载整个应用程序。

实例

导航到 "red.htm"、"green.htm" 和 "blue.htm"：

<body ng-app="myApp">

<p><a href="#/!">主页</a></p>

<a href="#!red">红色</a>
<a href="#!green">绿色</a>
<a href="#!blue">蓝色</a>

<div ng-view></div>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});
</script>
</body>

运行实例 »

点击 "运行实例" 按钮查看在线实例

我需要什么？

为了使你的应用程序为路由做好准备，你必须包含 AngularJS Route 模块：

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular-route.js"></script>

然后，您必须将 ngRoute 添加为应用程序模块中的依赖项：

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

现在您的应用程序可以访问提供 $routeProvider 的路由模块。

请使用 $routeProvider 在应用程序中配置不同的路由：

app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/red", {
    templateUrl : "red.htm"
  })
  .when("/green", {
    templateUrl : "green.htm"
  })
  .when("/blue", {
    templateUrl : "blue.htm"
  });
});

它去哪里了？

您的应用程序需要一个容器来放置路由提供的内容。

这个容器就是 ng-view 指令。

可以通过三种不同的方式在应用程序中包含 ng-view 指令：

实例

<div ng-view></div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<ng-view></ng-view>

运行实例 »

点击 "运行实例" 按钮查看在线实例

实例

<div class="ng-view"></div>

运行实例 »

点击 "运行实例" 按钮查看在线实例

应用程序只能有一个 ng-view 指令，这将是该路由提供的所有视图的占位符。

$routeProvider

使用 $routeProvider，您可以定义当用户单击链接时要显示的页面。

实例

定义 $routeProvider：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm"
  })
  .when("/paris", {
    templateUrl : "paris.htm"
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用应用程序的 config 方法定义 $routeProvider。在应用程序加载时将执行在 config 方法中注册的工作。

控制器

使用 $routeProvider，您还可以为每个“视图”定义一个控制器。

实例

添加控制器：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    templateUrl : "main.htm"
  })
  .when("/london", {
    templateUrl : "london.htm",
    controller : "londonCtrl"
  })
  .when("/paris", {
    templateUrl : "paris.htm",
    controller : "parisCtrl"
  });
});
app.controller("londonCtrl", function ($scope) {
  $scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
  $scope.msg = "I love Paris";
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

"london.htm" 和 "paris.htm" 是普通的 HTML 文件，您可以在其中添加 AngularJS 表达式，就像在 AngularJS 应用程序的其他 HTML 部分一样。

这些文件看起来像这样：

london.htm

<h1>London</h1>
<h3>London is the capital city of England.</h3>
<p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>{{msg}}</p>

paris.htm

<h1>Paris</h1>
<h3>Paris is the capital city of France.</h3>
<p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>

<p>{{msg}}</p>

模板

在前面的例子中，我们在 $routeProvider.when 方法中使用了 templateUrl 属性。

您还可以使用 template 属性，它允许您直接在属性值中编写 HTML，而不是引用页面。

实例

编写模板：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
    template : "<h1>Main</h1><p>Click on the links to change this content</p>"
  })
  .when("/banana", {
    template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
  })
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

otherwise 方法

在前面的例子中，我们使用了 $routeProvider 的 when 方法。

您还可以使用 otherwise 方法，当其他所有路由都不匹配时，它将成为默认路由。

实例

如果既没有点击 "Banana" 链接也没有点击 "Tomato" 链接，请告诉他们：

var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/banana", {
    template : "<h1>Banana</h1><p>Bananas contain around 75% water.</p>"
  })
  .when("/tomato", {
    template : "<h1>Tomato</h1><p>Tomatoes contain around 95% water.</p>"
  })
  .otherwise({
    template : "<h1>None</h1><p>Nothing has been selected</p>"
  });
});

运行实例 »

点击 "运行实例" 按钮查看在线实例

动画应用程序

相关视频

免费