AngularJS 避繁就简的路由

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

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

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

通常我们的URL形式为

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

@H_502_1@

这里写图片描述@H_502_1@@H_502_1@

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

路由设置对象解析:@H_502_1@

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

实现路由的大致步骤:@H_502_1@

第一步:

导入ngRoute模块@H_502_1@

@H_502_1@

第二步:

在应用模块中使用ngRoute@H_502_1@

502_1@

第三步:

使用 ng-view 指令@H_502_1@

@H_502_1@

第四步:

配置 $routeProvider 路由规则@H_502_1@

第五步:

通过超链接使用路由@H_502_1@

完整案例:

1 route.html
页面@H_502_1@
<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相关文章