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: ...
随机推荐
- webstorm前端开发工具vue环境配置及运行项目
1:webstorm的安装:2:node.js的安装3:安装Git4:vue-cli 安装前面两步就可以把项目启动了,安装Git主要是打开命令窗口,这样就可以用liunx命令了,原理跟cmd差不多 V ...
- 洛谷P1996 约瑟夫问题【队列】
题目背景 约瑟夫是一个无聊的人!!! 题目描述 n个人(n<=100)围成一圈,从第一个人开始报数,数到m的人出列,再由下一个人重新从1开始报数,数到m的人再出圈,--依次类推,直到所有的人都出 ...
- NOIP2012 DAY2 T2借教室
题目描述 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们自然 ...
- vue 手机键盘把底部按钮顶上去
背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候,底部提交订单按钮被输入法软键盘顶上去遮挡住了. h5 ios输入框与键盘 兼容性优化 实现原理:当页面高度发生变化的时候改变底部butt ...
- 1. 构建第一个SpringBoot工程
1.File - New - Module 2.选项的是Spring Initializr(官方的构建插件,需要联网) ,一定要选择jdk 3.填写项目基本信息 Group:组织ID,一般分为多个段 ...
- composer 安装教程
https://getcomposer.org/download/ 邓士鹏 1.先检查php.ini是否开启ssl ;extension=php_openssl.dll 2. php -r &qu ...
- eclipsephp的环境设置
因需要研究开发opencart的插件模块,需要一套开发php的环境.这类程序就环境配置就够折腾吐血.自认为最简单的方法: 1.下载easyphp安装,这个玩意简单快捷傻瓜.米是5.38: 2.去ecl ...
- Number Puzzle
Number Puzzle Time Limit: 2 Seconds Memory Limit: 65536 KB Given a list of integers (A1, A2, .. ...
- C#--委托的同步,异步,回调函数
原文地址 同步调用 委托的Invoke方法用来进行同步调用.同步调用也可以叫阻塞调用,它将阻塞当前线程,然后执行调用,调用完毕后再继续向下进行. using System; using System. ...
- Python学习-生成器 - Generator
简单来说,generator是一个能够返回迭代器对象的函数. yield的使用: 在python中,当你定义一个函数,使用了yield关键字时,这个函数就是一个生成器,它的执行会和其他普通的函数有很多 ...