Angular的模块化开发

最新推荐文章于 2023-11-14 08:59:54 发布

_冷月心

最新推荐文章于 2023-11-14 08:59:54 发布

阅读量1.3k

点赞数

分类专栏： angular 文章标签： angular ui-router 模快化开发

本文链接：https://blog.csdn.net/qq_42813491/article/details/89326022

版权

angular 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

Angular的模块化开发

目录结构

在这里插入图片描述

说明：模块化开发会用外链模板，需要跑在服务器环境
上述结构WWW文件夹是项目根目录，子文件夹router-template里是各个抽离出去的模版
和router-template同级的index.html是入口文件，它和模板里的index.html 不是一回事

模板内容

root.html

<header>
	<h1>header</h1>
</header>

<ui-view></ui-view>

<footer>
	<h1>footer</h1>
</footer>

这是最基础的模板，所有模板都作为这个家伙的子模版进行填充，ui-view可以理解为填充的位置
如果你把ui-view放在最后，就是这样

app.html

<section class="content">
	<div class="left">
		<ul>
			<li><a ui-sref="root.app.index" ui-sref-active="active">home</a></li>
			<li><a ui-sref="root.app.news"  ui-sref-active="active">news</a></li>
			<li><a ui-sref="root.app.music" ui-sref-active="active" >music</a></li>
			<li><a ui-sref="root.app.about" ui-sref-active="active" >about</a></li>
		</ul>
	</div>

	<div class="right">
		<ui-view></ui-view>
	</div>
</section>

app模板就是填充的父模板root，注意这里ui-sref="root.app.index"，打点写了，表示填充层级
可以看到，在最下边还有一个ui-view，也就意味着将来还有子模板填充父模板app
那么问题来了，下一个子模板是谁？？再想想这句ui-sref="root.app.index"
a链接切换到谁，就是由谁来填充，这里可能的子模板是index，news，music，about

index.html<h1>我是首页{{indexCtrl.word}}</h1>
music.html<h1>我是音乐{{musicCtrl.word}}</h1>
news.html<h1>我是新闻{{newsCtrl.word}}</h1>
about.html<h1>关于我们{{aboutCtrl.word}}</h1>

入口文件index.html

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
	<meta charset="UTF-8">
	<title>路由演示--模快化</title>
	<style>
		*{
			margin: 0;
			padding:0;
		}
		header,footer{
			width:100%;
			height:60px;
			background-color: #333;
			text-align: center;
			color:white;
			font-size:18px;
			line-height: 60px;
		}

		.content{
			width:1200px;
			overflow: hidden;
			margin: 0 auto;
		}

		.left{
			float: left;
			width:300px;
			height:300px;
			margin-top:100px;

		}
		.left ul{
			list-style:none;
		}
		.left ul li{
			margin:10px 0;
		}
		.left ul li a{
			text-decoration: none;
		}


		.right{
			margin:100px auto;
			width:300px; 
		}
		.active{color:red;}
</style>
</head>
<body>
	<ui-view></ui-view>
	 
	<script  src="https://cdn.bootcss.com/angular.js/1.7.8/angular.min.js"></script>
	<script  src="https://cdn.bootcss.com/angular-ui-router/1.0.22/angular-ui-router.min.js"></script>

	<script type="text/javascript">
		var myapp = angular.module("myapp",["ui.router"]);

		//配置路由表，实际上在配置$state服务。
		myapp.config(function($stateProvider,$urlRouterProvider) {
			$stateProvider
			.state({
				name: 'root',
				templateUrl: 'router-template/root.html'
			})
			.state({
				name:"root.app",
				url : "/app",
				//引入外链模板
				templateUrl: 'router-template/app.html'
			})
			.state({
				name:"root.app.index",
				url : "/index",
				templateUrl: 'router-template/index.html',
				//实例化控制器
				controller : "IndexCtrl as indexCtrl"
			})
			.state({
				name:"root.app.news",
				url : "/news",
				templateUrl: 'router-template/news.html',
				controller : "NewsCtrl as newsCtrl"
			})
			.state({
				name:"root.app.music",
				url : "/music",
				templateUrl: 'router-template/music.html',
				controller : "MusicCtrl as musicCtrl"
			})
			.state({
				name:"root.app.about",
				url : "/about",
				templateUrl: 'router-template/about.html',
				controller : "AboutCtrl as aboutCtrl"
			});

			//对路由表中不存在的路径统一处理，全部跳转到首页#!/
			$urlRouterProvider.otherwise('/app/index');
		});


		myapp.controller("IndexCtrl",[function(){
			this.word = "--home";
		}]);

			myapp.controller("MusicCtrl",[function(){
			this.word = "--music";
		}]);

			myapp.controller("NewsCtrl",[function(){
			this.word = "--news";
		}]);

			myapp.controller("AboutCtrl",[function(){
			this.word = "--about";
		}]);
	</script>
</body>
</html>

对入口文件的一些解释

可以看到入口文件body主体就是一个ui-view，如果你把css和js再抽离出去，页面会更加干净。那你有没有想过，页面到底是怎样渲染出来的？
关键在路由上。
仔细看看访问路径，都是#!/app/xx。以渲染首页为例，访问路径是#!/app/index。这个时候就去检索路由表，看看匹配到了哪个。我的理解是，在匹配访问路径/index的时候，上边的两个父级路由也都匹配了，先root，然后加载app，app再加载填充进来的index.html模板，最终将视图完整呈递。当然，这一切的开始不是root，而是入口文件里唯一的ui-view，这个东西的存在，潜意识告诉你，有东西需要填充进来。