为什么要用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的一些认识的更多相关文章

  1. 前端框架Angular、react、vue在github上的数据统计-2018-05

    2018年5月31日09:15:45 突然想看看几个前端框架的数量,然后就截图了如下数据: 分析: react关注.收藏.Fork都高vue一些, 但相差不大 angular比较奇葩,收藏只有二者一半 ...

  2. 常用的前端框架Angular、React、Vue

    VUE 一.vue导读 1.1 vue的优点:结合其他框架点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式,组件化开发,单页面应用 1.2 vue环境的导入: 本地导入 <!--方法 ...

  3. SPA框架 Angular、React、Vue

    指尖前端重构(React)技术调研分析   摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等. 一.为什么选择React React是当前前端应用最广泛的框架 ...

  4. 浅谈前端三大框架Angular、react、vue

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 一.Angular,它两个版本都是强主张的,如果你用它,必 ...

  5. 前端框架 vue 和 react 的区别

    前言:最近需要使用 react,以前用过 vue,故来总结两者的区别. 首先React与vue有几点相同之处 1.都使用了Virtual DOM 2.提供了响应式(Reactive)和组件化(Comp ...

  6. 最常用前端框架BootStrap——栅格系统

      前  言   Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mix ...

  7. 如何选择前端框架:ANGULAR VS EMBER VS REACT

    最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发 ...

  8. 2015前端各大框架比较(angular,vue,react,ant)

    前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...

  9. 前端三大框架Angular & React & Vue

    前端三大框架: Angular[Google]:一套框架,多种平台移动端 & 桌面端.学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web.移动 We ...

随机推荐

  1. windows下安装xgboost

    Note that as of the most recent release the Microsoft Visual Studio instructions no longer seem to a ...

  2. [源码]String StringBuffer StringBudlider(1String部分)

      String     /** The value is used for character storage. */     private final char value[];  /** Th ...

  3. C# 系统错误日志处理类

    编写软件,难免会有一些异常,针对异常我们在实际的开发中相比都有一些,捕获异常的处理办法.把软件运行错误信息写成一个 错误日志文件很有必要.当我们在客户那边安装调试时就会更加快捷的,知道错误在哪里.否则 ...

  4. 实现类似QQ对话聊天功能脚本

    var skin : GUISkin; var showChat = false;private var inputField = "";private var display = ...

  5. GPUImage实现摄像头暂停

    GPUImage相信很多开发者都用过,其本身也是十分简单易用,因此对于GPUImage的基本用法不再赘述. 最近在使用GPUImage时要实现摄像时暂停和继续的功能,但GPUImage本身并没有提供相 ...

  6. Ping出现TTL expired in transit的原因

    今天上班检查服务器时发现出现TTL expired in transit的提示,这种提示还是第一次见,如图: ping 和 tracert 的结果 用tracert来看路由状况,原来是出现路由环路导致 ...

  7. Java获取本机ip和服务器ip

    一.获取服务器IP InetAddress addr = InetAddress.getLocalHost().getHostAddress();//获得本机IP 二.获取客户端本机IP String ...

  8. JS数组push会覆盖前面的数据问题

    这是一个作用域和重新赋值的问题. 检查声明数组所在位置,特别在是多层嵌套中,检查是否在内层循环结束时 跳到外层循环就重新将 数组 赋值为空.

  9. windows 下 gvim/vim lua支持问题,neocomplete等插件支持

    此文是按照知乎 https://www.zhihu.com/question/29333426 "windows下vim的lua支持问题?" 一文汇总的解决方案. 题主提供了不错的 ...

  10. awk 命令

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...