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

不用搭环境的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标签超链接的部分：

很简单的，分三步走：

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

  2. 首先在空的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的编写，先不用管这个东西怎么实现的，先实现了再说不要停

  3. 接下来来编辑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接收两个参数，第一个参数是指令名字，第二个参数是指令实现。

  1. 指令名字：在Demo中我们用驼峰法填写指令名字(例如myDire)，但是在HTML中使用该指令就需要用短划线间隔的形式使用该指令（例如my-dire）因为HTML不区分大小写，所以形成了这种编写规范（占坑如果找到更明确的理由再更新）。

  2. 指令实现：我们用'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） <!--directive:my-dire-->

      对于新手，需要先了解一下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本身的特性例如双向数据绑定如何应用到指令上呢等我下篇文章再一一道来

posted @ 2017-02-28 20:29  七喜哥哥仔  阅读(628)  评论(0)  编辑  收藏  举报