Angular組件化管理實(shí)現(xiàn)方法分析

更新時(shí)間：2017年03月17日 11:21:24 作者：lemon678

這篇文章主要介紹了Angular組件化管理實(shí)現(xiàn)方法,結(jié)合具體實(shí)例分析了Angular模塊組件化管理以提高代碼復(fù)用性的實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例分析了Angular組件化管理實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

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

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

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

<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>
  <!-- 單頁加載 -->
  <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)單的寫了個(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'
  }]);

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

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

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: