AngularJS——初识AngularJS

AngularJS是什么

AngularJS是Google开源的一款前端JS结构化框架,它通过对前端开发进行分层,极好地规范了前端开发的风格——它将前端开发分为Controller层、Service层、DAO层和Model层。其中,Model对象与HTML页面(视图)上HTML元素进行双向绑定,开发者可通过Controller调用Service、DAO与后端交互,获取后端数据之后,只要修改其中Model对象的值,视图页面也会随之动态改变。这个设计架构层次非常清晰,而且具有一定的“强制性”,整个前端团队一旦采用AngularJS框架,那么整个前端开发风格会变得简单、清晰,所有团队成员都能采用一致的开发风格,这也是AngularJS的魅力所在。

AngularJS特性(优点)

  • 双向数据绑定;
  • 声明式依赖注入;
  • 解耦应用逻辑、数据模型和视图;
  • 完善的页面指令;
  • 定制表单验证;
  • Ajax封装。

与jQuery的比较

jQuery

  • JS函数库;
  • 封装简化DOM操作。

AngularJS

  • JS结构化框架;
  • 主体不再是DOM,而是页面中的动态数据。

AngularJS的应用

构建单页面(single page application,SPA)Web应用或Web APP应用。

单页面应用(single page application)

定义

将所有的活动局限于一个页面,浏览器一开始就加载网页所有内容,当页面中有部分数据发生了变化,不会刷新整个页面,而是局部刷新(利用的Ajax技术)。

优点

  • 用户体验好,内容的改变不需要重新加载整个页面;
  • 适合前后端分离开发,服务器只出数据,减轻了服务器压力。

缺点

  • 首屏加载速度慢;
  • 不利于SEO优化。

AngularJS的组成

  • ng-app : 该指令用于设置AngularJS应用。例如为<body.../>元素增加了ng-app属性,这意味着所有AngularJS应用处于<body.../>元素内。在<body.../>元素内可使用其他AngularJS指令,也可使用{{}}来输出表达式。
  • ng-model : 该指令用于执行“双向绑定”,所谓双向绑定指的是将HTML输入元素的值与AngularJS应用的某个变量进行绑定。完成“双向绑定”之后,当HTML输入元素的值发生改变时,AngularJS应用中绑定的变量的值也会随之改变;反过来,当程序修改AngularJS应用的变量的值时,HTML输入元素的值也会随之改变。
  • ng-bind : 该指令用于绑定ng-model的数据。

下载AngularJS

AngularJS也是一个纯粹的JavaScript库,下载AngularJS与下载其它JavaScript库一样,打开链接后,选中相应的版本下载即可。下载链接

注意

  • AngularJS是AngularJS 1.X,并不是Angular 2.X(Angular 2没有JS后缀);
  • AngularJS 1.X是真正轻量级JavaScript框架,比较适合熟悉JavaScript的前端开发者;
  • Angular 2.X使用的是TypeScript脚本,其开发高度依赖Node.js。

版本选择

  • angular.min.js:该版本是去除注释后的AngularJS库,文件体积较小,开发实际项目时推荐使用该版本。
  • angular.js:该版本的AngularJS库没有压缩,而且保留了注释。学习AngularJS及有兴趣研究AngularJS源代码的读者可以使用该版本。
  • angular-xxx.min.js:AngularJS为特定功能提供的支持库。比如angular-animate.min.js就是AngularJS的动画支持库;angular-cookies.min.js就是AngularJS的Cookie访问支持库。
  • angular-xxx.js:与对应的angular-xxx-min.js库的功能相同,只是保留了注释,没有压缩。

安装AngularJS

AngularJS库的安装很简单,只要在HTML页面中导入AngularJS的JavaScript文件即可。

<script type="text/javascript" src="angular.min.js"></script>

其中,src 属性为待导入的AngularJS文件。

第一个AngularJS应用

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<script src="../../js/angular-1.2.29/angular.js"></script>
<title>第一个程序</title>
</head>
<body ng-app>
<input type="text" ng-model="mymodel" />
<p>您输入的内容是:<span>{{mymodel}}</span></p>
</body>
</html>

