angular组件开发

EddieChan 发布于2019-08-20 15:44 / 3353人阅读

摘要：项目中经常会有一些公共组件，比如，如果每个页面都写一遍的话显得很冗余，而且不利于维护，这时候我们就会考虑将这些公共部分抽取出来，做成一个多带带的组件。然而不是很熟悉啊怎么啵折腾了一下，才发现的组件开发主要依赖自定义指令来实现。

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

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

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

主要使用到directive的几个属性，如下：

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

E 作为元素名使用，如

A 作为属性使用,如

C 作为类名使用,如

M 作为注释使用,如

scope: 指定作用域

false 默认值，共享父级作用域

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

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

templateUrl：用来指定模板文件的url，如templateUrl: "header"

template：设置模板，如template:"这是一条指令"

controller：控制器

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


  这里是标题
  返回
  这里是右边的文字

接着新建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



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

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

GPU云服务器云服务器组件开发前端组件开发 vue组件开发大数据开发组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82451.html

前端知识点总结——Angular

摘要：前端知识点总结一概述基于命令行的开发方式编译工作集成了打包工具。。。。在浏览器中接管展现应用的内容，并根据我们提供的操作指令响应用户的交互。在开发时，八大组成部分模块组件模板自带的标签指令绑定相关的的语法元数据告诉如何处理一个类。前端知识点总结——Angular 一、Angular概述基于命令行的开发方式？ ①hot reload ②编译工作 ③集成了webpack打包工具。。。...

BaronZhang 2019-08-22 16:01 评论0 收藏0
Angular 2.x 从0到1 (一）史上最简单的Angular2教程

摘要：官方支持微软出品，是的超集，是的强类型版本作为首选编程语言，使得开发脚本语言的一些问题可以更早更方便的找到。第一个组件那么我们来为我们的增加一个吧，在命令行窗口输入。引导过程通过在中引导来启动应用。它们的核心就是。第一节：Angular 2.0 从0到1 （一）第二节：Angular 2.0 从0到1 （二）第三节：Angular 2.0 从0到1 （三）第一章：认识Angular...

tuniutech 2019-08-20 13:58 评论0 收藏0
Angular 4 简单入门笔记

摘要：首先，我们需要在入口页面的中配置根路径然后创建一个路由模块路由配置在主模块中导入配置好的路由模块而在页面中需要一个容器去承载上面代码中的定义了用户点击后的路由跳转，定义该路由激活时的样式类。刚实习的时候用过AngularJS，那时候真的是连原生JavaScript都不会写，依样画葫芦做了几个管理后台。然后突然换项目了，AngularJS就不写了，感觉前前后后接触了一年多的Angula...

whlong 2019-08-20 17:44 评论0 收藏0
前端每周清单半年盘点之 Angular 篇

摘要：延伸阅读学习与实践资料索引与前端工程化实践前端每周清单半年盘点之篇前端每周清单半年盘点之与篇前端每周清单半年盘点之篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点、开发教程、工程实践、深度阅读、开源项目、巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单；本文则是对于半年来发布的前端每周清单...

LeviDing 2019-08-20 18:54 评论0 收藏0
那些年初识Angular(1)

摘要：它包含多个属性，这些属性值叫做元数据。会根据元数据渲染组件，并执行组件逻辑。元数据会告诉图和将这个类处理成一个组件。元数据这段代码表示这个组件可以通过这个标签来调用。那些年初识Angular 由于工作需要初识了Angular，由于个人在学习一门新语言的时候喜欢买一本相关的书籍自己钻研，还记得自己的第一本Angular书籍是关于Angular2的学习，自此正式踏入Angular的学习。...

Flink_China 2019-08-02 11:36 评论0 收藏0
Angular Elements 及其运作原理

摘要：以下是关于中一些模块的概要以及它们与这篇文章的关联性这个模块实现了我们在这篇文章中讨论的关于的几个回调函数，同时它还会初始化一个策略类，这个类会作为连接和的桥梁。现在，Angular Elements 这个项目已经在社区引起一定程度的讨论。这是显而易见的，因为 Angular Elements 提供了很多开箱即用的、十分强大的功能：通过使用原生的 HTML 语法来使用 Angul...

qingshanli1988 2019-08-22 18:45 评论0 收藏0