angular 组件化

来源：互联网发布：安悦溪演技知乎编辑：程序博客网时间：2024/06/06 09:38

在做sass产品页面的时候，往往每个页面的header和footer都是一样的，还有最近我做的页面，类似datetimepicker这种组件，其实都是可以复用的代码，所以如果能把这些公用的UI组件提取出来，对于维护就会方便很多啦！！

angular框架就支持这种组件化管理，不过也有优缺点，我先来说实现方法哈！

index.html：没有用到路由，所以js都是src生引进来的

<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还可以调用当前作用域内的方法

(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：模板部分，我简单的写了个导航

<ul><li ng-click="navigateTo('index')"><a href="index.html">导航1</a></li><li><a href="page1.html">导航2</a></li><li>导航3</li><li>导航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'    }]);

这样一来，大功告成啦就！每个页面只要<header frame-header></header>这个标签，就能引入头部导航了！
不过这种组件化的引入方式，我个人并不推荐使用在引入header和footer，因为这样的话，相当于每个页面都会加载一遍templat.html很影响速度，我建议，在引入datetimepicker这样的组件的时候在使用！因为这种小组件是按需加载的，用得着再加载，不会影响页面响应效率。

1 1