angularjs 学习笔记 简单基础

Posted 2020-08-21

angularjs是谷歌公司的一个项目，弥补了hml在构建方面的不足，通过指令（directive）来扩展html标签，可以使开发者使用html来声明动态内容。

angularjs主要用来开发单页应用（SPA）为主的项目。

angularjs四个主要特点：1.mvc模式 2.双向数据绑定 3.模块化 4.指令系统

为了使用Angular，所有应用都必须首先做两件事情

1. 下载加载 angular.js 库 

2. 使用ng-app 指令告诉 angular 应该管理DOM中的哪一些部分。

angular 中一些常用指令：

ng-app：网页中的根元素，

ng-init：初始化数据；

ng-bind：绑定数据；

ng-show：显示；

ng-hide：隐藏数据；

ng-class：控制class

ng-click：绑定点击事件；

ng-disabled：禁用事件；

ng-model：绑定html中的数据；

ng-repeat：循环数据；

1. Angularjs  MVC

 

Model：数据模型层

View：视图层，负责展示

Controller：业务逻辑和控制逻辑

优点: 代码模块化 代码逻辑比较清晰、可移值性高，后期维护方便、代码复用，代码规模越来越大的时候，切分职责是大势所趋

缺点：运行效率稍微低一些

  

$scope 控制作用域；$rootscope：根作用域，全局作用域；

 

1. Angularjs $scope里面的$apply方法

 

$apply方法作用：

Scope提供$apply方法传播Model的变化

 

$apply方法使用情景：

AngularJS外部的控制器（DOM事件、外部的回调函数如jQuery UI空间等）调用了AngularJS函数之后，必须调用$apply。在这种情况下，你需要命令AngularJS刷新自已（模型、视图等），$apply就是用来做这件事情的。

 

$apply方法注意事项：

只要可以，请把要执行的代码和函数传递给$apply去执行，而不要自已执行那些函数然后再调用$apply。例如，你应该像下面这样来执行你的代码：

 

$scope.$apply(function() {

 $scope.variable1 = ‘some value‘;

executeSomeAction();

});

 

 

2. Angularjs $scope里面的$watch方法

 

$watch方法作用：

 

$watch方法监视Model的变化。