Angular上手环节

Angular环境搭建

• Ts
• npm:Nodejs的包管理器 -搭建一个CLI命令行环境

Angular-CLI安装配置

npm i -g @angular/cli ng version 确认版本号 ng --help 确认工具指令 ng new Pro 创建新项目 ng new my-project --style=sass 创建样式表为sass的项目 ng serve 打开项目服务器 ng generate xx === ng g xx

• cl:class
• c:component
• d:directive
• e:enum
• m:module
• p:pipe
• s:service ng build 编译文件

常用核心文件

• src/style.scss：全局的公共样式
• polyfills.ts： 向后兼容的文件
• index.html 核心主页
• main.ts 应用主入口
• envir..环境配置文件夹
• src/assets：存放静态资源-图片，js等
• src/app：
  • app.module.ts 根组件
  • scss组件样式文件
  • html组件模板文件
  • spec.ts 测试文件
  • component.ts 模块功能文件

父组件src/xxx.component.ts

引入核心包

import { Component } from '@angular/core';

对当前模块进行注解/ES7-装饰器

//用来定义类的方法和信息
@Component({
  selector: 'app-root',  //引用名-类似于vue的挂载点
  templateUrl: './app.component.html',  //当前模块的组件模板地址 - 可直接用template内联模板
  styleUrls: ['./app.component.scss']  //组件的样式文件
})

导出组件及定义变量

export class AppComponent {  //组件名称
  title = 'my-pro2';
}

Angular应用编写流程

用Angular扩展语法编写HTML模板 用组件管理这些模板 用服务添加应用逻辑，用模块打包发布组件与服务 通过引导模块启动应用

Angular三大核心

组件 components

组成一个应用的一堆“砖头”；一个组件包含了一个装饰器（ts），HTML模板(html)，样式(css)；
装饰器(ts)：包含一些信息组件的具体信息：

• 类选择器名称
• HTML模板
• [可选择]模板样式

模板 templates

声明了一个组件如何渲染；还可以动态的加载组件输出的变量

<p>{{ message }}</p>

@Component ({
    selector: 'xxx',
    template: '模板',
    //templateUrl: '模板地址'
})

依赖注入 dependency injection

渗透在angular整个框架中，自动创建需要依赖的实例