AngularJS 避繁就简的路由

前端之家收集整理的这篇文章主要介绍了AngularJS 避繁就简的路由前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AngularJS 路由允许我们通过不同的 URL 访问不同的内容

通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。

通常我们的URL形式为

,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如:

这里写图片描述

先看看$routeProvider 的配置对象属性方法

路由设置对象解析:

名称),{ template: string(模板提示字符串),templateUrl: string(模板路径URL),controller: string,function 或 array(在当前模板创建控制器,生成新的 $scope 作用域),controllerAs: string(控制器别名),redirectTo: string,function(重定向地址),resolve: object(当前路由所依赖的模块) });

实现路由的大致步骤:

第一步:

导入ngRoute模块

第二步:

在应用模块中使用ngRoute

第三步:

使用 ng-view 指令

第四步:

配置 $routeProvider 路由规则

第五步:

通过超链接使用路由

完整案例:

1 route.html
页面

<Meta charset="utf-8"> AngularJS 路由实例

<script type="text/javascript" src="js/jquery.min.js">
<script type="text/javascript" src="js/bootstrap.min.js">
<script type="text/javascript" src="js/angular.min.js">
<script type="text/javascript" src="js/angular-route.min.js">
<script type="text/ng-template" id="home.tpl.html">

{{data}}

猜你在找的JavaScript相关文章