angular学习笔记

时隔一年之后重新学习angularJS,感慨良多。

去年刚刚接触web编程的时候,朋友告诉我angularJS很好用,于是在仅仅了解HTML和css开始学习angularJS,困难程度可想而之,而且并不明白其价值,武断的认为通过服务端可以不需要angular之类的工具解决所有问题。一年之后,对js的语法相对熟悉,尝试过自己写一个网站之后,不但非常快速的掌握了angularJS的大致内容,而且明白angular的价值。由此也可以说明只有在大量的实践之后,自身抽象问题的能力才会提高。

angularJS提出了一些概念:模块(module),服务(service),controllor,routeProvider,filter等概念。那么每个概念是什么意思呢?概念之间又有什么关系呢?

module可以理解成一个完整的程序,它有属于自己的controllor,routeProvider,filter,依赖的service和module等。

service可以理解成一个全局的库函数,可以自定义,angularJS可以自动寻找依赖。很多时候通过$http或者封装$http服务向后台请求数据。

controllor可以用来操作数据,由用户自己定义。

routeProvider和django中的urlpattens做了相同的工作,即根据http请求的不同函数向用户展示不同的页面。

filter可以用来筛选一些数据,和字面意思一样。

通常,我们自定义一个自己的模块,通过routeProvider定义每一个请求所对应的页面的模版和controllor,每一个controllor为了减少代码重复,使逻辑更清楚,可以选择性使用service。在需要对数据做过滤的时候使用filter,这样大致构成了一个简单的基于angular的应用。

angular的好处:

对于用户来说,抽象程度很高,实现了数据的双向绑定又屏蔽了繁杂的DOM操作,在页面业务逻辑简单的情况下,开发及其及其简单。

angular的不足:

封装了原生的DOM接口,可能会引起渲染效率的下降。

其余值得思考的问题:

routeProvider所做的工作在服务端完成还是在客户端完成合适?(目前思路是需要测试一定情况下两者效率的差距,如果效率相差不大,我倾向于在客户端完成这项工作)。

时间: 2024-12-14 05:46:51

angular学习笔记的相关文章

angular学习笔记(八)

本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素 ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素 (其实只要用到其中一个就可以了) 下面来看个简单的例子,点击按钮可以显示/隐藏元素: <!DOCTYPE html> <html ng-app> <head> <title>

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource

angular学习笔记(五)-阶乘计算实例(1)

<!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </

angular学习笔记(二十三)-$http(1)-api

之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: config的格式如下: { method:字符串 , url:字符串, params:json对象, data:请求数据, headers:请求头, transformRequest:函数,转换post请求的数据的格式, transformResponse:函数,转换响应到的数据的格式, cache:布尔

angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要的功能有: 可以通过id来获取用户123的指定id的卡     'GET'  'card/user/123/id' 可以获取用户123的所有的银行卡             'GET'  'card/user/123' 可以更新用户123的指定id的卡                'POST' '

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <title>6.3css类和样式</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="scri

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框. 错误框的类名是.err,警告框的类名是.warn: <!DOCTYPE html> <html ng-app> <head> <title>6.2css类和样式</title> <

angular学习笔记(一)

入门实例: 一个购物车产品清单,可以自行改变数量,总价自动计算的小例子: 代码如下: <!DOCTYPE html> <html ng-app> <head> <title>1.1实例:购物车</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="

angular学习笔记(二十六)-$http(4)-设置请求超时

本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错误 demo: html: <!DOCTYPE html> <html ng-app = 'HttpGet'> <head> <title>18.4 $http(2)</title> <meta charset="utf-8"

angular学习笔记(十九)

本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule = angular.module('SomeModule',[]); someModule.directive('directiveName',function(){ return { link: f