Angularjs——初识AngularJS

AngularJS——初识AngularJS

AngularJS是什么

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

AngularJS创始人的自述

“AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。”

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>

热门相关:仙城纪   豪门闪婚:帝少的神秘冷妻   刺客之王   第一神算:纨绔大小姐   仗剑高歌