不用搭环境的10分钟AngularJS指令简易入门01（含例子）

发布时间：2020-12-17 10:28:52 所属栏目：安全来源：网络整理

导读：不用搭环境的10分钟AngularJS指令简易入门01（含例子） `#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~` AngularJS的指令是一大特色之一，可以将控件组合封装并简易调用。不难入门，而且用起来很爽！这次我带各位童鞋一步

不用搭环境的10分钟AngularJS指令简易入门01（含例子）

`#不用搭环境系列AngularJS教程01,前端新手也可以轻松入坑~阅读本文大概需要10分钟~`

AngularJS的指令是一大特色之一，可以将控件组合封装并简易调用。不难入门，而且用起来很爽！这次我带各位童鞋一步步学会AngularJS的指令系统。

前置技能需求：HTML、CSS、JS基础，没错不用会Angular也行！（逃

一、史上最简单入门

指令是 扩展具有自定义功能的 HTML 元素的途径。换个说法，简单来说就是把一堆组件合成到一个HTML标签里！

哦？酱是怎样？马上上例子：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        <body>
            <a href="http://www.cnblogs.com/qixi233/" target="_blank">七喜哥哥仔的博客</a>
        </body>
    </html>

上面是一个简单的HTML代码块，会生成一个写着"Click to bing"文字的超链接。我们现在尝试用指令来封装其中a标签超链接的部分：

很简单的，分三步走：

在这次代码书写的过程中不用搭建环境，只需要在某个文件夹下新建两个空文件：index.html 以及app.js（大家也可以学我在RunJS上写，国内在线编程网站，可以运行或修改代码）；

首先在空的app.js中编辑：

var myapp = app.module('myapp',[]); //最顶级的模块，与index.html中的ng-app绑定

这样我们就有第一个模块了，好~接下来往这个模块添加本文的重点指令：

myapp.directive('myDire',function(){
    return{
        restrict:'EACM',template:'<a href="http://www.cnblogs.com/qixi233/" target="_blank">七喜哥哥仔的博客</a>'
    };
});

现在就完成了app.js的编写，先不用管这个东西怎么实现的，先实现了再说~不要停~

接下来来编辑index.html:

<!DOCTYPE html>
<html ng-app="myapp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>AngularJS指令最简单入门01</title>
        <script src="http://cdn.bootcss.com/angular.js/1.6.2/angular.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <my-dire></my-dire>
    </body>
</html>

好我们现在也完成了index.html的编辑，在index.html里面我们引用了AngularJS的国内CDN,所以能够方便快捷地调试而且不用安装环境！如果是在本地调试记得像上面代码一样添加对app.js的引用哦~

我们现在已经完成了对两个文件的编辑了，那么就可以开始运行了吗？当然！快试试吧~各位童鞋也可以看看我写的参考代码

按照大神推荐的习惯,好的学习习惯可以是以下这样的：

完成小作品 -》 学习理解 -》 迭代作品

我们现在已经有了一个小Demo，但是可能有些童鞋不能理解这个Demo是如何运行的或者原理是神马，所以我们现在来根据这个Demo进行相关的学习~

二、简单解析

学过设计模式的同学都知道最小知识原则(Least Knowledge Principle)吧，同化到学习或者讲解过程中也适用。（别装逼了说人话

嗯好哒~在不清楚某个程序的时候，先能让它正常工作，不直接去追根究底地问"起源是什么"、"系统如何运作"，而是从已有的程序出发，慢慢延伸出去，能够更简单地清晰地学习，所以我们就不讲AngularJS是如何运行的，就只针对其指令系统讲解一番~（才不是因为我讲不好原理呢哼~

2.1、学习指令系统的目的

对于上面Demo的简单指令，我们可以看出指令的作用在于，只是在index.html种用简单的一句就能显示出一长串的a标签代码，甚至放下几十个几百个a都没问题，当我们封装好了一个这样的指令，我们可以在控制器范围内简单地多次调用，大大方便了我们的操作~

2.2、对于指令Demo的简单解析

那么我们先来看app.js，模块声明并与index.html的ng-app绑定，这是AngularJS的惯例操作，在HTML中用内置的指令ng-app标记出应用的根节点，目的是确定模块能够控制的HTML文档范围。

接下来就是要为模块编写一些功能，让模块更好地为HTML文档服务咯，于是我们用.directive('',function(){}); 为模块添加上我们自定义的指令功能，direcitive接收两个参数，第一个参数是指令名字，第二个参数是指令实现。

指令名字：在Demo中我们用驼峰法填写指令名字(例如myDire)，但是在HTML中使用该指令就需要用短划线间隔的形式使用该指令（例如my-dire）因为HTML不区分大小写，所以形成了这种编写规范（占坑~如果找到更明确的理由再更新~）。
指令实现：我们用'restrict'和'template'两个参数来编写指令，还有在Demo中没有出现的'replace'
- restrict：告诉AngularJS在编译时使用哪种声明格式来匹配指令定义，可以指定1-4个格式(可以放到Demo中试试):
  - 格式：
    - 元素（E） <my-dire></my-dire>
    - 属性（A） <div my-dire></div>
    - 类（C） <div class="my-dire"></div>
    - 注释（M） 
  对于新手，需要先了解一下HTML的几个知识点，这对了解restrict的使用很有帮助哦：
```
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <a href></a>
        <div class="container"></div>
    </body>
</html>
```
  对于上面这样一般编辑器html:5然后tab就能生成出的简单HTML代码，包含了要介绍的HTML的各个部分。
  - HTML元素(element)由一个开始标签和一个结束标签组成。例如 <div class="container"></div>
  - HTML标签用来标记元素的开始和结束，标签本身用尖括号来声明。例如：<div></div>
  - 属性用来给HTML元素添加额外的信息，这些属性设置在开始标签中，使用key='value'的形式键值对设置。例如：
    <a href></a>
  - 类用class="XXX"的形式为标签赋予新的特性：例如<div class="container"><div>
- template：现在就暂时用''包含我们要赋予新指令的内容HTML模板，之后的教程会逐步深入的
- replace：咦这个是干啥的，之前没出现过呢。不要怕，replace就像它的名字一样都是“取代”的意思，接收一个boolean值参数，当true时替换，false时不替换。那替换的是什么呢？又到了上图的时候了~
当不写replace时或replace:false时，在指令生成的a标签外面，会有my-dire包裹着（如上图所示）；

当replace:true时，my-dire就不会出现了（如上图所示）~这就是replace的使用~简单吧

三、总结

指令入门很简单，但学会简单入门之后，我们会思考，要是我想要动态修改指令内部内容应该怎么做呢，Angular本身的特性例如双向数据绑定如何应用到指令上呢~等我下篇文章再一一道来~

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!