关闭

angular 组件化

标签: angularjs组件化
7518人阅读 评论(1) 收藏 举报
分类:

在做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这样的组件的时候在使用!因为这种小组件是按需加载的,用得着再加载,不会影响页面响应效率。

2
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:104173次
    • 积分:1165
    • 等级:
    • 排名:千里之外
    • 原创:30篇
    • 转载:0篇
    • 译文:0篇
    • 评论:12条
    文章分类
    最新评论