关闭

angular 组件化

标签: angularjs组件化
8413人阅读 评论(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网站的观点或立场

Angular开发(六)-关于组件之间的数据交互

在angular组件中数据交互主要有下面几种1、父组件通过属性绑定到子组件,子组件通过事件传递参数到父组件 2、父组件通过局部变量获取子组件的引用 3、父组件使用@ViewChild获取子组件的引用 ...
  • kuangshp128
  • kuangshp128
  • 2017-05-04 17:47
  • 3875

AngularJS之组件化篇

AngularJS组件化:将页面中可以重复使用的标签封装成一个组件,方便这一部分UI重复使用,类似于JS中的函数,封装了一部分处理代码,通过函数调用就可以重复使用这些代码。 组件可以用.compon...
  • mm825474872
  • mm825474872
  • 2017-04-27 21:39
  • 897

Angular开发(五)-关于组件的基本认识

说明:由于本人正在angular2或者说是angular4,只是把本人学习过程个人理解写出来,如果有写的不对的地方希望各位指出来,或者给我留言来纠正错误,相互学习,相互提高。本人QQ:33290423...
  • kuangshp128
  • kuangshp128
  • 2017-05-04 17:27
  • 691

【Angular】——封装并发布组件

一、封装组件     作为入门,这是一个非常简单的demo,但核心的接收使用者的输入@Input(),以及返回数据给使用者@Output()都实现了,所以有一定的借鉴意义。     目录结构:(部分目...
  • u012654963
  • u012654963
  • 2017-06-18 21:48
  • 1714

AngularJS如何组件化?1

AngularJS如何实现组件化,是为了让我们在以后的工作维护中变得更加方便快捷,我就深有感受,当一个项目需要维护时,首先你需要从大量的代码中去寻找需要维护的代码,还有可能发生动一处导致整个网页无法正...
  • wk15038187622
  • wk15038187622
  • 2017-04-27 20:01
  • 1111

AngularJS入门之组件化

在我们web前端开发中,总会存在的一些标签组成的UI重复使用。网页的大体结构也无非上中下、左右中、上下 左右,上中下结构:上、下结构基本保持不变,中间部分内容发生变化,为此AngularJS入门之组...
  • baidu_38492440
  • baidu_38492440
  • 2017-04-27 19:57
  • 872

AngularJs 组件化

Angular 组件化 常规的网页开发中,页面 header、footer和nav通常都是固定不变的,如果一遍一遍的写就会增加工作量,现在angular的组件化可以很方便的解决这一问题,接下来我就为大...
  • a15565696901
  • a15565696901
  • 2017-04-27 20:36
  • 1007

AngularJS 自定义控件

自定义指令介绍 AngularJS 指令作用是在 AngulaJS 应用中操作 Html 渲染。比如说,内插指令 ( {{ }} ), ng-repeat 指令以及 ng-if 指令。 当...
  • u013045437
  • u013045437
  • 2016-05-10 21:02
  • 2392

Angularjs封装指令

AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有:     ...
  • qq_26702065
  • qq_26702065
  • 2016-03-24 20:56
  • 3433

AngularJs中组件、过滤器、自定义过滤器的使用

关于组件化: 将页面中可以重复使用的标签封装成一个组件,方便这一部分UI重复使用 类似于JS中的函数,封装了一部分处理代码,通过函数调用就可以重复使用这些代码 封装一个简单的组件...
  • CSDN_zrz
  • CSDN_zrz
  • 2017-05-02 19:45
  • 159
    个人资料
    • 访问:125340次
    • 积分:1325
    • 等级:
    • 排名:千里之外
    • 原创:31篇
    • 转载:0篇
    • 译文:0篇
    • 评论:14条
    文章分类
    最新评论