当前位置: 首页 > news >正文

angular组件开发

项目中经常会有一些公共组件,比如header,如果每个页面都写一遍的话显得很冗余,而且不利于维护,这时候我们就会考虑将这些公共部分抽取出来,做成一个单独的组件。

然而angular不是很熟悉啊~怎么啵~

折腾了一下,才发现angular的组件开发主要依赖自定义指令(directive )来实现。

主要使用到directive的几个属性,如下:

restrict: 使用驼峰法来命名,用来限制指令通过特定的方式来调用,默认值为 EA

  • E 作为元素名使用,如<my-directive></my-directive>

  • A 作为属性使用,如<div my-directive></div>

  • C 作为类名使用,如<div class="my-directive"></div>

  • M 作为注释使用,如<!-- directive: my-directive -->

scope: 指定作用域

  • false 默认值,共享父级作用域

  • true 继承父级作用域并创建指令自己的作用域

  • {} 创建指令自己的独立作用域,与父级毫无关系

templateUrl: 用来指定模板文件的url,如templateUrl: 'header'

template:设置模板,如template:'这是一条指令'

controller:控制器

比如如果创建一个header组件,我们先新建一个文件夹header.html

<header>
  <h1>这里是标题</h1>
  <div class="goback" ng-touchstart="goBack($event)">返回</div>
  <div>这里是右边的文字</div>
</header>

接着新建directive.js

angular.module('myHeader', ["zz.rule"])
  .directive('myHeader', function() {
    return {
      restrict: 'A',
      templateUrl: 'header',
      controller: function($scope, $element, $attrs) {
        // 返回上一页
        $scope.goBack = function(event) {};
      }
    };
  })

好了,到这里一个组件就穿件好了,那么问题来了,怎么使用呢?

其实就跟平成引入插件一样一样的

创建index.html

<div zz-header></div>

angular.module('mymodel', ["myHeader"])

超级简单有没有,赶紧get起来

相关文章:

  • C++ 虚函数经典深入解析 (good)
  • XEN cpu 调度问题
  • webgl (原生)基础入门指南【一】
  • 关于“服务器提交了协议冲突. Section=ResponseStatusLine问题
  • SAP S4系统创建Customer和Vendor的BAPI
  • 09_platform-tools简介常见adb指令
  • Android网络开发之HttpURLConnection
  • nfs客户端进程变D,延伸linux的lock
  • 9 外观模式(Facade)
  • 线程的同步与死锁
  • 用TinySpider进行网页抓取实例
  • UI图像拖动更换
  • Mysql避免全表扫描sql查询优化 .
  • LR杂记 - 性能測试指标及经常使用的监控工具
  • linux常见问题汇总
  • 【译】React性能工程(下) -- 深入研究React性能调试
  • android百种动画侧滑库、步骤视图、TextView效果、社交、搜房、K线图等源码
  • Apache Spark Streaming 使用实例
  • JSDuck 与 AngularJS 融合技巧
  • Linux CTF 逆向入门
  • 大快搜索数据爬虫技术实例安装教学篇
  • 浅谈Kotlin实战篇之自定义View图片圆角简单应用(一)
  • 用Visual Studio开发以太坊智能合约
  • 远离DoS攻击 Windows Server 2016发布DNS政策
  • linux 淘宝开源监控工具tsar
  • 阿里云ACE认证学习知识点梳理
  • ​【C语言】长篇详解,字符系列篇3-----strstr,strtok,strerror字符串函数的使用【图文详解​】
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • #ifdef 的技巧用法
  • #多叉树深度遍历_结合深度学习的视频编码方法--帧内预测
  • (1/2) 为了理解 UWP 的启动流程,我从零开始创建了一个 UWP 程序
  • (Redis使用系列) Springboot 实现Redis消息的订阅与分布 四
  • (八)Docker网络跨主机通讯vxlan和vlan
  • (附源码)ssm学生管理系统 毕业设计 141543
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (转)可以带来幸福的一本书
  • .net core IResultFilter 的 OnResultExecuted和OnResultExecuting的区别
  • .net core Swagger 过滤部分Api
  • .NET MVC之AOP
  • .NET/C# 推荐一个我设计的缓存类型(适合缓存反射等耗性能的操作,附用法)
  • .net和php怎么连接,php和apache之间如何连接
  • @SpringBootApplication 包含的三个注解及其含义
  • [ HTML + CSS + Javascript ] 复盘尝试制作 2048 小游戏时遇到的问题
  • [ Linux Audio 篇 ] 音频开发入门基础知识
  • [ 渗透测试面试篇 ] 渗透测试面试题大集合(详解)(十)RCE (远程代码/命令执行漏洞)相关面试题
  • []利用定点式具实现:文件读取,完成不同进制之间的
  • [BJDCTF2020]The mystery of ip
  • [BT]BUUCTF刷题第8天(3.26)
  • [C#基础]说说lock到底锁谁?
  • [ComfyUI进阶教程] animatediff视频提示词书写要点
  • [Effective C++读书笔记]0012_复制对象时勿忘其每一部分
  • [Java][Android][Process] 暴力的服务能够解决一切,暴力的方式运行命令行语句
  • [JavaEE]线程的状态与安全
  • [Machine Learning][Part 7]神经网络的基本组成结构