AngularJS介绍

AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和移动端应用。AngularJS由Google公司开发而且开源出来,给所有开发者使用。前端基于Bootstrap+AngularJS框架,后端基于RESTful服务框架开发的应用越来越多。未来后端基于Docker+Microservice部署的应用也会越来越多。

AngularJS官方网站

AngularJS特点

1.客户端模板
传统的web应用:都是多页面,服务器端创建html,把html和数据装配在一起,然后再把生成好的html页面返回给浏览器。

单页应用(Single Page Application):模板和数据都会返回给浏览器中,然后在浏览器中进行装配。服务端仅仅为这些模板提供静态资源,然后为这些模板提供所需的数据。

2.MVC
M(Model)-V(View)-C(Controller)最早主要是在桌面应用开发中使用,强调的是界面,数据模型和控制器的三者之间的分离。视图会从模型中获取数据,然后展示给用户,当用户通过鼠标或键盘操作或键入与应用进行交互的时候,控制器将会做出响应,并修改模型中的数据,最后模型会通知视图,数据已经发生变化,这样视图就可以刷新其中改变的内容。

3.数据双向绑定
view层的数据和model层的数据是双向绑定的,其中之一发生更改,另一方会随之变化,这不用你写任何代码。

4.指令
可以把模板和相关业务逻辑编写成html标签的形式,之所以可以实现这一点,主要是因为AngularJS引入了一款强大的DOM转换引擎,可以用它来扩展HTML语法。生成的新的html标签就是指令,AngularJS内置了非常多的质量,比如:ng-repeat,ng-app,ng-controller等等。当内置指令不够时,开发者可以根据业务需求自定义开发指令。

5.依赖注入
Dependency Injection是一种设计模式,目的是在配置应用时定义应用所需的依赖。使用依赖注入能避免手动创建应用的依赖。初次启动应用时,AngularJS会使用依赖注入加载模块的依赖。

Java流行框架Spring就是充分使用了依赖注入。依赖注入能提升AngularJS应用的可测试性,而且AngularJS单元测试和集成测试还有专门的测试框架。

6.可测试性
AngularJS应用借助依赖注入的,大大提升了应用的可测试性。目前Web前端应用,一般会进行两种测试。第一种是单元测试(Unit Test),单元测试主要测试代码的一个小的单元,能在开发过程中尽早发现软件的缺陷;第二种是端到端测试(End to End,简称:E2E)。端到端测试主要测试软件中各个组件结合在一起的交互行为,从而发现软件的缺陷。

QA主要功能测试,就是开发工程师发布代码之后,测试工程师根据业务需求和功能进行功能测试。

AngularJS相比其他框架

目前主要流行的几大框架:

1.jQuery

2.React

3.Vue.js

4.Ember.js

以上四个框架都有自己的开发者,每个框架都有自己的优点和缺点。在实际项目开发者,还是要根据团队成员对框架的掌握程度来决定。但是我们还是推荐大家使用AngularJS。

Angular1.x和Angular2

在国内1.5.x版本开发的应用应该较多,但是2.0版本也已经发布了。对于Angular2,很多开发者都觉的要重新学习一遍。因为变动确实太大了,好在提供了从1.x迁移到2.0相关的工具。后面博客中涉及的版本都是基于Angular1.5.X版本。等团队成员对angular1.x相关技术和原理有一定的理解,到时才会考虑使用Angular2.0。

参考资料

1.https://zh.wikipedia.org/wiki/AngularJS

2.https://github.com/paddingme/ng-demo/blob/master/slide.md

