正文

  “Angular”很多人都知道前端很火的框架，有很多的优点，此次参与的项目前端也使用的angular，所以最近正在学习中。下面就简单介绍一下angular，以及开发angular程序前要做的准备工作！

**简介**

1.是什么？
  Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。

2.架构
  首先付一张在视频中看到的关于angular程序架构图，然后对angular程序架构有个大概了解。

  ◇大的架构：用户user和应用APP作交互，angular本身是一个客户端框架，开发出来的都是客户端程序，客户端程序需要与服务器做交互，从服务器获取数据传递数据，


  ◇◇app应用：angular的应用至少包含一个模块NgModule和一个组件component（PS：组件之间可以有父子关系，组件可以调用服务，服务也可以调服务，就是服务之间也可以互相调用）
  ◇◇指令：也是angular的重要组成部分，允许你向HTML元素添加自定义行为，比如可以写一个自动完成的指令，把这个指令写到input标签上，这个标签就会有自动完成的功能，angular框架内置了大量的指令来帮助我们解决日常开发的问题

  ◇◇模块：可以把指令、组件、服务看成积木中的小块，模块是一个一个的塑料袋，这些小块可以组成一个小汽车，把这些小块放进一个袋子里，那些小块可以组成一个轮船放在另外一个袋子里


3.使用——职责
  组件、服务、指令是用来完成功能的，模块是用来打包分发这些功能的
  对于程序来说，如果四个组件、两个服务、加上某个指令能放在一起可以提供一个功能，如登录功能，就会把这些组件服务指令放在登录模块里。如果开发下一个程序也需要登录，可以把登录模块引入这个项目中即可

**Angular目录结构**

1、浅层目录结构

e2e：端到端的测试目录，用于自动测试


node-modules：存放第三方依赖包


src：应用程序源码目录


angular-cli.json：angular命令行工具的配置文件，如果额外引了第三方依赖包，配置文件会被修改


karma.conf.js：karma是单元测试的执行器，karma.conf.js是karma的配置文件


package.json：标准的npm工具的配置文件，文件里列出了该应用程序所使用的第三方依赖包


protractor.conf.js：自动测试的配置文件


README.md：说明文件


tslint.joso：tslint的配置文件，用于定义typescript

2、深层src目录

app：应用的组件和模块


assets：静态资源目录，可以存放图片等


environments：环境配置（如：开发环境、测试环境、生产环境）


index.html：整个应用的根HTML，是程序启动访问的页面


main.ts：整个项目的入口点，angular通过这个启动项目

**Angular应用启动**

  嘿嘿，小菜要抛问题了！刚接触angular时，有没有疑惑编写完应用程序如何启动呢？启动时加载哪个页面？加载哪些脚本？脚本又需要做什么事呢？


◆启动加载的页面？
  默认情况下src下的index.html是angular应用时启动加载的页面
◆启动加载的脚本？
  src下的main.ts文件是angular应用时启动加载的脚本，负责引导angular应用启动

**Angular与jquery的比较**

◇jquery
  jquery需要操作页面上的道路，假如要显示一个业务卡片时，首先需要拿到这一列卡片外边的一个父节点的dom节点，然后生成html插入到里面去，这是在操作页面元素
◇Angular
  在angular中：则不需要做dom操作，需要做的就是在后台声明一些包含数据的属性，然后把模版和数据绑定起来，然后根据你的数据变化来呈现相应的页面

小结

  博文被覆盖，正在更新中