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: ...
随机推荐
- Vue: axios 请求封装及设置默认域名前缀 (for Vue 2.0)
1. 实现效果 以get方法向http://192.168.32.12:8080/users 发起请求.获取数据并进行处理 this.apiGet('/users', {}) .then((res) ...
- Java导出Excel(附完整源码)
导出excel是咱Java开发的必备技能啦,之前项目有这个功能,现在将其独立出来,分享一下.所用技术就是SpringBoot,然后是MVC架构模式.废话不多说,直接上代码了,源码点末尾链接就可以下载. ...
- 给数组增加remove函数
//给数组增加indexOf函数Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { ...
- 在vue中写一个跟着鼠标跑的div,div里面动态显示数据
1.div应该放在body里面,这是我放在body中的一个div里面的div <!-- 信息查看层 --> <div class="floatDiv" :styl ...
- 51nod1046 A^B Mod C【快速幂】
给出3个正整数A B C,求A^B Mod C. 例如,3 5 8,3^5 Mod 8 = 3. Input 3个正整数A B C,中间用空格分隔.(1 <= A,B,C <= 10^9) ...
- 我理解的数据结构(三)—— 队列(Queue)
我理解的数据结构(三)-- 队列(Queue) 一.队列 队列是一种线性结构 相比数组,队列对应的操作是数组的子集 只能从一端(队尾)添加元素,只能从另一端(队首)取出元素 队列是一种先进先出的数据结 ...
- CentOS7下安装docker(Docker系列1)
CentOS7下安装docker 系统要求 为了安装docker,需要准备 64-bit的CentOS 7 删除非官方的Docker包 yum的仓库中有一个很旧的Docker包, 现在Docker官方 ...
- (转载)关于初学者上传文件到github的方法
说来也惭愧,我是最近开始用github,小白一个,昨天研究了一个下午.终于可以上传了,所以今天写点,一来分享是自己的一些经验,二来也是做个记录,万一哪天又不记得了:) 废话不多说,直接来,这次主要介绍 ...
- 【例题 4-4 uva 213】Message Decoding
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 输入的二进制长度最长为7 所以得开个sta[7][2^7]的样子才存的下所有的字符的.. 定义这么一个数组当字典. 然后一个字符一个 ...
- Java Web学习总结(28)——Java Web项目MVC开源框架SSH和SSM比较
SSH和SSM定义 SSH 通常指的是 Struts2 做控制器(controller),spring 管理各层的组件,hibernate 负责持久化层. SSM 则指的是 SpringMVC 做控制 ...