angular组件开发

前端之家收集整理的这篇文章主要介绍了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起来

猜你在找的Angularjs相关文章