JavaScript框架之AngularJS学习——UIRouter

最新推荐文章于 2021-06-09 15:43:42 发布

陈小名

最新推荐文章于 2021-06-09 15:43:42 发布

阅读量470

点赞数

分类专栏： AngularJS学习笔记文章标签：前端 angularjs 框架 javascript uirouter

本文链接：https://blog.csdn.net/chen_XiaoMing123/article/details/78200087

版权

AngularJS学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

JavaScript框架之AngularJS学习——UI Router

昨天下午到今天上午，学习了一个AngularJS第三方组件。在学习的时候遇到一些有趣的问题。

UI Router是基于AngularJS的，用于编写单页面应用（Single Page Application, SPA）的路由框架，支持多视图嵌套和多个命名视图。

学习资源：

github源码地址：https://github.com/angular-ui/ui-router

wiki:https://github.com/angular-ui/ui-router/wiki

读者可以通过上面方式深入了解UI Router的使用方式（例子为学习中用到的例子，借鉴一下）。

下面开始使用UI Router做一个简单页面路由。

下载UI Router的release版本，然后在页面中引入即可：

<script type="text/javascript" src="../../lib/angular-1.6.5/angular.js"></script>
<script type="text/javascript" src="../../lib/angular-ui-router/release/angular-ui-router.js"></script>

因为UI Router是基于AngularJS的，所以要在引入之前引入相应的angular.js。

在script中引入该模块

var myApp = angular.module("myApp", ["ui.router"]);			//引入ui.router模块

然后使用两个模块中的两个Provider对象。

$urlRouterProvider

$stateProvider

使用方法如下：（看例子，可以看出跟ngRouter的用法很类似）

eg:

myApp.config(function($stateProvider, $urlRouterProvider){
	$urlRouterProvider.otherwise("/");
	$stateProvider.state("home", {
		url: "/home",
		templateUrl: "template/home.html",
		controller: function($scope){
			$scope.books = ["Think In Java", "Learning Bootstrap", "NG Books2"];
		}
	});
	$stateProvider.state("about", {
		url: "/about",
		templateUrl: "template/about.html",
		controller: function($scope){
			$scope.name = "陈小名";
		}
	});
	$stateProvider.state("contact", {
		url: "/contact",
		templateUrl: "template/contact.html"
	});
	$stateProvider.state("hello", {
		url:"/thisisatestforurl",
		template: "<h1>hello world</h1>"
	});
});

$urlRouterProvider的otherwise()方法指定当我们请求不存在的状态名时跳转到的页面，例子中跳转到当前根路径。

$urlRouterProvider.otherwise("/");

$stateProvider对象的state()方法接受两个参数，第一个为状态，第二个是一个对象，用于描述状态信息：url属性为状态对应的URL；emplate/templateUrl属性为对应的状态内容，可以是HTML模板内容，也可以是一个视图模板的路径；还有一个controller，用于指定控制器名称或控制器构造方法。

通过上面的说明，好像跟ngRouter的用法没有什么不同，但是还是有区别的。因为ngRouter多个视图之间不能进行嵌套。

下面编写例子中相应的内容

文件列表如：

对应的home.html

<h4>我的书籍</h4>
	<ul class="nav">
	<li ng-repeat="book in books">
		<span class="glyphicon glyphicon-book"> <a href="#">{{book}}</a></span>
	</li>
</ul>

对应的about.html

<h4>关于页面</h4>
姓名：{{name}}

对应的contact.html

<h4>联系我：</h4>
<a href="mailto:547480202@qq.com">
		547480202@qq.com
</a>

对应的index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
	<meta charset="UTF-8">
	<title>uiRoute</title>
	<link rel="stylesheet" href="../../lib/bootstrap-3.3.7/dist/css/bootstrap.css">
	<link rel="stylesheet" href="../../lib/bootstrap-3.3.7/dist/css/bootstrap-theme.css">
	<script type="text/javascript" src="../../lib/angular-1.6.5/angular.js"></script>
	<script type="text/javascript" src="../../lib/angular-ui-router/release/angular-ui-router.js"></script>
	<script type="text/javascript" src="app.js"></script>
</head>
<body>
	<div>
		<ul class="breadcrumb">
			<li><a href="/home" ui-sref="home">首页</a></li>
			<li><a href="/about" ui-sref="about">关于</a></li>
			<li><a href="/contact" ui-sref="contact">联系我</a></li>
			<li><a ui-sref="hello">Hello</a></li>
		</ul>
	</div>

	<div ui-view></div>

	<div class="footer navbar-fixed-bottom">
		<div class="container">
			Chen Xiaoming, Blog:
			<a href="http://blog.csdn.net/chen_XiaoMing123">http://blog.csdn.net/chen_XiaoMing123</a>
		</div>
	</div>
</body>
</html>

运行上面的index.html

在chrome会出现有趣的问题。

在Chrome浏览器中，会出现类似这样的问题，但是使用FireFox浏览器打开index.html页面就不会有该问题。