Angular如何實(shí)現(xiàn)組件化管理

  
  
  
  
  
  
  


  
  click

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)單的寫了個(gè)導(dǎo)航

  導(dǎo)航1
  
導(dǎo)航2
  
導(dǎo)航3
  
導(dǎo)航4

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'
  }]);

這樣一來，大功告成啦就！每個(gè)頁(yè)面只要

不過這種組件化的引入方式，我個(gè)人并不推薦使用在引入header和footer，因?yàn)檫@樣的話，相當(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)行業(yè)資訊頻道！