AngularJS学习(六) 路由控制 ng-route

最新推荐文章于 2022-07-13 14:20:25 发布

Mooner_guo

最新推荐文章于 2022-07-13 14:20:25 发布

阅读量4k

点赞数 1

分类专栏： AngularJS

本文链接：https://blog.csdn.net/Mooner_guo/article/details/42453849

版权

AngularJS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一.AngularJS路由控制介绍:

1.简介：AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。

2.依赖js文件:

angular.js,angular-animate.js,angular-route.js

3.模板：没有<html></html>,<head></head>等的html文件，只有类似div等标签，它将通过路由控制插入到主页面使用ng-view的标签中(index.jsp/index.html)

二.代码讲解

案例:写一个书店的页面，主页直接跳转显示xxx的书屋，后面/list就跳转到list页面

1.写一个index.jsp或者index.html作为单页应用的主页面，引入需要的js文件

<span style="font-size:14px;"><%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="bookstore">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<div ng-view></div>
<script src="js/angular.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-route.js"></script>

<script src="route/app.js"></script>
<script src="route/controllers.js"></script>
</body>
</html></span>

2.定义程序AngularJS入口程序代码app.js

<span style="font-size:14px;">var myapp = angular.module('bookstore',['ngRoute','ngAnimate','bookstoreContrls']);
myapp.config(function($routeProvider){
	$routeProvider.when('/hello',{  //注意这里的路径要带斜杠，不然不会插入模板以及调用controller
		templateUrl:'route/hellobookstore.html',
		controller:'hellocontrl'
	}).when('/list',{
		templateUrl:'route/booklist.html',
		controller:'booklist'
	}).otherwise({
		redirectTo:'/hello'
	})
});</span>

解释：1.这里依赖注入ngRoute,ngAnimate,是AngularJS的服务，bookstoreContrls是自己定义的模块

2.使用config来配置路由提供服务$routeProvider

3.使用when，otherwise进行路由控制，templateUrl是插入到ng-view的模板页面

3.写自己定义的模块bookstoreContrls，文件名 controllers.js

var bookstoreContrs = angular.module('bookstoreContrls',[]);//申明自定义模块
bookstoreContrs.controller('hellocontrl',['$scope',function($scope){
	$scope.owner={name:"张三"};
}]);
bookstoreContrs.controller('booklist',['$scope',function($scope){
	$scope.books=[{name:"《三国演绎》",author:"罗贯中"},
	              {name:"《水浒传》",author:"施耐庵"},
					 {name:"《红楼梦》",author:"曹雪芹"}];
}]);

解释:这里定义了2个controller，分别是hellocontrl和booklist

4.两个模板页面

booklist.html

<!--显示book列表的模板-->
<div>
	<ul>
		<li ng-repeat="book in books">书名：{{book.name}}     作者:{{book.author}}</li>
	</ul>
</div>

hellobookstore.html

<!--显示book列表的模板-->
<div>
    <ul>
        <li ng-repeat="book in books">书名：{{book.name}}     作者:{{book.author}}</li>
    </ul>
</div>

Mooner_guo

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习(六) 路由控制 ng-route

一.AngularJS路由控制介绍:1.简介：AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载
复制链接

扫一扫