AngularJS 初用总结
一直用惯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 初用总结的更多相关文章
- angularJs初体验,实现双向数据绑定!使用体会:比较爽
使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model= ...
- AngularJS 初印象------对比 Asp.net MVC
之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone.但未曾了解,也不解为什么前端也要这么分.这两天看了AngularJs的官方教 ...
- AngularJS初体验
最近突然发现,Coding.net真是一个神奇的网站.这各网站90%的请求都是通过ajax完成的.可以发现,不管你点任何链接,网页都不会刷新,点击浏览器的返回或前进按钮也是这样,打开chrome的开发 ...
- MVC + AngularJS 初体验(实现表单操作)
AngularJS AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序(SPAs:Single Page Applications). Ang ...
- AngularJS初接触
todo.json [ { "action": "Buy Flowers", "done": false }, { "action ...
- AngularJS and Asp.net MVC
AngularJS 初印象------对比 Asp.net MVC 之前就早耳闻前端MVC的一些框架,微软自家的Knockout.js,google家的AngularJs,还有Backone.但未曾了 ...
- bootstrap-paginator 分页插件笔记
[MVC]bootstrap-paginator 分页插件笔记 bootstrap-paginator基于bootstrap框架,使用起来非常简单.官网:http://harttle.github ...
- AngularJS路由系列(3)-- UI-Router初体验
本系列探寻AngularJS的路由机制,在WebStorm下开发. AngularJS路由系列包括: 1.AngularJS路由系列(1)--基本路由配置2.AngularJS路由系列(2)--刷新. ...
- day21—AngularJS学习初体验
转行学开发,代码100天——2018-04-06 今天按照学习计划安排,开始AngularJS的学习. 关于AngularJS,在菜鸟教程上这样介绍 好吧,Angular学习起来非常简单,哈哈,现在就 ...
随机推荐
- 物联网平台设计心得:你所不知道的CRC校验
在物联网平台设计过程中,我的中间件一方面需要处理来自于硬件端的包,另一方面需要处理来自于用户端的包,用户端包括web端和手机端等等.所以编写一个统一的CRC认证是非常必须要. 那么,在设计开始,CRC ...
- linux下,Python 多版本共存,及Pip,Easy_install 安装扩展包
Python2与Python3共存 安装Python3后,建立ln,使用Python(Python2),Python3 来区分两个版本 使用sudo apt-get install python3-s ...
- 大流量网站性能优化:一步一步打造一个适合自己的BigRender插件
BigRender 当一个网站越来越庞大,加载速度越来越慢的时候,开发者们不得不对其进行优化,谁愿意访问一个需要等待 10 秒,20 秒才能出现的网页呢? 常见的也是相对简单易行的一个优化方案是 图片 ...
- 软件工程(FZU2015)助教总结
本次构建之法-SE助教工作,和福州大学张老师协作,福大学生基本发挥出了一定水平,在此做个小结. 教师 张老师本身的SE教学经验足够丰富,对教学工作中的教师.助教.学生的角色定位清晰,整体节奏和安排合理 ...
- c# 集合
集合适用于元素个数是动态的情况. 当使用默认的构造函数创建一个空列表后(未指定容量),集合的容量为0:当往集合内添加元素,容量将变为4*2^n(n为0或正整数).当指定集合的大小为size后,容量将变 ...
- [转]win 10 开始菜单(Win 7风格)增强工具 StartIsBack++ v1.3.4 简体中文特别版
Windows10开始菜单增强工具StartIsBack++现已更新至v1.3.4,最近主要修复在Win10周年更新版上恢复睡眠后任务栏通知中心按钮消失的问题.升级版对StartIsBack+全新构建 ...
- Internet Download Manager 6.27.1 中文特别版(IDM)
软件介绍: 软件名称:Internet Download Manager(IDM) 软件大小:5.09M软件语言:简体中文 软件官网:http://www.internetdownloadmanage ...
- Asp.Net MVC中Action跳转小结
首先我觉得action的跳转大致可以这样归一下类,跳转到同一控制器内的action和不同控制器内的action.带有参数的action跳转和不带参数的action跳转. 一.RedirectToAct ...
- Sublime Text 中文乱码
STEP1: 安装package control tool 先设置好fq,系统代理设置为fq代理 按Crtl + ~调出控制台,输入如下代码: import urllib2,os; pf='Packa ...
- 文本框 textarea 动态显示行数(简单文本编辑器)
工作需求做一个文本编辑器简单的. 右边输入文字,左边会显示相应的代码行.清空也会变为1. 废话不多说上代码,自己理解. <style type="text/css"> ...