angular学习笔记

最新推荐文章于 2025-02-05 11:13:10 发布

shjavadown

最新推荐文章于 2025-02-05 11:13:10 发布

阅读量547

点赞数 1

今天开始正式学习angularJS了跟着大神的步伐一步步的，不过呢笔记还是要记的，加深印象，还可以回看

AngularJS有五个主要核心特性，如下介绍：

双向数据绑定 —— 实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。
模板 —— 在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。
MVVM —— 吸收了传统的MVC设计模式但又不是传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。
依赖注入 —— AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。
指令 —— 可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。

为什么要用angular

前后端分离，后端只提供数据接口，路由，模板渲染等都在前端完成
html和js分离,展示和逻辑分离
减少JS代码,减少DOM元素查找，事件绑定等代码
适合API开发

AngularJS应用引导过程有3个重要点：

注入器(injector)将用于创建此应用程序的依赖注入(dependency injection)；
注入器将会创建根作用域作为我们应用模型的范围；
AngularJS将会链接根作用域中的DOM，从用ngApp标记的HTML标签开始，逐步处理DOM中指令和绑定。
一旦AngularJS应用引导完毕，它将继续侦听浏览器的HTML触发事件，如鼠标点击事件、按键事件、HTTP传入响应等改变DOM模型的事件。这类事件一旦发生，AngularJS将会自动检测变化，并作出相应的处理及更新。

Angular.js应用的动态性和响应能力，都要归功于指令属性，常见的有：ng-app、ng-init、ng-model、ng-bind、ng-repeat等等。

ng-model原理

angular加载完成之后会启动，首先找 ng-app指令
找到后认为ng-app里面的所有的内容都归angular来管
找子层标签里所有的指令，然后就可以找到ng-model
找到后会生成数据模型，然后挂在根作用域上面。
然后下面所有的标签都可以读取ng-model的值。

使用MVVM模式有几大好处：

低耦合：View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
可重用性：可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。
独立开发：开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。
可测试性：可以针对ViewModel来对界面(View)进行测试。

angular.module()创建、获取、注册angular中的模块

// 传递参数不止一个,代表新建模块;空数组代表该模块不依赖其他模块
var createModule = angular.module("myModule", []);

// 只有一个参数(模块名),代表获取模块
// 如果模块不存在,angular框架会抛异常
var getModule = angular.module("myModule");

该函数既可以创建新的模块，也可以获取已有模块，是创建还是获取，通过参数的个数来区分。

angular.module(name, [requires], [configFn]);

- name：字符串类型，代表模块的名称；
- requires：字符串的数组，代表该模块依赖的其他模块列表，如果不依赖其他模块，用空数组即可；
- configFn：用来对该模块进行一些配置。

现在我们知道如何创建、获取模块了，那么模块究竟是什么呢？
官方的Developer Guide上只有一句话：You can think of a module as a container for the different parts of your app – controllers, services, filters, directives, etc.
模块是一些功能的集合，如控制器、服务、过滤器、指令等子元素组成的整体。

控制器

不要试图去复用controller,一个控制器一般只负责一小块视图
不要在controller中操作DOM，这不是控制器的职责，是指令的职责。
不要在controller里做数据格式化，ng有很好用的过滤器实现此功能。
不要在controller里面做数据过滤操作，ng有$filter服务
一般来说，controller是不会互相调用的，控制器这间的交互是通过事件进行的。

scope特点

$scope 是一个 POJO （Plain Ordinary Java Object）简单的Java对象
$scope 提供了一些工具方法$watch/$apply()
$scope 是表达式的执行环境，或者说叫作用域
$scope 是一个树型结构，与DOM标签平行
每一个angular应用都有一个根作用域 $rootScope, 位于ng-app上
$scope可以传播事件，类似DOM事件，可以向上下可以向下
$scope不仅是MVC的基础，也是后面实现双向数据绑定的基础,应用开始先找rootScope,然后把下级scope附加到rootScope上从而形成树型结构。