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