第一章 AngularJs入门

AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率。

1 特点

AngularJS与我们之前学习的jQuery是有一定的区别的。

jQuery更准确来说只是一个库,封装了许多函数帮我们完成单独的功能,其核心思想是简化DOM操作时所使用的写法、帮我们做兼容性处理等。我们写代码时,思路还是自己的思路,只不过写法更简便了。

AngularJS则一个框架,它帮我们搭建好了开发某类特定应用(网页)所需要的环境,我们写代码时需要以它规定的思路来写。那么,AngularJs的思路是什么呢?把界面和指定的数据对象同步起来,修改其中一方,另一方跟着改变。

这种思路的代码可能一开始理解起来比较困难,但是它更加适合于构建复杂的、代码量更大的项目。

2 下载与使用

  1. 下载
    1. 官方网站上下载。
    2. 使用npm install --save angular命令。
  2. 使用
    1. 引入angularjs文件
    2. 用自定义属性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在界面上打标记的方式。

  1. 作用域类:
    1. ng-app
  2. 内容类:
    1. ng-bind
    2. 插值语法({{}})
    3. ng-model
  3. 事件类:
    1. ng-click、ng-dblclick
    2. ng-blur、ng-focus等
    3. 其他
  4. 样式类:
    1. ng-class
    2. ng-style
    3. ng-hide与ng-show
  5. 仿流程控制类:
    1. ng-if
    2. ng-switch
    3. ng-repeat

angular基础入门的更多相关文章

  1. Angular 基础入门

    简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...

  2. Siki_Unity_1-3_Unity零基础入门_古迹探险

    1-3 Unity零基础入门 古迹探险 任务1/2:资料下载 链接:https://pan.baidu.com/s/1jHVymNk 密码:rbob 任务3:工程的创建和打开 Project:古迹探险 ...

  3. Angular 从入坑到挖坑 - Angular 使用入门

    一.Overview angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用.入坑一个多星期,通过学习官方文档以及手摸手的按 ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. 「译」JUnit 5 系列:基础入门

    原文地址:http://blog.codefx.org/libraries/junit-5-basics/ 原文日期:25, Feb, 2016 译文首发:Linesh 的博客:JUnit 5 系列: ...

  6. .NET正则表达式基础入门

    这是我第一次写的博客,个人觉得十分不容易.以前看别人写的博客文字十分流畅,到自己来写却发现十分困难,还是感谢那些为技术而奉献自己力量的人吧. 本教程编写之前,博主阅读了<正则指引>这本入门 ...

  7. 从零3D基础入门XNA 4.0(2)——模型和BasicEffect

    [题外话] 上一篇文章介绍了3D开发基础与XNA开发程序的整体结构,以及使用Model类的Draw方法将模型绘制到屏幕上.本文接着上一篇文章继续,介绍XNA中模型的结构.BasicEffect的使用以 ...

  8. 从零3D基础入门XNA 4.0(1)——3D开发基础

    [题外话] 最近要做一个3D动画演示的程序,由于比较熟悉C#语言,再加上XNA对模型的支持比较好,故选择了XNA平台.不过从网上找到很多XNA的入门文章,发现大都需要一些3D基础,而我之前并没有接触过 ...

  9. Shell编程菜鸟基础入门笔记

    Shell编程基础入门     1.shell格式:例 shell脚本开发习惯 1.指定解释器 #!/bin/bash 2.脚本开头加版权等信息如:#DATE:时间,#author(作者)#mail: ...

随机推荐

  1. promise原理及使用方法

    Promise 的含义 所谓Promise ,简单说就是一个容器,里面保存着某个未来才回结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息. re ...

  2. day008 字符编码之 字符编码 、Python2和Python3字符编码的区别

    计算机基础(掌握) 启动应用程序的流程 双击qq 操作系统接受指令然后把该操作转化为0和1发送给CPU CPU接受指令然后把指令发送给内存 内存接受指令把指令发送给硬盘获取数据 qq在内存中运行 文本 ...

  3. 【转载】Java IO基础总结

    Java中使用IO(输入输出)来读取和写入,读写设备上的数据.硬盘文件.内存.键盘......,根据数据的走向可分为输入流和输出流,这个走向是以内存为基准的,即往内存中读数据是输入流,从内存中往外写是 ...

  4. 15.5.5 【Task实现细节】围绕 await 表达式的控制

    任何 await 表达式均表示执行路径的一个分支.首先,被等待的异步操作得到一个awaiter,然后检查其 IsCompleted 属性.若返回 true ,即可立即获得结果并继续.否则,需进行以下处 ...

  5. vue-router 懒加载

    懒加载:也叫延迟加载,即在需要的时候进行加载,按需加载. 那vue 为什么需要懒加载呢? 使用 vue-cli构建的项目,在默认情况下,执行 npm run build  会将所有的 js代码打包为一 ...

  6. 01 c++常见面试题总结

    https://www.cnblogs.com/yjd_hycf_space/p/7495640.html   C++常见的面试题 http://c.tedu.cn/workplace/217749. ...

  7. CSS 利用transform达到居中效果

    <body> <div class="center"> .... </div> </body> 让left和top都是50%,这在水 ...

  8. 38.mapping小例子

    主要知识点 初步了解mapping     一,准备数据 插入几条数据,让es自动为我们建立一个索引     PUT /website/article/1 { "post_date" ...

  9. 26.mget批量查询

    主要知识点     一.mget批量查询的好处     get查询就是一条一条的查询,比如说要查询100条数据,那么就要发送100次网络请求,这个开销还是很大的.如果使用mget进行批量查询的话,查询 ...

  10. Jquery语法基础

    Jquery语法基础 一.Jquery一般语法格式为:$(selector).action() l  美元符号定义 jQuery (又称工厂函数) l  选择器(selector)“查询”和“查找” ...