Angular组件化管理实现方法分析

本文实例分析了Angular组件化管理实现方法。分享给大家供大家参考，具体如下：

在做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" rel="external nofollow" >导航1</a></li>
  <li><a href="page1.html" rel="external nofollow" >导航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这样的组件的时候在使用！因为这种小组件是按需加载的，用得着再加载，不会影响页面响应效率。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • angularjs使用directive实现分页组件的示例

    angularjs使用directive实现分页组件的示例

    闲来没事,分享下项目中自己写的分页组件.来不及了,直接上车. 效果: 输入框可任意输入,并会自动提交到该页 依赖项: fontawesome,bootstrap html: <ul class="page clearfix"> <li ng-hide="currentPage <= 1"> <a href="" ng-click=" rel="external nofollow"

  • Angular2开发——组件规划篇

    Angular2开发——组件规划篇

    本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型.其中写在css类以及注释中的组件想必多数人都不会去使用,而属性型指令与标签型指令则是ng1火遍宇宙的功臣之一.在ng2中,标签型指令干脆被分离出来,追随vue等新兴势力的风格升级并称为组件,并用来处理所有与视图(DOM)打交道的事情,包括展示数据与动画.而属性型指令则用于完善组件的功能,比如接收用

  • 详解angular2封装material2对话框组件

    1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍.这里提供一个方案用于封装我们最常用的alert和confirm组件. 2. 官方使用方法之alert ①编写alert内容组件 @Component({ template : `<p>你好</p>` }) export class AlertComponent { constructor(){ } } ②在所属模块上声明 //必须声明两处 declarations: [ AlertComp

  • angular 动态组件类型详解(四种组件类型)

    组件类型1:纯函数功能,而没有视图部分,即Factory(类似于$http) promise.component.html 常见的有内置的$http,$q之类的.一般使用promise与作用域进行交互 组件类型2:不是常驻于视图,而是动态插入的.有UI的一类组件,有输入交互.不常被调用(类似于Model对话框) factory.component.html 并发性.这里收到es6的启发.在factory内使用了构造函数,来区分不同的实例.当然,factory接口返回的类型要根据需求来定:仅仅是一

  • Angularjs 创建可复用组件实例代码

    AngularJS框架可以用Service和Directive降低开发复杂性.这个特性非常适合用于分离代码,创建可测试组件,然后将它们变成可重用组件. Directive是一组独立的JavaScript.HTML和CSS,它们封装了一个特定的行为,它将成为将来创建的Web组件的组成部分,我们可以在各种应用中重用这些组件.在创建之后,我们可以直接通过一个HTML标签.自定义属性或CSS类.甚至可以是HTML注释,来执行一个Directive. 这一篇教程将介绍如何创建一个'自定义步长选择' Dir

  • angular2倒计时组件使用详解

    angular2倒计时组件使用详解

    项目中遇到倒计时需求,考虑到以后在其他模块也会用到,就自己封装了一个组件.便于以后复用. 组件需求如下: - 接收父级组件传递截止日期 - 接收父级组件传递标题 组件效果 变量 组件countdown.html代码 <div class="count-down"> <div class="title"> <h4> {{title}} </h4> </div> <div class="body

  • 基于AngularJS前端云组件最佳实践

    基于AngularJS前端云组件最佳实践

    AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发.AngularJS是为了克服HTML在构建应用上的不足而设计的,它非常全面且简单易学习,因此AngularJS快速的成为了javascript的主流框架. 一.Amazing的Angular AnguarJS的特性 方便的REST: RESTful逐渐成为了一种标准的服务器和客户端沟通的方式.你只需使用一行javascript代码,就可以快速的从服务器端得到数据.AugularJS将这些变成了JS

  • Angular2利用组件与指令实现图片轮播组件

    Angular2利用组件与指令实现图片轮播组件

    前言 如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图. 而除了直接看的见的躯体之外,一个完整的"生物"还需要有感觉器官,用来感知外界与其的交互,这就是指令要做的事情. 本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件,继续上文打的比方的话这就像是一个"器官",功能是呈现图片,并感知用户的点击或手势来切换图片. 一.创建组件 结束上文

  • Angular组件化管理实现方法分析

    本文实例分析了Angular组件化管理实现方法.分享给大家供大家参考,具体如下: 在做sass产品页面的时候,往往每个页面的header和footer都是一样的,还有最近我做的页面,类似datetimepicker这种组件,其实都是可以复用的代码,所以如果能把这些公用的UI组件提取出来,对于维护就会方便很多啦!! angular框架就支持这种组件化管理,不过也有优缺点,我先来说实现方法哈! index.html:没有用到路由,所以js都是src生引进来的 <head> <title>

  • YII使用url组件美化管理的方法

    本文实例讲述了YII使用url组件美化管理的方法.分享给大家供大家参考,具体如下: urlManager组件 yii的官方文档对此的解释如下: urlSuffix  此规则使用的url后缀,默认使用CurlManger::urlSuffix,值为null.例如可以将此设置为.html,让url看起来"像"是一个静态页面. caseSensitive  是否大小写敏感,默认使用CUrlManager::caseSensitive,值为null. defaultParams  该规则使用的

  • laravel框架学习笔记之组件化开发实现方法

    本文实例讲述了laravel框架学习笔记之组件化开发实现方法.分享给大家供大家参考,具体如下: 1.第一个难点,就是把本地的组件引入到项目中,进行开发和测试,这个已经解决了 2.就是需要发布组件中的配置文件到项目中 3.就是怎么在组建中加载组建中的视图view层 视图 你需要告诉 laravel 视图的位置才能使 laravel 加载包中的视图.你可以通过服务提供者的 loadViewsFrom 方法.loadViewsFrom 方法接受两个参数:视图的路径和包的名称.比如,如果你的包名称是"c

  • angular组件继承的实现方法第1/2页

    Angular 2.3 版本中引入了组件继承的功能,该功能非常强大,能够大大增加我们组件的可复用性. 组件继承涉及以下的内容: Metadata:如 @Input().@Output().@ContentChild/Children.@ViewChild/Children 等.在派生类中定义的元数据将覆盖继承链中的任何先前的元数据,否则将使用基类元数据. Constructor:如果派生类未声明构造函数,它将使用基类的构造函数.这意味着在基类构造函数注入的所有服务,子组件都能访问到. Lifec

  • angular组件间通讯的实现方法示例

    前言 一个Angular应用一般情况下包含多个组件,而且要让组件互相之间能进行通讯(数据传送),这样才能构成一个有机的完整系统. 1.情景引入 下面例举一个实际遇到的情况: 上图页面包含两个组件,"新增班级组件"和"选择教师组件",在新增班级时需要选择改班级的管理教师,管理教师列表要从数据库中获取.选择好教师后,"选择教师组件"要把选择的教师对象传递回"新增班级组件",这其中涉及到对象传递称为通讯. 2.组件关系 组件之间有几

  • 使用JSX实现Carousel轮播组件的方法(前端组件化)

    使用JSX实现Carousel轮播组件的方法(前端组件化)

    在我们用 JSX 建立组件系统之前,我们先来用一个例子学习一下组件的实现原理和逻辑.这里我们就用一个轮播图的组件作为例子进行学习.轮播图的英文叫做 Carousel,它有一个旋转木马的意思. 上一篇文章<使用 JSX 建立 Markup 组件风格>中我们实现的代码,其实还不能称为一个组件系统,顶多是可以充当 DOM 的一个简单封装,让我们有能力定制 DOM. 要做这个轮播图的组件,我们应该先从一个最简单的 DOM 操作入手.使用 DOM 操作把整个轮播图的功能先实现出来,然后在一步一步去考虑怎

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • vue 将页面公用的头部组件化的方法

    本文介绍了vue 将页面公用的头部组件化的方法,分享给大家,具体如下: 呃--重新捡起前面用vue-cli快速生成的项目. 之前是做过一个多页面的改造,以及引入vux的ui组件,这次在这个项目的基础上,再来聊聊vue中的component. 别问我为啥总是写关于vue的博客,都是为了生计(------) 这是官方的文档地址(https://cn.vuejs.org/v2/guide/components.html#什么是组件?),关于组件写了一大堆,一看就知道这个很有用啦. 关于一些组件的概念之

  • Angular2实现组件交互的方法分析

    本文实例讲述了Angular2实现组件交互的方法.分享给大家供大家参考,具体如下: 前言 在Angular开发中,我们经常会涉及到组件之间的交互,比如会引用自己部门开发的组件 有时候,我们需要向引用的组件里面绑定一些数据,或者我们需要引用的子组件输出一些数据 这时,我们就需要处理好组件之间的交互 组件交互的关键代码 父组件绑定数据到子组件 子组件 <h3>{{hero.name}} says:</h3> @Input() hero: Hero; 父组件 <hero-child

  • angular组件间传值测试的方法详解

    angular组件间传值测试的方法详解

    前言 我们知道angular组件间通讯有多种方法,其中最常用的一种方法就是借助于 @Input 和 @Output 进行通讯.具体如何通讯请参考angular组件间通讯,本文不再赘述,我们来讲讲关于此方法如何进行单元测试. 创建假组件 我们单元测试父组件与子组件的的交互是否符合我们的要求,我们在父组件进行测试,就需要模拟一个假的子组件出来,这样排除其他因素对测试的影响. 比如现在我在分页组件里写了一个每页大小选择组件,现在要测试一下组件间交互.现在分页组件就是我们的父组件,每页大小组件就是我们的

随机推荐