angular基础入门
第一章 AngularJs入门
AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率。
1 特点
AngularJS与我们之前学习的jQuery是有一定的区别的。
jQuery更准确来说只是一个库,封装了许多函数帮我们完成单独的功能,其核心思想是简化DOM操作时所使用的写法、帮我们做兼容性处理等。我们写代码时,思路还是自己的思路,只不过写法更简便了。
AngularJS则一个框架,它帮我们搭建好了开发某类特定应用(网页)所需要的环境,我们写代码时需要以它规定的思路来写。那么,AngularJs的思路是什么呢?把界面和指定的数据对象同步起来,修改其中一方,另一方跟着改变。
这种思路的代码可能一开始理解起来比较困难,但是它更加适合于构建复杂的、代码量更大的项目。
2 下载与使用
- 下载
- 从官方网站上下载。
- 使用
npm install --save angular
命令。
- 使用
- 引入
angularjs
文件 - 用自定义属性
ng-app
来声明应用的边界,所谓的应用边界指的就是angularjs
在网页上生效的范围。(自定义属性?)
- 引入
3 基础概念
对比常规写法和AngularJs的写法,感受AngularJs框架带来的简便。
实际上,AngularJs的思路很简单。
常规情况下,我们想要修改页面上显示的内容,需要使用各种DOM操作。浏览器把显示在屏幕上的标签抽象成了一个个DOM对象,我们操作DOM对象的属性,就能控制屏幕上的标签。
而AngularJs会在此基础上更进一步,它会把DOM对象上的部分属性,抽象到一个数据对象上,我们对这个数据对象进行操作,就能控制DOM对象,进一步控制页面显示。
如图:
(注意:用AngularJs时,程序员只是操作对象而已,并没有操作DOM。)
简单来讲,Angular的核心就在于同步二字上。
什么是同步?两个事物建立起某种联系,一个发生变化,另外一个也就跟着发生变化。
页面上的标签和DOM对象有联系,DOM对象和AngularJs提供的数据对象,也有联系。而且,这种联系如何建立起来,还是我们程序员来指定的。
比如这段代码:
<div>
短消息:<span ng-bind="data.msg"></span>
</div>
我们就用ng-bind
这个自定义属性,在span
标签的内容和数据对象上data.msg
这条数据联系到了一起,data.msg
是什么,span
标签里面就会显示什么。
4 AngularJs的指令
所谓的指令,就是AngularJs“给某个标签打标记”的方式。不打标记,AngularJs就不知道如何去同步界面和数据,应该把数据同步到界面的什么地方上去。
接下来,我们来学习一些用AngularJs在界面上打标记的方式。
- 作用域类:
- ng-app
- 内容类:
- ng-bind
- 插值语法({{}})
- ng-model
- 事件类:
- ng-click、ng-dblclick
- ng-blur、ng-focus等
- 其他
- 样式类:
- ng-class
- ng-style
- ng-hide与ng-show
- 仿流程控制类:
- ng-if
- ng-switch
- ng-repeat
angular基础入门的更多相关文章
- Angular 基础入门
简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...
- Siki_Unity_1-3_Unity零基础入门_古迹探险
1-3 Unity零基础入门 古迹探险 任务1/2:资料下载 链接:https://pan.baidu.com/s/1jHVymNk 密码:rbob 任务3:工程的创建和打开 Project:古迹探险 ...
- Angular 从入坑到挖坑 - Angular 使用入门
一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- 「译」JUnit 5 系列:基础入门
原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...
- .NET正则表达式基础入门
这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...
- 从零3D基础入门XNA 4.0(2)——模型和BasicEffect
[题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...
- 从零3D基础入门XNA 4.0(1)——3D开发基础
[题外话] 最近要做一个3D动画演示的程序,由于比较熟悉C#语言,再加上XNA对模型的支持比较好,故选择了XNA平台.不过从网上找到很多XNA的入门文章,发现大都需要一些3D基础,而我之前并没有接触过 ...
- Shell编程菜鸟基础入门笔记
Shell编程基础入门 1.shell格式:例 shell脚本开发习惯 1.指定解释器 #!/bin/bash 2.脚本开头加版权等信息如:#DATE:时间,#author(作者)#mail: ...
随机推荐
- promise原理及使用方法
Promise 的含义 所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息. re ...
- day008 字符编码之 字符编码 、Python2和Python3字符编码的区别
计算机基础(掌握) 启动应用程序的流程 双击qq 操作系统接受指令然后把该操作转化为0和1发送给CPU CPU接受指令然后把指令发送给内存 内存接受指令把指令发送给硬盘获取数据 qq在内存中运行 文本 ...
- 【转载】Java IO基础总结
Java中使用IO(输入输出)来读取和写入,读写设备上的数据.硬盘文件.内存.键盘......,根据数据的走向可分为输入流和输出流,这个走向是以内存为基准的,即往内存中读数据是输入流,从内存中往外写是 ...
- 15.5.5 【Task实现细节】围绕 await 表达式的控制
任何 await 表达式均表示执行路径的一个分支.首先,被等待的异步操作得到一个awaiter,然后检查其 IsCompleted 属性.若返回 true ,即可立即获得结果并继续.否则,需进行以下处 ...
- vue-router 懒加载
懒加载:也叫延迟加载,即在需要的时候进行加载,按需加载. 那vue 为什么需要懒加载呢? 使用 vue-cli构建的项目,在默认情况下,执行 npm run build 会将所有的 js代码打包为一 ...
- 01 c++常见面试题总结
https://www.cnblogs.com/yjd_hycf_space/p/7495640.html C++常见的面试题 http://c.tedu.cn/workplace/217749. ...
- CSS 利用transform达到居中效果
<body> <div class="center"> .... </div> </body> 让left和top都是50%,这在水 ...
- 38.mapping小例子
主要知识点 初步了解mapping 一,准备数据 插入几条数据,让es自动为我们建立一个索引 PUT /website/article/1 { "post_date" ...
- 26.mget批量查询
主要知识点 一.mget批量查询的好处 get查询就是一条一条的查询,比如说要查询100条数据,那么就要发送100次网络请求,这个开销还是很大的.如果使用mget进行批量查询的话,查询 ...
- Jquery语法基础
Jquery语法基础 一.Jquery一般语法格式为:$(selector).action() l 美元符号定义 jQuery (又称工厂函数) l 选择器(selector)“查询”和“查找” ...