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>

<pageslide></pageslide>

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

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 type="text/css">
.div{

自定义样式

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

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

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

<script>

$("div").click()

</script>


0 0