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