Angular元件化管理實現方法分析

在做sass產品頁面的時候，往往每個頁面的header和footer都是一樣的，還有最近我做的頁面，類似datetimepicker這種元件，其實都是可以復用的**，所以如果能把這些公用的ui元件提取出來，對於維護就會方便很多啦！！

angular框架就支援這種元件化管理，不過也有優缺點，我先來說實現方法哈！

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

www.cppcns.com template模組化

click

}header.js：用閉包封裝了header元件指向template模板，這裡面的a指的是上面html裡frame-header的屬性，在這裡面的link還可以呼叫當前作用域內的方法

(function () }}

});})();

header.html：模板部分，我簡單的寫了個導航

index.js：引入header模組

var myapp = angular.module("frameapp",['utilmodule','header']);

myapp.controller('framectrl',

['$scope','utilservice',

function($scope,utilservice);

$scope.default = 'this is default'

}]);

這樣一來，大功告成啦就！每個頁面只要這個標籤，就能引入頭部導航了！

不過這種元件化的引入方式，我個人並不推薦使用在引入header和footer，因為這樣的話，相當於每個頁面都會載入一遍templat.html很影響速度，我建議，在引入datetimepicker這樣的元件的時候在使用！因為這種小組件是按需載入的，用得著再載入，不會影響頁面響應效率。