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
最新文章
- 使用Rest访问Redis中的数据
- 使用visualvm远程监控JVM LINUX服务器配置方法
- [教程] [授权翻译] 使用补丁修改DSDT/SSDT [DSDT/SSDT综合教程]
- Objective-c——UI基础开发第十二天(相册展示)
- 关于MySql数据库设计表与查询耗时分析
- nuget使用
- spring mvc读取url变量
- 投影纹理映射(Projective Texture Mapping)
- [IoLanguage]Io Tutorial[转]
- [转] Git 分支 - 分支的新建与合并
- python 查看文件夹权限组和用OS模块操作文件夹
- sys--system-sysdba-sysoper用户区别
- Flask学习记录之Flask-Admin
- Struts2-在js中使用struts2标签
- Codeforces 300C Beautiful Numbers 【组合数】+【逆元】
- Innodb中的行锁与表锁
- 【IT界的厨子】酱香鲈鱼
- Oracle登录后提示ORA-12154:TNS:无法解析指定的连接标识符
- docker swarm英文文档学习-1-概述
- # 《网络对抗》Exp1 PC平台逆向破解20155337祁家伟
热门文章
- js通过插件发送邮件
- PAT_A1109#Group Photo
- 【剑指Offer】36、两个链表的第一个公共结点
- mysql连接错误,error1251解决方式
- 什么是hashMap,初始长度,高并发死锁,java8 hashMap做的性能提升
- hdu 1576扩展欧几里得算法
- F - Count the Colors
- 自己定义ShareSDK分享平台界面
- Codeforces Round #313 (Div. 2) 560D Equivalent Strings(dos)
- 2015多校联合训练赛 hdu 5308 I Wanna Become A 24-Point Master 2015 Multi-University Training Contest 2 构造题