Angular企业级开发(1)-AngularJS简介的更多相关文章

  1. Angular企业级开发-AngularJS1.x学习路径

    博客目录 有链接的表明已经完成了,其他的正在建设中. 1.AngularJS简介 2.搭建Angular开发环境 3.Angular MVC实现 4.[Angular项目目录结构] 5.[SPA介绍] ...

  2. Angular企业级开发(7)-MVC之控制器

    1.MVC中的控制器 AngularJS的控制器主要为了把模型和视图连接在一起.大多数业务逻辑操作都会放在视图对应的控制器中.当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级Ang ...

  3. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  4. Angular企业级开发(2)-搭建Angular开发环境

    1.集成开发环境 个人或团队开发AngularJS项目时,有很多JavaScript编辑器可以选择.使用优秀的集成开发环境(Integrated Development Environment)能节省 ...

  5. Angular企业级开发(4)-ngResource和REST介绍

    一.RESTful介绍 RESTful维基百科 REST(表征性状态传输,Representational State Transfer)是Roy Fielding博士在2000年他的博士论文中提出来 ...

  6. Angular企业级开发(3)-Angular MVC实现

    1.MVC介绍 Model-View-Controller 在20世纪80年代为程序语言Smalltalk发明的一种软件架构.MVC模式的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并 ...

  7. Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中.使用gulp能完成以下任务: 压缩html.css和js 编译less或sass等 压缩图片 ...

  8. Angular企业级开发(8)-控制器的作用域

    scope概念 scope(作用域)是视图和控制器之间的桥梁,scope本身是一个对象,有方法和属性.scope可以应用在视图和控制器上. scope简单示例 <!DOCTYPE html> ...

  9. Angular企业级开发(9)-前后端分离之后添加验证码

    1.背景介绍 团队开发的项目,前端基于Bootstrap+AngularJS,后端Spring MVC以RESTful接口给前端调用.开发和部署都是前后端分离.项目简单部署图如下,因为后台同时采用微服 ...

随机推荐

  1. ASP.NET Aries 入门开发教程5:自定义列表页工具栏区

    前言: 抓紧时间,继续写教程,因为发现用户期待的内容,都在业务处理那一块. 不得不继续勤劳了. 这节主要介绍工具栏区的玩法. 工具栏的默认介绍: 工具栏默认包括5个按钮,根据不同的权限决定显示: 添加 ...

  2. 立即执行函数表达式(IIFE)

    原文地址:benalman.com/news/2010/11/immediately-invoked-function-expression/ 译者:nzbin 也许你还没有注意到,我是一个对术语比较 ...

  3. 初探Vue

    Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...

  4. Java程序:从命令行接收多个数字,求和并输出结果

    一.设计思想:由于命令行接收的是字符串类型,因此应先将字符串类型转化为整型或其他字符型,然后利用for循环求和并输出结果 二.程序流程图: 三.源程序代码:   //王荣荣 2016/9/23     ...

  5. Ajax部分

    Ajax的概念 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指 ...

  6. django 学习第一天搭建环境

    目前django版本是1.10,我学习的基础教材是 Web Development with Django Cookbook, Second Edition 搭建好配置环境 ssh免认证登录 修改一下 ...

  7. 图解Spark API

    初识spark,需要对其API有熟悉的了解才能方便开发上层应用.本文用图形的方式直观表达相关API的工作特点,并提供了解新的API接口使用的方法.例子代码全部使用python实现. 1. 数据源准备 ...

  8. mysql5.x升级至mysql5.7后导入之前数据库date出错的解决方法!

    mysql5.x升级至mysql5.7后导入之前数据库date出错的解决方法! 修改mysql5.7的配置文件即可解决,方法如下: linux版:找到mysql的安装路径进入默认的为/usr/shar ...

  9. Android NDK debug 方法

    最近又频繁遇到 NDK 的错误,记录一下debug调试的一些经验,以备后续查看 一般来说,在Android Studio中的Monitor中将过滤器的 LOG TAG 设置为 "DEBUG& ...

  10. hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()的用法

    javascript中有原型这么一个概念,任何一个构造函数都有它对应的原型(prototype),我们可以给这个原型赋予一些我们想要的属性,像下面这样: function Gadget(name, c ...