Angularjs——初识AngularJS的更多相关文章

  1. AngularJS初识

     AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...

  2. 【AngularJS】AngularJS 教程

    AngularJS通过新的属性和表达式扩展了HTML.------------->扩展HTML属性 AngularJS可以构建一个单页面应用程序(SPAs: Single Page Applic ...

  3. 初识AngularJS 之 HelloWorld和数据绑定

    1.Hello World 我用的开发工具是   atom   ,大家有需要的话可以找我要安装包嘻嘻 第一步: 写入以下代码: <!DOCTYPE html> <html ng-ap ...

  4. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...

  5. 前端 初识angularJS的基本概念

    DEMO1演示地址:http://webenh.chinacloudsites.cn/default/demo1   今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angula ...

  6. 【AngularJS】—— 1 初识AngularJs

    怀着激动与忐忑的心情,开始了学习AngularJS的旅程,很久之前就听说了这个前端框架,但是由于自己一直没有从事相关的工作,因此也没有进行学习.这次正好学习AngularJS,直接复习一下前端的知识. ...

  7. 【AngularJS】—— 2 初识AngularJs(续)

    前一篇了解了AngularJS的一些简单的使用,这里继续跟着w3c学习一下剩下的内容. 本篇根据w3cschool.cc继续学习AngularJS剩余的内容,包括: 1 事件 2 模块 3 表单 4 ...

  8. angularjs初识ng-app、ng-model、ng-repeat指令

    ng-app属性是angular.js的标志语句,它标记了angular.js的作用域.ng-app可以添加在很多地方,像上面那样添加到html标签上,说明angular脚本对整个页面都起作用.也可以 ...

  9. 初识angularJS的基本概念

    今天在这里分享分享我个人学习angular的知识点总结.在还没有接触到angular的时候,还真的不知道它到底有什么作用,直到我开始学习它,并且运用到它的时候,才知道angular这么强大.作为一个前 ...

  10. 第一章-初识AngularJS

    完全使用javascript编写的客户端技术.同其他历史悠久的Web技术配合使用,使Web应用开发比以往更简单,更快捷. Angularjs主要用于构建单页面Web应该.它通过增加开发人员和常见Web ...

随机推荐

  1. 通过 Github Action 实现定时推送天气预报

    偶然间,看到 GitHub Actions 教程:定时发送天气邮件 - 阮一峰的网络日志 这篇文章,没错,这个正好能打发自己的折腾之心,也能通过代码给生活引入一些变化. 还是在这里简单记录一下实现过程 ...

  2. 【Chrome浏览器】关闭触摸板双指滑动进行前进后退的功能

    痛点 Chrome浏览器使用过程中,当前页面经常会莫名其妙地退回到上一个浏览的页面. 当时真是一脸懵B(心里一万头草泥马呼啸而过~)!以为活见鬼了! 后来才发现浏览器左边,有一个幽灵般的淡蓝色箭头的出 ...

  3. Java函数式编程:一、函数式接口,lambda表达式和方法引用

    Java函数式编程 什么是函数式编程 通过整合现有代码来产生新的功能,而不是从零开始编写所有内容,由此我们会得到更加可靠的代码,并获得更高的效率 我们可以这样理解:面向对象编程抽象数据,函数式编程抽象 ...

  4. win10本地python第三方库安装成功,但是pycharm项目无法使用解决方案

    一.背景win10本地python第三方库安装成功,但是pycharm项目无法使用解决方案如本地安装的python中的request库,在pycharm项目中居然无法使用,比较郁闷 pip list ...

  5. python基础之标识符、注释与变量

    一.注释 1.作用:注释是用来解释和说明代码的. 2.分类:注释可以分为单行注释和多行注释 2.1.单行注释:在编写的代码或文字前加上"#",表示单行注释 1 #我是单行注释 2 ...

  6. 如何规范App广告的隐私获取,让用户拥有更多知情权?

    随着互联网的不断普及,越来越多老百姓使用智能设备触达互联网.但用户经常发现自己无意间提到的东西,打开App就收到相关产品的广告推送,甚至有人怀疑手机App是通过麦克风来窃取自己平时聊天信息中的关键词进 ...

  7. F118校准(一)-- 安装CA310驱动程序及SDK

    1. 准备工作 下载Ca310_drv.zip文件并解压,备用. http://www.xk-image.com/download/blog/0001_F118校准/Ca310_drv.zip 准备好 ...

  8. 前端JS获取路由地址里的参数QueryString取值

    参数的获取 声明一个函数 //参数name是路由参数 engNo function getQueryString(name) { var reg = new RegExp("(^|& ...

  9. 基于PCIe DMA的8通道视频采集&显示IP,兼容V4L2

    基于PCIe DMA的8通道视频采集&显示IP,兼容V4L2 Video Capture&Display IP for V4L2 在主机端视频设备内核驱动V4L2 的控制和调度下,Vi ...

  10. 详细了解JVM运行时内存

    详细了解JVM运行时内存 1.程序计数器 概念 程序计数器也叫作PC寄存器,是一块很小的内存区域,可以看做是当前线程执行的字节码的行号指示器.字节码的解释工作就是通过改变程序计数器里面的值来获得下一条 ...