常用前端框架Angular和React的一些认识

时间：2023-03-10 03:03:25
常用前端框架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等单页应用

它的数据绑定都

相关文章