angular模块化基本实现

最新推荐文章于 2021-11-23 12:50:45 发布

Army-海军

最新推荐文章于 2021-11-23 12:50:45 发布

阅读量1.6w

点赞数 27

分类专栏： Angular 文章标签： angular1.4.3自定义指令怎么用

本文链接：https://blog.csdn.net/weixin_41229588/article/details/90638714

版权

Angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先放在一个文件下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 这个位置用ng-app的话就不要用bootstrap方法，用了那个方法的话就要放最后 -->
		<div ng-app="App" id="App">
			<div ng-controller="ctl1">
				
				<div id="">
					{{abc}}
				</div>
				<help-pop>这是原来的内容</help-pop>
				 <!-- <div isolated-directive >safdsfds </div> -->
			</div>
		</div>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 当前版本号1.4.3 -->
		<script type="text/javascript">
			 
			var App = angular.module('App', []);
			App.controller('ctl1', function($scope) {
				$scope.abc=555555555;
			});
			App.directive("helpPop", function () {
			    return {
			        restrict: "ECMA",
			        replace: true,
			        template: "<div>我要替换的内容</div>"
			    }
			});
			// angular.bootstrap(document.getElementById("App"), ["App"]); 
			// 如果要用这个就必须放最后.
		</script>
	</body>
</html>

实现以后样子

拆开：

目录结构:

index.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 这个位置用ng-app的话就不要用bootstrap方法，用了那个方法的话就要放最后 -->
	    <div ng-app="App" id="App">
			<div ng-controller="header">
				<div ng-include="'template/header/template.htm'"></div>
			</div>
		</div>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 当前版本号1.4.3 -->
		<script type="text/javascript">			 
			var App = angular.module('App', []);
		</script>
		<script src="template/header/controller.js" type="text/javascript" charset="utf-8"></script>
		<script src="tools/helpPop/controller.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

header的controller.js（看目录)和template.htm

App.controller('header', function($scope) {
	$scope.abc = 555555555;
});

<style type="text/css">
	.abc{
		color: aqua;
	}
</style>
<div >
	<div id="" class="abc">
		{{abc}}
	</div>
	<help-pop>这是原来的内容</help-pop>
</div>

helpPop的controller.js

App.directive("helpPop", function () {
    return {
        restrict: "ECMA",
        replace: true,
        templateUrl: "tools/helpPop/helpPop.htm"
    }
});

helpPop.htm

<div>我是帮助文档可以显示的啊</div>

最后显示

主要是讲两件事，如何让你自定义组件显示，自定义组件有啥用，还有就是控制器的用法。这是最简单的实现。再复杂也是这个的拓展。

Army-海军

关注

27
点赞
踩
2

收藏

觉得还不错? 一键收藏
23
评论
angular模块化基本实现

首先放在一个文件下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 这个位置用ng-app的话就不要用bootstrap方法，用了那个方法的话...
复制链接

扫一扫