常用前端框架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 ...
随机推荐
- Mybatis 批量更新 ORA-00911: 无效字符的错误
使用<foreach></foreach> 批量insert时报错 ORA-00911: 无效字符的错误 <foreach collection="list&q ...
- c++指针与引用问题
本来是回答问题的,到这里做个笔记 *&L是指针的引用,实参是个指针.所以L是实参指针的别名,对别名L的修改,等于对实参的修改.*L是传值,你无法改变传过来的实参指针变量的值程序代码: #inc ...
- 创建一个List获取数据的lookup
第一步,在类:syslookup中新建方法 public static client void lookupList(FormStringControl _formStringControl, Lis ...
- 调用 SSPI 失败,请参见内部异常。接收到的消息异常,或格式不正确。
完整异常信息: System.Security.Authentication.AuthenticationException: 调用 SSPI 失败,请参见内部异常. ---> System.C ...
- jquery如何在异步方式中给全局变量赋值
定义一个全局全量,例如:var i=0;然后调用jquery的一个函数 $.get(url, function(data) {i=9;})alert(i);得到的是0而不是9. var i=0; ...
- 【练习】oracel获取当前session的id方法
1. :: SYS; SID ---------- 2. :: SYS@ORA11GR2>SELECT USERENV('SID') FROM DUAL; USERENV('SID') ---- ...
- PgSQL dump 工具
#!/bin/bash #Auther Sun Ying ##Copy left ##Version: Demo Version ##Basic Compare the datebase change ...
- temp_web
使用vs2010创建.发布.部署.调用 WebService http://blog.sina.com.cn/s/blog_45eaa01a0102vp8z.html c#简易Http服务器 http ...
- java学习第12天
今天主要是看下正则表达式,其实在编译原理中就接触过.正则表达式就是符合一定规则的字符串. A:字符 x 字符 x.举例:'a'表示字符a \\ 反斜线字符. \n 新行(换行)符 ('\u000A') ...
- webstorm安装后的一些设置技巧:
如何更改主题(字体&配色):File -> settings -> Editor -> colors&fonts -> scheme name.主题下载地址 如 ...