Angular如何實(shí)現(xiàn)組件化管理-創(chuàng)新互聯(lián)

這篇文章主要介紹Angular如何實(shí)現(xiàn)組件化管理，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶(hù)提供滿(mǎn)意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十余年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶(hù)，如iso認(rèn)證等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶(hù)的一致贊美。

具體如下：

在做sass產(chǎn)品頁(yè)面的時(shí)候，往往每個(gè)頁(yè)面的header和footer都是一樣的，還有最近我做的頁(yè)面，類(lèi)似datetimepicker這種組件，其實(shí)都是可以復(fù)用的代碼，所以如果能把這些公用的UI組件提取出來(lái)，對(duì)于維護(hù)就會(huì)方便很多啦！！

angular框架就支持這種組件化管理，不過(guò)也有優(yōu)缺點(diǎn)，我先來(lái)說(shuō)實(shí)現(xiàn)方法哈！

index.html：沒(méi)有用到路由，所以js都是src生引進(jìn)來(lái)的

<head>
  <title>template模塊化</title>
  <script type="text/javascript" src="js/lib/jquery.min.js"></script>
  <script type="text/javascript" src="js/lib/angular.min.js"></script>
  <script type="text/javascript" src="js/angular-util.js"></script>
  <script type="text/javascript" src="js/header.js"></script>
  <!-- 單頁(yè)加載 -->
  <script type="text/javascript" src="js/index.js"></script>
</head>
<body ng-app="frameApp" ng-controller="frameCtrl">
  <header frame-header></header>
  <div ng-click="a1()">click</div>
  <div>{{ default }}</div>
</body>

header.js：用閉包封裝了header組件指向template模板，這里面的A指的是上面html里frame-header的屬性，在這里面的link還可以調(diào)用當(dāng)前作用域內(nèi)的方法

(function () {
  var header = angular.module("header",[]);
  header.directive('frameHeader',function(){
    return {
      restrice: 'A',
      templateUrl: 'template.html',
      replace: false,
      link: function ($scope, iElm, iAttrs) {
        $scope.navigateTo = function(){
          console.log($scope.aa)
        }
      }
    }
  });
})();

header.html：模板部分，我簡(jiǎn)單的寫(xiě)了個(gè)導(dǎo)航

<ul>
  <li ng-click="navigateTo('index')"><a href="index.html" rel="external nofollow" >導(dǎo)航1</a></li>
  <li><a href="page1.html" rel="external nofollow" >導(dǎo)航2</a></li>
  <li>導(dǎo)航3</li>
  <li>導(dǎo)航4</li>
</ul>

index.js：引入header模塊

var myApp = angular.module("frameApp",['utilModule','header']);
myApp.controller('frameCtrl',
  ['$scope','utilService',
  function($scope,utilService){
    $scope.aa = 'yyyyyyyyyyy'
    $scope.a1 = function(){
      utilService.lemon()
    };
    $scope.default = 'this is default'
  }]);

這樣一來(lái)，大功告成啦就！每個(gè)頁(yè)面只要<header frame-header></header>這個(gè)標(biāo)簽，就能引入頭部導(dǎo)航了！

不過(guò)這種組件化的引入方式，我個(gè)人并不推薦使用在引入header和footer，因?yàn)檫@樣的話(huà)，相當(dāng)于每個(gè)頁(yè)面都會(huì)加載一遍templat.html很影響速度，我建議，在引入datetimepicker這樣的組件的時(shí)候在使用！因?yàn)檫@種小組件是按需加載的，用得著再加載，不會(huì)影響頁(yè)面響應(yīng)效率。

以上是“Angular如何實(shí)現(xiàn)組件化管理”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站newbst.com，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

本文名稱(chēng)：Angular如何實(shí)現(xiàn)組件化管理-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://newbst.com/article6/dgghog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、做網(wǎng)站、云服務(wù)器、網(wǎng)站策劃、響應(yīng)式網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

Angular如何實(shí)現(xiàn)組件化管理-創(chuàng)新互聯(lián)