番茄酱带你入门angular

基础概念

首先我们先了解下 angular 的几个基本概念。MVC,双向数据绑定,依赖注入,指令。

MVC

时常听说 MVC 模式,在大学学习期间,也只知道是模型,视图,控制器的分离的,能让代码和业务更清晰。并没有真正的体会到 MVC 结构是如何让代码清晰的。Angular 的 MVC 模式开发,M 就是模型(model),模型又可以分为数据模型和业务模型等,最常用的就是数据模型,将和后端交互获取数据,以及对数据的处理,独立出来,(在我们的项目中是将数据处理放到 angular 的服务中),V 即 view 视图,向用户展示的内容,C 即控制器,项目的业务逻辑放在控制器中。

双向数据绑定

传统的框架,都是单向绑定,用户想要可以将获取到的数据绑定到视图,但在想在视图中改变数据,即用户在页面中的某些操作触发了数据变化,则不能将数据传递回数据模型

而 angular 框架,通过脏检测机制,检测数据数据是否变化,同步视图和模型中的数据。

依赖注入

库和框架的区别是啥,生动形象一点,库就可以比作是仓库,里面放满工具,你要啥,就自己去取,取调用即可。或则说是一个装满各种砖块的仓库,要建什么样的房子,需要什么样子的砖块,你自己取即可。

框架可以比作是已经建好地基搭好结构的房子,你可以在这个基础上,用已有的内容建造房子,也可以自己另辟蹊径,自己定义内容,来丰富你的房子

不知道自己比喻的清不清楚,总的来说就是。库定义了很多的方法,像 jq ,将 js 封装成易用的方法,比如要进行样式的修改,你只需要通过 .addClass() 的方法,就可以向对象添加你想要的样式。框架呢,除了定义很多的方法外,还定义了很多的组件,除了这些,你还可以按照框架的规则去自定义一些自己需要的组件,在 angular 中,定义了很多的指令,服务,以及过滤器供我们使用。

我们要使用 angular 就要在我们的项目中引入 angular.min.js 的文件,在这个文件引入的时候,angular 也仅仅是库,如果我们要使用 angular 所定义的内容,组件,就需要通过依赖注入的方式,进行angular 的启动引导,将项目中所需要的组件拼接到一起,将模块依赖注入应用

指令

指令可以理解在在特定 DOM 元素上运行的函数,指令可以扩展这个元素的功能

在项目运行中,angular 会通过内置的 $compile 服务,遍历项目元素中的所有指令,并获取元素上的所有指令,将指令放到执行队列中,依次执行指令中的 link 函数,并将所有的指令的 link 函数的执行结果放倒一个复合 link 函数中,将模版和$scope链接起来,形成动态数据绑定。

启动引导

angular 想要从库变为框架,就需要通过启用引导将所有的组件拼接到一起,并对项目注入所需要的依赖。启动引导又分为自动启动引导和手动启动引导

  1. 通过 ng-app 进行自动启动引导,定义ng-app 的元素即为应用的根,启动框架。如果项目中有多个 ng-app,则 angular 会找到项目的第一个 ng-app,进行项目的启动引导。

  2. 通过 angular.bootstrap(element, [modules], [config]); 进行项目的手动启动引导,bootstrap 函数的第一个参数element,是 angular ,要进行启动引导的根元素。第二个参数 modules ,即为需要依赖注入的模块。

    原文作者:白霸天
    原文地址: https://segmentfault.com/a/1190000004347220
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