为什么要用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. 02-C#入门(枚举、结构等)

    不要为了写笔记而学习!!! 其实学完一章再返回复习,然后做笔记,真的很费时间(电子书还不方便).当然,复习带来的价值,是值得花时间的. 枚举.结构 枚举的类型有限(short.byte...)且是相同 ...

  2. Google App Engine, Python2.7的UnicodeDecodeError bug

    在跟Web Development,要在Google App Engine上写作业,出师不利,遇到以下bug: 2014-05-06 16:14:17 Running command: "[ ...

  3. Objective-C之run loop详解[转]

    做了一年多的IOS开发,对IOS和Objective-C深层次的了解还十分有限,大多还停留在会用API的级别,这是件挺可悲的事情.想学好一门语言还是需要深层次的了解它,这样才能在使用的时候得心应手,出 ...

  4. php使用ajax导出CSV或者EXCEl(thinkphp)方法

    首先我强烈推荐看到这篇文章的你将导出文件设置为csv格式的文件 实际测试导出csv文件的速度是excel文件的10几倍左右 首先我先介绍csv文件的导出的方法: 如果你单纯是在数据导出界面上通过用户点 ...

  5. Swift 3 中的访问控制 open public internal fileprivate private

    Swift 3必看:新的访问控制fileprivate和open http://www.jianshu.com/p/604305a61e57 浅谈 Swift 3 中的访问控制 https://mai ...

  6. 超牛的VS菜单

    所有菜单都重复了,Google到了解决办法:devenv /resetuserdata 但好不容易装好额ReSharper又不见了

  7. MapReduce工作原理讲解

    第一部分:MapReduce工作原理 MapReduce 角色•Client :作业提交发起者.•JobTracker: 初始化作业,分配作业,与TaskTracker通信,协调整个作业.•TaskT ...

  8. nodejs+express+jade配置

    安装步骤 一.首先可跟着这个网址安装http://jingyan.baidu.com/article/91f5db1b2bb6941c7f05e33c.html,路径可由自己定. 二.同时参考http ...

  9. js点击打开一个固定宽高的网页

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. 第六百一十七天 how can I 坚持

    没什么特长,唯一有的仅是妄想,哈哈,真逗. 明天就去新项目组了,会接触些新东西吧,啊,挺好,一开始压力大点很正常,但不要放弃啊. 搞不懂我自己啊,貌似不上火了呢. 睡觉了.忘不掉.做不到.