angular-component组件开发实际应用

来源：互联网发布：ntfs for mac反激活编辑：程序博客网时间：2024/06/16 01:53

网页结构和组件化
常规网页开发时，网页的结构大概是什么样的？
上中下、左中右、上下、左右
上中下结构：上、下结构保持不变，中间部分内容发生变化
组件化：将页面中可以重复使用的标签封装成一个组件，方便这一部分UI重复使用

类似于JS中的函数，封装了一部分处理代码，通过函数调用就可以重复使用这些代码

首页：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/lib/angular/angular.min.js"></script>

引入angular
<script src="js/app/bottomnav/bottomnav.js"></script>

引入自定义js

</head>

<body>

<bottom-Nav></bottom-Nav>

如果自定义控制器命名遵循的驼峰式命名法：

bottomNav引用到html页面，为<bottom-Nav></bottom-Nav>
</body>
</html>

js链接页：

var app = angular.module("myApp", []);

app.component("bottomNav",{
templateUrl:"js/app/bottomnav/bottomnav.html",
controller:function($scope){
}
});

app.component("pageslide", {
template:"<h2>这是一个侧边栏导航</h2>"
});

html连接页：

自定义样式

}
</style>
<div class="div">
<p>
style样式和js样式一般写在一个页面方便引用

组件化开发一般越细分，可重复使用的性能越强，

一定要把自己写的js代码放在引用的angular.js的链接下面
</p>
</div>

$("div").click()

</script>

0 0