Angular 如何组件化

AngularJS如何实现组件化，是为了让咱们在之后的工做维护中变得更加方便快捷，我就深有感觉，当一个项目须要维护时，首先你须要从大量的代码中去寻找须要维护的代码，还有可能发生动一处致使整个网页没法正常运行，这个问题浪费了我不少的时间去纠正我须要区维护的代码中仅由于多了一个div,试想一个项目中的div布局可想而知，全部有没有一个东西能够帮助咱们去更加方便快捷的去寻找咱们须要维护的代码，并且不会影响其余代码的正常运行那？AngularJS为咱们提供了一个方法：数据组件化

1.什么是AngularJS组件化？

AngularJS是一个模块化开发框架，所谓组件化，用通俗的话说就是把网页中的一部分ui进行封装起来反复使用，相似于JS中的函数，封装一段代码，经过函数名来进行反复的调用，而组件化也是同理

2.AngularJS该如何使用？

   AngularJS组件化无非就是把一个网页分红几部分，而后选中其中不会常常发生改变的部分来进行封装，基于如今网络上流行的网页结构经过我的间接能够分为这几类

1.上中下结构   

上是指页眉，Logo.导航栏之类的， 下结构是一些友情连接，二维码，公司的一些信息，若是在公司中基本这个两个部分不会发生太大的变化，全部能够抽取出来进行组件化封装，来进行调用

2.左中右结构

这个结构的网页更相似于那种，左边相似于导航类的，基本不会改变能够抽取出来进行封装，方便之后多个网页直接就能够调用

 

 

还有一些上中下配合左右结构的网页，基本上不会发生变化的就是网页的页眉、页脚、左边导航之类的，这些地方的代码利用组件化封装起来，往后维护时，也不须要从成千上万的代码中去寻找你须要改动的地方，也不会怕由于改了一个地方而对整个网页形成灾难性的后果

3.AngularJS简单的组件化应用：

 

1  <my-cone></my-cone>            在body中调用
2 <script>
3 var app=angular,module("myApp",[]);
4 app.component("myCone",{    经过component建立一个组件
5  template:"<h1>个人第一个组件化<small>这是一个副标题</small></h1>"
6 })
7 </script>

 

4.AngularJS数据组件化：

 1  
 2 
 3 <page-header></page-header>
 4 <script>
 5 var app=angular.module("myApp",[]);
 6 app.component("pageHeader",{
 7  template:"<h2>尊敬的用户<span ng-bind></span>,欢迎访问本系统</h2>"
 8    controller:function($scope){
 9        $scope.name="李先生";
10    }
11 })
12 </script>

 

数据组件化与组件化没有太大的区别，都是经过component来建立一个组件，不一样之处是在于数据的绑定，没有经过控制器,而是直接经过$scope来进行绑定！

5 AngularJS组件化的好处：

早在H.5刚活跃于网页前端开发市场是，那时盗版的网页层出不穷，利用一个网页下载器便可将一个他人辛苦设计的网页进行稍加改动成为本身的网页，这种状况太过严重，而经过组件化模块来编写的代码，网页中甚至只可能出现一个标签，就完成了对整个网页渲染，这样网页下载只能下载静态的网页代码，而没法下载到组件内的内容，由此组件化更加深受你们喜好

6 什么是AngularJS组件化模板：

    为何要使用组件化模板，组件化模块不就够了吗？要是这么想就错了，由于template只能拥有一个，什么意思，就是说你的网页内容若是只经过一个template去写的画，试想如下当你须要输入一段很长的代码，而且是经过字符串的形式写入，我以为那么不是方便快捷，而是繁琐，变相的一种折磨，因此须要另一种方式来解决这个问题，AngularJS为咱们提供了组件化模板

7.如何使用AngularJS组件化模板

  组件化模板与组件化模块的不一样之处有三

   1.组件化利用：template来进行组件的建立同时咱们也知道组件化模块只能拥有一个

 

template:"<h2>尊敬的用户</h2>，欢迎访问本网页"
组件化模板建立方式
templateUrl:"js/app/mytemplate/mytemplate1/mytemplate.html"

   2.使用方式须要先经过script调用<script
src="js/app/mytemplate/mytempalte.js"></script>

   3.结构不一样

    主要网页中只有一个标签，和调用JS文件存在，而组件化模板存在于JS文件中，而数据则存在另一个HTML文档中 结构以下代码：

 

 

1，主页面样式
 <script src="js/angular.min.js"></script>
  <script src="js/app/zjfb/zjfb.js"></script>
引用AngularJS文档，同时调用JS文件，文件内存放的是组件化模板
 <price-name></price-name>
经过标签来对网页进行渲染

2.JS文档中内容

1 var app=angular.module("myApp",[]);
2 app.component("priceName",{
3     templateUrl:"js/app/zjfb/zjfb1/zjfb1.html",
4     template:""
5     controller:function ($scope) {
6     }
7 })

 

3.对于模块的渲染文件，存在的HTML文档

 1 <div class="z1-zjfb-footer">
 2     页面底部
 3 </div>
 4 <style>
 5     .z1-zjfb-footer{
 6         width:100%;
 7         height:100px;
 8         background: red;
 9         color: #fff;
10     }
11 </style>

 

 原文：http://www.waitig.com/angularjs%E5%A6%82%E4%BD%95%E7%BB%84%E4%BB%B6%E5%8C%96%EF%BC%9F1.html

原做者：waitig