AngularJs 邮箱路由模块化案例

补充:同级controller之间的通信,依靠传入$rootScope全局变量(自身是一个对象)
并在注入信息的函数中添加该参数实现

模块化样式：
在这里插入图片描述 html文件:

<!DOCTYPE html>
<html ng-app='app'>
<head lang="en">
	<meta charset='utf-8'/>
	<title ng-bind='mainTitle'></title>
	<link rel="stylesheet" href="css/apps/index.css" />
	<link rel="stylesheet" href="css/libs/bootstrap.min.css" />
</head>
<body>


<ul class="nav">
	<li><a class="active" href="#mail-homepage">邮箱首页</a></li>
	<li><a href="#mail-writed">写邮件</a></li>
	<li><a href="#mail-drafts">草稿箱</a></li>
</ul>
<div ng-view style="width:100%; height:300px; border:1px solid black"></div>


<script src="js/libs/angular.js"></script>
<script src="js/libs/angular.route.min.js"></script>
<script src="js/apps/app.js"></script>
<script src="js/apps/route.js"></script>
<script src="js/apps/controllers/homepageController.js"></script>
<script src="js/apps/controllers/writepageController.js"></script>
<script src="js/apps/controllers/draftspageController.js"></script>
</body>
</html>

页面数模块化app.js：

var app = angular.module('app', ['ngRoute']);

路由route.js：

app.config(['$routeProvider', function ($routeProvider){
	$routeProvider
		.when('/mail-homepage', {
			templateUrl:'view/homepage.html',
			controller:'homepageController'
		})
		.when('/mail-writed', {
			templateUrl:'view/writepage.html',
			controller:'writepageController'
		})
		.when('/mail-drafts', {
			templateUrl:'view/draftspage.html',
			controller:'draftspageController'
		})
		.otherwise({
			redirectTo:'/mail-homepage'
		});
}]);

控制器脚本一:

//使用NG全局变量实现同级controller之间的通信
app.controller('draftspageController',['$scope','$rootScope',function($scope,$rootScope){
	$scope.draftspageTitle='这是草稿箱页面';
	$scope.mail1=$rootScope.context;
}])

控制器脚本二:

app.controller('homepageController', ['$scope', function ($scope){
	$scope.homepageTitle = '这是邮箱首页';
}]);

控制器脚本三:

//在注入信息中增加NG整体全局变量,而该全局变量是一个对象,解决同级controller之间不能通信的问题
app.controller('writepageController', ['$scope','$rootScope', '$rootScope', function ($scope, $rootScope){
	$scope.writepageTitle = '这是写邮件页面';
	$scope.mail = '';
	$scope.saveToDrafts = function (mail){
		$rootScope.context=mail;

	};
}]);

在这里插入图片描述

来源：CSDN

作者：神奇大叔

链接：https://blog.csdn.net/weixin_43294560/article/details/104044783

标签

路由