常用前端框架Angular和React的一些认识
为什么要用AngularJs?
要了解为什么使用AngularJS首先就要接受它的思想:
首先,angularJS借助了传统MVC的架构模式(model模型 view视图 controller控制器);通过控制器来改变视图,再由视图来改变数据模型;它在借鉴MVC的方法中用的很好,让我们使用起来很方便,它的架构模式与其说是传统的MVC,倒不如说是MVW(whatever 任意),也可以说是MVVM。
在我们使用了angularJS之后就不要再去使用jQuery了,因为angularJS不会存在一句对dom节点的操作。
angularJS的原理:
angular的实现机制是由其内部的三个对象来完成的:$watch,$digest,$apply
其中:
**$watch**:监听对象,所有绑定在页面上的数据和属性都会添加到监听对象
**$digest**:循环对象,负责逐一循环$watch对象,观察原来的值和现在的值有没有发生变化,如果发生变化就给变化的对象做个标记,再去循环,直至没有变化时将变化的节点渲染到页面上。但是由于可能存在无限循环,所有我们可以设置循环次数不超过10次,以避免循环次数过多影响性能下降。
**$apply**:配置angular的上下文环境
angular最大的缺点就是性能
###$scope
angular都是通过$scope来操作的
$rootScope父对象,他作用的范围是div范围外;下面可以加$scope子对象,他作用的范围是定义的那个div里的子作用域内
通过js代码来获取$scope对象
<div nag-controller="MainController">//可以内嵌nag-controller,
<p>{{name}}</p>
</div>
<script>
angular.module("mainApp",[])//没有引用也要写个中括号
mainApp.controller("MainController",function(必须写$scope)
{$scope.name="张飞"});//视图影响数据,单向绑定
</script>
在Angular中最好将Dom节点替换掉,利用数据绑定的方式来进行DOM操作
Angular优点:简化代码操作,比原生操作简单;
Angular缺点:我们在对性能要求高的时候,由于他会隐藏DOM操作,所以在我们需要手动操作DOM的时候就不适应,比如一些游戏;但做移动端、webApp/webPage这些都可以使用Angular
ng-repeat指令:重复;指令就不需要双花括号
Angular特性:1、双向绑定 2、模板 3、MVC
4、服务和依赖注入:被动的获取,声明式,不关心过程,只重视结果,被动获取可以把创造他的地方和使用的地方所分离开;但依赖注入的$scope名字不能乱写
5、指令:ng开头的,不仅仅是属性,也可以是标签,自定义指令后面要讲
6、过滤器
7、Ajax
8、表达式:{{}},可以在表达式里面进行算术运算、比较运算(返回布尔值),但不能调用函数
####过滤器
内置过滤器:
{{250 | currency}}//变成货币的样式
{{250 | currency:‘¥’}}//人民币的样式
内置九个过滤器:currency,data,,filter(匹配字符串),orderBy(排序):'age',(还有些我忘啦~)
$scope.now = new Date();
{{now | data:'yyyy/MM/dd HH:mm:ss'}} {{studes | filter:'刘'}}//可以做搜索用
{{stu in students | orderBy:'age'}}//将age升序显示,-age表示降序排列
####指令
内置指令:
1、样式指令
**ng-class**:用来给元素绑定指令
<style>.redText{color:red}</style>
<p ng-class="{redText:isRed}">hello!</p>
$scope = false/true;true就显示,false不显示
ng-show:显示true/false
ng-hide:隐藏
ng-style:样式,json格式{},也可以写在$scope里,然后引用 到ng-style="";
2、表单相关指令
下面这些都是通过数据影响视图的单向访问,页面上不能通过选择来改变数据;如果要双向就要通过ng-model
ng-checked:在checkbox和radio中值为true/false,可以表示是否选中;
ng-selected:在下拉框中true/false
ng-disabled:true表示不能选,false表示能选
ng-multi:表示多选
ng-readyonly:表示只读状态
注意:视图影响数据可以理解为在html里可以通过ng-model改变html里面标签的属性值
3、事件绑定相关指令
ng-click
ng-click="show()"
$scope.show = function(){}
ng-src指令也要写{{}}双花括号
img src="{{src}}"//但这种写法浏览器会报错,因为静态页面在最先加载的时候系统会请求路径,但请求不了;但图片会显示是因为在加载angular的文件的时候会显示;所以这种写法会影响性能
img ng-src = "{{src}}"//两种写法都会显示图片,这种写法浏览器在最先加载的时候不能识别,就不会请求后面的路径
$scope.src = ;
注意:为了避免用户在加载时有一闪一闪的效果,就将angular的文件发在</head>前面,大部分问题能解决,但如果网速慢的话还是会出现空白再显示的情况
##angularJS的自定义
自己了解啦~
angularJS的用处:
angularJS常用在webapp等单页应用
它的数据绑定都
常用前端框架Angular和React的一些认识的更多相关文章
- 前端框架Angular、react、vue在github上的数据统计-2018-05
2018年5月31日09:15:45 突然想看看几个前端框架的数量,然后就截图了如下数据: 分析: react关注.收藏.Fork都高vue一些, 但相差不大 angular比较奇葩,收藏只有二者一半 ...
- 常用的前端框架Angular、React、Vue
VUE 一.vue导读 1.1 vue的优点:结合其他框架点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式,组件化开发,单页面应用 1.2 vue环境的导入: 本地导入 <!--方法 ...
- SPA框架 Angular、React、Vue
指尖前端重构(React)技术调研分析 摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等. 一.为什么选择React React是当前前端应用最广泛的框架 ...
- 浅谈前端三大框架Angular、react、vue
每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 一.Angular,它两个版本都是强主张的,如果你用它,必 ...
- 前端框架 vue 和 react 的区别
前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...
- 最常用前端框架BootStrap——栅格系统
前 言 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mix ...
- 如何选择前端框架:ANGULAR VS EMBER VS REACT
最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...
- 2015前端各大框架比较(angular,vue,react,ant)
前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...
- 前端三大框架Angular & React & Vue
前端三大框架: Angular[Google]:一套框架,多种平台移动端 & 桌面端.学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web.移动 We ...
随机推荐
- windows下安装xgboost
Note that as of the most recent release the Microsoft Visual Studio instructions no longer seem to a ...
- [源码]String StringBuffer StringBudlider(1String部分)
String /** The value is used for character storage. */ private final char value[]; /** Th ...
- C# 系统错误日志处理类
编写软件,难免会有一些异常,针对异常我们在实际的开发中相比都有一些,捕获异常的处理办法.把软件运行错误信息写成一个 错误日志文件很有必要.当我们在客户那边安装调试时就会更加快捷的,知道错误在哪里.否则 ...
- 实现类似QQ对话聊天功能脚本
var skin : GUISkin; var showChat = false;private var inputField = "";private var display = ...
- GPUImage实现摄像头暂停
GPUImage相信很多开发者都用过,其本身也是十分简单易用,因此对于GPUImage的基本用法不再赘述. 最近在使用GPUImage时要实现摄像时暂停和继续的功能,但GPUImage本身并没有提供相 ...
- Ping出现TTL expired in transit的原因
今天上班检查服务器时发现出现TTL expired in transit的提示,这种提示还是第一次见,如图: ping 和 tracert 的结果 用tracert来看路由状况,原来是出现路由环路导致 ...
- Java获取本机ip和服务器ip
一.获取服务器IP InetAddress addr = InetAddress.getLocalHost().getHostAddress();//获得本机IP 二.获取客户端本机IP String ...
- JS数组push会覆盖前面的数据问题
这是一个作用域和重新赋值的问题. 检查声明数组所在位置,特别在是多层嵌套中,检查是否在内层循环结束时 跳到外层循环就重新将 数组 赋值为空.
- windows 下 gvim/vim lua支持问题,neocomplete等插件支持
此文是按照知乎 https://www.zhihu.com/question/29333426 "windows下vim的lua支持问题?" 一文汇总的解决方案. 题主提供了不错的 ...
- awk 命令
awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...