一直用惯jquery,初用Angularjs的初段时间,需要先了解一下她的类MVC思想。

初学时几个比较基本的概念:

1.客户端模板

2. Model View Controller (MVC)

3. 数据绑定

4.依赖注入和指令等(有相当多的学习内容)

一般的web页面,我们比较通常的做法是:

1.在服务器端把Html和数据装配并混合起来,然后把生产的完整的Html页面发送到浏览器端

2.ajax应用中几乎也是做同样的事情。我们最经常做的一个动作,大概就是在获取到数据之后开始拼凑html.然后填充到页面上。

Angularjs:数据和模板(可以理解为要呈现的Html样式)是分开的,服务器会把这两个东西发送到浏览器,然后他们自己在客户端进行装配。

两者相比:

1.html里的class或者ID(事件写法)

2.注意$scope.

MVC

核心理念:我们应该把管理数据的代码(model)、应用逻辑层代码(controller)、向用户展示数据的代码(view)清晰地分开。三者互动关系如下:

1. 视图从模型中获取数据,展示给用户。

2. 控制器修改模型中的数据。(鼠标点击或者键盘输入)

3.模型通知视图数据已经发生了改变,视图刷新。

Ajs中:视图就是我们的DOM,控制器就是Javascript类,模型数据则存储在对象中。(数据绑定语法)

mvc思想个人感受:

论模型的重要性:个人觉得这大概是在使用ajs和jquery中体验到的最大的区别。 jquery中是没有这一层的,因为他的数据都是直接去找html元素的,然后绑定上去,这也是我们为什么需要大量id的原因。jquery是强依赖页面元素的,展示的时候需要找到去找页面元素绑定,提交的时候需要去遍历页面元素来获取当前的交互结果,然后更新到服务器。

而ajs 是模型驱动的。视图中展现的是模型,被存储起来的内容是模型,几乎所有的一切都是模型。应用开发之前,最需要花时间应该是思考一下你的模型结构,你的模型 中的属性是什么内容,怎么绑定到页面上,视图是根据模型自动刷新的,所以模型是你应用中的焦点。其实和我们平时定义面向对象里面的类的做法很相似。

控制器负责业务逻辑:在模型上可以执行什么样的操作、视图需要模型上哪些信息,如何转换模型以获取想要的信息,表单校验任务等等,这些事情都是由控制器负责的。

模板:代表的是展现形式,例如:过滤来格式化数据、给应用提供样式,并且判断何时以及怎么样展示一些原始(显示还是隐藏?鼠标划过时效果)

其他相关概念的提及:服务,路由等等。

AngularJS 初用总结的更多相关文章

  1. angularJs初体验,实现双向数据绑定!使用体会:比较爽

    使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...

  2. AngularJS 初印象------对比 Asp.net MVC

    之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone.但未曾了解,也不解为什么前端也要这么分.这两天看了AngularJs的官方教 ...

  3. AngularJS初体验

    最近突然发现,Coding.net真是一个神奇的网站.这各网站90%的请求都是通过ajax完成的.可以发现,不管你点任何链接,网页都不会刷新,点击浏览器的返回或前进按钮也是这样,打开chrome的开发 ...

  4. MVC + AngularJS 初体验(实现表单操作)

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

  5. AngularJS初接触

    todo.json [ { "action": "Buy Flowers", "done": false }, { "action ...

  6. AngularJS and Asp.net MVC

    AngularJS 初印象------对比 Asp.net MVC 之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone.但未曾了 ...

  7. bootstrap-paginator 分页插件笔记

    [MVC]bootstrap-paginator 分页插件笔记   bootstrap-paginator基于bootstrap框架,使用起来非常简单.官网:http://harttle.github ...

  8. AngularJS路由系列(3)-- UI-Router初体验

    本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...

  9. day21—AngularJS学习初体验

    转行学开发,代码100天——2018-04-06 今天按照学习计划安排,开始AngularJS的学习. 关于AngularJS,在菜鸟教程上这样介绍 好吧,Angular学习起来非常简单,哈哈,现在就 ...

随机推荐

  1. 文件上传---普通文件fileupload.jar和url文件httpUrlConnection

    文件上传---普通文件和url文件 主要用来学习使用common-fileupload.jar和java.net.httpURLConnection 普通文件: //上传xls文件到临时目录 if ( ...

  2. VS2012使用Git并连接到osc@git

    1.下载GitExtensions并安装 在http://sourceforge.net/projects/gitextensions/files/latest/download 下载 安装时请注意 ...

  3. 浅谈 underscore 内部方法 group 的设计原理

    前言 真是天一热什么事都不想干,这个月只产出了一篇文章,赶紧写一篇压压惊! 前文(https://github.com/hanzichi/underscore-analysis/issues/15)说 ...

  4. javascript数据类型判断

    javascript基本数据类型:原始类型  和  引用类型 原始类型(简单数据类型):String,Number,Boolean,Undefined,Null,Symbol(ES6新增) 引用类型( ...

  5. 【JavaScript】操作Canvas画图

    1.页面添加 Canvas 标签 标签内可以写文字,浏览器不支持Canvas的情况下显示, 2.js获取 Canvas 标签 3.利用js函数画图,[线][图][文字] 源:http://www.li ...

  6. Matlab2015基本语句语法04

    1. 输入.输出.格式化输出 1) 读入数据:input >>number: num=input('Give me your number: '); >>string: str ...

  7. 【Alpha】十天屠龙记

    团队名字: 一不小心就火了 屠龙天团少年们: 031402504 陈逸超 (组长) 031402505 陈少铭 031402511 黄家俊 031402515 翁祖航 031402516 黄瑞钰 03 ...

  8. 响应式疑惑? CSS单位研究

    各种单位要搞清楚,自己试一试,实践出真知! 2.屏幕分辨率    响应式 哦,电脑的分辨率:1440x900表示水平有1440个像素点哦! 垂直有900个像素点. 而网页在浏览器中,所以宽度是电脑的分 ...

  9. iOS地图 -- 定位中的CLLocation的介绍与小练习

    通过定位练习,熟悉CLLocation 在上篇笔记中提到了CLLocation类,这里通过练习来讲解一下这个类,类中包含了获取到的用户位置的信息 coordinate --> 坐标,经度和纬度 ...

  10. ES6新特性:Javascript中内置的延迟对象Promise

    Promise的基本使用: 利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程: 通过new实例化Promise,  构造函数需要两个参数, 第一个参数为函 ...