不用搭环境的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标签超链接的部分:
很简单的,分三步走:
在这次代码书写的过程中不用搭建环境,只需要在某个文件夹下新建两个空文件: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)
<!--directive:my-dire-->
- 元素(E)
对于新手,需要先了解一下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本身的特性例如双向数据绑定如何应用到指令上呢等我下篇文章再一一道来
不用搭环境的10分钟AngularJS指令简易入门01(含例子)的更多相关文章
- 都9102年了,还不会Docker?10分钟带你从入门操作到实战上手
Docker简述 Docker是一种OS虚拟化技术,是一个开源的应用容器引擎.它可以让开发者将应用打包到一个可移植的容器中,并且该容器可以运行在几乎所有linux系统中(Windows10目前也原生支 ...
- 10分钟.Net Core 简单入门教程
以 Centos 为例 1.安装所需的依赖关系 打开命令提示符并运行以下命令: sudo rpm -Uvh https://packages.microsoft.com/config/rhel/7/p ...
- 10分钟 PySimpleGUI 图形界面入门
import PySimpleGUI as sg layout = [ [sg.Text('Enter a Number')], [sg.Input()], [sg.OK()] ] event,(nu ...
- 10分钟学会搭建Android开发环境 Eclipse: The import android.support cannot be resolved
10分钟学会搭建Android开发环境_隋雨辰 http://v.youku.com/v_show/id_XNTE2OTI5Njg0.html?from=s1.8-1-1.2 The import a ...
- 10分钟学会Less开发环境搭建与初体验
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 今天看一下,10分钟能不能手把手快速教会你Le ...
- Python基于VS2013 开发环境搭建 Hello World 10分钟搞定
1.先下载Python 安装 Next ->安装完成 2.以前安装过VS2013 打开VS2013 文件->新建项目 (此时如果没有Python Application,请点击里面的安装插 ...
- Apache Shiro系列三,概述 —— 10分钟入门
一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...
- JavaScript 10分钟入门
JavaScript 10分钟入门 随着公司内部技术分享(JS进阶)投票的失利,先译一篇不错的JS入门博文,方便不太了解JS的童鞋快速学习和掌握这门神奇的语言. 以下为译文,原文地址:http://w ...
- emacs最简单入门,只要10分钟
macs最简单入门,只要10分钟 windwiny @2013 无聊的时候又看到鼓吹emacs的文章,以前也有几次想尝试,结果都是玩不到10分钟就退出删除了. 这次硬着头皮,打开几篇文章都看完 ...
随机推荐
- xamarin mac 基础知识 之 界面
有两种方式创建界面:代码和xaml
- 阿里CEO张勇:阿里蚂蚁20亿元扶持开发者
https://bbs.taobao.com/catalog/thread/508895-318032179.htm?spm=a21bo.7724922.8439-0.2.tkjSOl 阿里CEO张勇 ...
- IOS 创建和设置pch
1.添加pch文件 2.修改工程配置文件 Building Settings->All->Apple LLVM 6.0 -Language -> Prefix Header
- Delphi拷贝目录(含子目录)的方法
要实现目录级的拷贝,可以利用Windows API函数ShFileOperation( ),其函数声明如下: WINSHELLAPI int WINAPI SHFileOperation( LPSHF ...
- SQL 查询同一天日期内的数据
条件如下: convert(date,a.dtClock) = convert(date,b.dtClock)
- 安装使用GYP,并编译libpomelo2
1.然后是下载GYP,它是由 Chromium 团队开发的跨平台自动化项目构建工具,安装后可以使用其构建出libpomelo的vs工程项目,再而进行编译,这步先下载,地址: http://code.g ...
- 初识SuperSocket
有一些企业由于以前使用的操作系统是被淘汰的操作系统,例如OpenVMS.现需要将针对openvms开发的通讯程序进行移植到现在的windows操作系统上,通过一段时间的了解,现在需要花时间去找商业性的 ...
- 支持Angular 2的表格控件
前端框架一直这最近几年特别火的一个话题,尤其是Angular 2拥有众多的粉丝.在2016年9月份Angular 2正式发布之后,大量的粉丝的开始投入到了Angular 2的怀抱.当然这其中也包括我. ...
- DEVTMPFS
devtmpfs选项保证了系统启动使用临时文件系统.不选会启动出现readonly ,无法启动
- Hadoop权威指南:压缩
Hadoop权威指南:压缩 [TOC] 文件压缩的两个好处: 减少储存文件所需要的磁盘空间 加速数据在网络和磁盘上的传输 压缩格式总结: 压缩格式 工具 算法 文件扩展名 是否可切分 DEFLATE ...