认识angular

angular的优缺点

angular的优点

• 模板功能强大丰富
• 比较完善的MVC的框架
• 引入了java的概念

angular的缺点

• 性能
  • 双向的数据绑定的缺点，
• 路由（核心模块）
• 作用域（非常重要）
• 表单验证
• javascript语言
• 学习成本

angular的新特性

• 全新的命令行工具AngularCli
• 服务期端的渲染
• 移动端和桌面的兼容

angular与react相比

• 速度
• FLUX架构
• 服务器渲染

angular 与 Vue的相比

• 简单

• 灵活

• 性能

• vue 的缺点

  • 个人主导
  • 只关注web
  • 服务器端渲染

学习angular

angular的程序架构

• 组件：是angular的基本1构建块，你可以把一个组件理解为带有业务逻辑和数据的HTML
• 指令：允许你向HTML元素添加自定义行为
• 服务：用来封装可重复使用的业务逻辑
• 模块：用来将应用中不同的部分组成一个angular框架可以理解的单元（用来打包和构建的）

搭建angular的开发环境

• 安装node

• 安装angularCLI

• 目录的结构说明

• e2e 端到端的测试目录 作用：做自动测试的

• src 源代码目录 作用：我们写的源代码应该都写在src得目录中

  • app应用的组件和模块
  • assets 存放静态资源
  • environments 环境配置 作用：环境分为开发环境和生产环境，环境的配置分别写入在不同的文件中
  • index.html 网站的根html body中包含着一个app-root标签
    -main.js 是整个web的入口点，也是执行的入口点，angular通过这个main.js执行整个项目
  • polyfills.js 导入兼容性的库 作用：让angular能够执行老版本的angular的项目等
  • style.css(.less/.sass) 设置全局的样式
  • test.ts 测试用的配置
  • tsconfig.json 是typescript的配置

• angular-cli.json angular的命令行配置文件 作用：可以用来引入第三方的包和Bootstrap

• karma.config.js

  • 作用：执行自动化测试的

• package.json npm的配置文件

  • 作用：当前cli所使用的第三方依赖的包

• node_modules 下载的依赖包 webpage.json下载的依赖包，全部都放在这里

• REAME.md 如何使用angular

• tslint.json ts的配置，用于检验ts的校验

组件(Component)的组成

• 必备元素（@Component()、template、Controller）
• 可选可注入的对象（@inputs()、providers）
• 可选的输出对象（Lifecyle Hooks styles Animations @Outputs）

装饰器（Component()）

• 作用：告诉编辑器如何处理一个typescript的类，包含多个属性，这些的值叫做源数据，根据源数据的值渲染主件，然后执行的源数据的操作
• 说明：装饰器的全称为 组件源数据装饰器

模板(template)

• 作用：定义组件的外观
• 说明：模板的外观类似html，但是可以通过angular的语法将控制器上的数据，显示在模板上

控制器(Controller)

• 作用：typescript的类
• 说明：就是一个普通的typescript的类，通过Component()进行装饰，控制器上包含组件所有的属性和方法，页面中的事件逻辑都是写在这个控制器中的，控制器通过数据绑定与模板进行通讯，模板展现控制器的数据，控制器处理页面中的事件操作（点击，提交，输入内容等）

输入属性 （@inputs()）

• 作用：可以实现父组件传递参数给子组件
• 说明：用来接收用户输入的数据

提供器（provides）

• 作用：用来做依赖注入的
• 说明：

生命周期钩子（Lifecyle Hooks）

• 作用：用来做依赖注入的
• 说明：

样式表（styles）

• 作用：提供组件专用的样式（可选）
• 说明：

动画（animations）

• 作用：angular提供的动画的效果
• 说明：

输出属性（@Outputs）

• 作用：用来定义其他的组件可能修改数据的方法，用来在组件间共享数据
• 说明：

创建一个组件

• 创建一个组件

// 导入装饰器
import { Component } from '@angular/core';

// 使用装饰器 定义了一个组件
@Component({
  selector: 'app-root',
  // templateUrl 模板的位置  component.html 模板对应的文件
  templateUrl: './app.component.html',
  // styleUrls 这个模板中需要用的样式
  styleUrls: ['./app.component.less']
})

// 所有的组件都必须用一个component来进行分包裹
// 装饰器的属性叫做源数据
// 将源数据使用装饰器进行包裹，就能把源数据添加到AppComponent上
// 源数据的作用：告诉angular如何解析这个组件


// 导出 AppComponent
// 定义了一个控制器 AppComponent
export class AppComponent {
  title = 'auction';
}

模块

• @NgModule 是模块的的装饰器
  • declarations:[
    组件
    ]
    • 注意点：在这个源数据中只能声明组件、管道、指令
  • imports 导入依赖项
  • providers 用来模块提供的服务 只能声明服务
  • bootsrap 声明主组件