以前开发(web或者移动端)前端主要使用jQuery+原生js,如果使用某些前端UI框架的话,它自己还可能提供一些API可以使用。而且目前很多UI框架都是基于jQuery的,所以说一下由jQuery跨到angularjs跨度较大,研究了一段时间的angularjs ,下面从整体上说说感受吧:

关于和jquery的比较

首先angular是一个mvc框架,它与jquery不同之处在于,前者致力于mvc代码解耦,采用model,controller以及view方式去组织代码,而后者提供给你了很多APi函数,你可以不用写很多原生js去实现比较复杂的效果,比如说动画,$.animate,这样的效果如果需要原生js来写的话,代码量将会比较庞大;

其次,jQuery没有定义你的代码如何组织,你可以将它放在一个单独的js文件中进行引用,也可以直接写在页面中采用script标签进行包裹,甚至可以直接以内联的方式写在html标签中,但是angularjs会将一个HTML页面分成若干个模块,每个模块都可以自己的scope,service以及directive,各个模块之间也可以进行通信,但是整体上结构是比较清晰的,就是说其代码组织方式是模块化的。

最后,jQuery的思想是先设计好页面,然后在已有页面的基础上进行dom操作后展示页面,但是angular的view可能仅仅是一个框架,对view的dom操作或者时间监听都是在directive中实现的,而且一般情况下很少自己直接去写Dom操作代码,只要你监听model。model发生变化后view也会发生变化。

关于适用场合

jQuery应该适用于大多数web开发,移动端也有(jQuerymobile),angularjs有人说更适合做SPA(我个人认为在手机上的SPA可能会引发性能上的问题,因为它的脏检查机制会影响性能),在web端,一些CRUD的应用或者管理类软件还是可以使用的(当然这里的理解可能不一定准确,会随着深入学习更多去了解和使用)。

关于UI的结合

开发任何产品都需要用到前端UI,目前很多UI是基于jQuery的,这意味着你如果要用angularjs和这些Ui组件的话,需要用angularjs的directive去重写些组件,这一过程是比较麻烦的,所幸的是,angular给我们提供了一些UI组件可以使用(web端主要是结合bootstrap前端组件),http://angular-ui.github.io/,而在移动端主要是结合ionic框架http://ionicframework.com/,但是随着angular的发展,很多HTML5的前端框架也慢慢集成了angularjs版本可供使用。

关于angularjs的特点

1.数据的双向绑定:这可能是其最激动人心的特性吧,view层的数据和model层的数据是双向绑定的,其中之一发生更改,另一方会随之变化,这不用你写任何代码!(想想jQuery方式下怎么做吧)

2.代码模块化,每个模块的代码独立拥有自己的作用域,model,controller等。

3.强大的directive可以将很多功能封装成HTML的tag,属性或者注释等,这大大美化了HTML的结构,增强了可阅读性;

4.依赖注入,将这种后端语言的设计模式赋予前端代码,这意味着前端的代码可以提高重用性和灵活性,未来的模式可能将大量操作放在客户端,服务端只提供数据来源和其他客户端无法完成的操作;

5.测试驱动开发,angularjs一开始就以此为目标,使用angular开发的应用可以很容易地进行单元测试和端对端测试,这解决了传统的js代码难以测试和维护的缺陷

以上就是研究angularjs一段时间得出的结论,其中某些地方可能有所疏漏,没关系,接下来会展开其中某一点一步步去学习。

angularjs学习笔记1-angular总体简介及其特点的更多相关文章

  1. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  2. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  3. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

  4. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  5. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  6. AngularJs学习笔记--Guide教程系列文章索引

    在很久很久以前,一位前辈向我推荐AngularJs.但当时我没有好好学习,仅仅是讲文档浏览了一次.后来觉醒了……于是下定决心好好理解这系列的文档,并意译出来(英文水平不足……不能说是翻译,有些实在是看 ...

  7. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  8. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  9. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

  10. AngularJs学习笔记--unit-testing

    原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...

随机推荐

  1. Bzoj1822 [JSOI2010]Frozen Nova 冷冻波

    Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1933  Solved: 608 Description WJJ喜欢“魔兽争霸”这个游戏.在游戏中,巫妖 ...

  2. 【BZOJ】1774: [Usaco2009 Dec]Toll 过路费

    [题意]给定无向图,距离定义为边权和+最大点权,询问若干个两点最短距离.n<=250. [算法]排序+floyd [题解]考虑floyd的过程是每次找一个中转点,为了在当前找到一条新路径时方便地 ...

  3. [2009国家集训队]小Z的袜子(hose)(BZOJ2038+莫队入门题)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=2038 题目: 题意:中文题意,大家都懂. 思路:莫队入门题.不过由于要去概率,所以我们假 ...

  4. Python面向对象学习2(面向对象的语法和特性,待更新)

    上一个内容我们介绍了面向对象和面向对象场景现在我们来学习下语法和特性 1,面向对象基本语法: # -*- coding:utf-8 -*- # Author: Colin Yao class Dog( ...

  5. js刷新页面方法 -- (转)

    1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里 ...

  6. scikit-learn中的岭回归(Ridge Regression)与Lasso回归

    一.岭回归模型 岭回归其实就是在普通最小二乘法回归(ordinary least squares regression)的基础上,加入了正则化参数λ. 二.如何调用 class sklearn.lin ...

  7. Java面试基础知识1

    1.动态绑定是指在执行期间判断所引用对象的实际类型,根据其实际的类型调用其相应的方法. 2.在将超类转换为子类之前,应该使用instanceof进行检查. 3.包含一个或者多个抽象方法的类本身必须被声 ...

  8. 【Python学习笔记】Pandas库之DataFrame

    1 简介 DataFrame是Python中Pandas库中的一种数据结构,它类似excel,是一种二维表. 或许说它可能有点像matlab的矩阵,但是matlab的矩阵只能放数值型值(当然matla ...

  9. 【Python学习笔记】Coursera之PY4E学习笔记——File

    1.打开文件 使用handle=open(filename,mode)打开文件.这一函数将会返回一个handle(应该翻译为“柄”吧)用来操控文件,参数filename是一个字符串.参数mode是可选 ...

  10. $(document).ready 和 window.onload 的区别

    1.相同点 两者都用于在网页加载完后执行相应代码块. 2.不同点 window.onload 在创建完 DOM 树后,所有外部资源(图片.Flash 动画等)加载完成,且整个页面在浏览器窗口中显示完毕 ...