Angular 如何组件化

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

1.什么是AngularJS组件化？

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

2.AngularJS该如何使用？

   AngularJS组件化无非就是把一个网页分成几部分，然后选中其中不会经常发生改变的部分来进行封装，基于现在网络上流行的网页结构通过个人间接可以分为这几类

1.上中下结构   

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

2.左中右结构

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

 

 

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

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

 

 <my-cone></my-cone>            在body中调用
<script>
var app=angular,module("myApp",[]);
app.component("myCone",{    通过component创建一个组件
 template:"<h1>我的第一个组件化<small>这是一个副标题</small></h1>"
})
</script>

 

4.AngularJS数据组件化：

 

<page-header></page-header>
<script>
var app=angular.module("myApp",[]);
app.component("pageHeader",{
 template:"<h2>尊敬的用户<span ng-bind></span>,欢迎访问本系统</h2>"
   controller:function($scope){
       $scope.name="李先生";
   }
})
</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文档中内容

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

 

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

<div class="z1-zjfb-footer">
    页面底部
</div>
<style>
    .z1-zjfb-footer{
        width:100%;
        height:100px;
        background: red;
        color: #fff;
    }
</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