Angular学习
Angular学习01
一、Angular目录
1. Angular目录结构
命令行:
ng new my-app2
- src 应用源代码目录
|- app 包含定义应用逻辑和数据的组件文件
|- app.component.ts 为应用的根组件定义逻辑,名为 AppComponent。当你向应用中添加组件和服务时,与这个根组件相关联的视图就会成为视图树的根。
|- app.component.html 定义与根组件 AppComponent 关联的 HTML 模板。
|- app.component.css 为根组件 AppComponent 定义了基本的 CSS 样式表。
|- app.component.spec.ts 为根组件 AppComponent 定义了一个单元测试。
|- app.module.ts 为应用的根组件定义逻辑,名为 AppComponent。定义了名为 AppModule 的根模块,它会告诉 Angular 如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时,它们也必须在这里声明。
|- assets目录 资源目录,存储静态资源的 比如图片
|- environments 目录环境配置。Angular是支持多环境开发的,我们可以在不同的环境下(开发环境,测试环境,生产环境)共用一套代码,主要用来配置环境的
|- index.html 整个应用的根html,程序启动就是访问这个页面
|- main.ts 整个项目的入口点,Angular通过这个文件来启动项目
|- polyfills.ts 主要是用来导入一些必要库,为了让Angular能正常运行在老版本下
|- styles.css 主要是放一些全局的样式
|- tsconfig.app.json TypeScript编译器的配置,添加第三方依赖的时候会修改这个文件
|- tsconfig.spec.json 不用管
|- test.ts 也是自动化测试用的
|- typings.d.ts不用管 - .angular-cli.json Angular命令行工具的配置文件。后期可能会去修改它,引一些其他的第三方的包
比如jquery等 - karma.conf.js karma是单元测试的执行器,karma.conf.js是karma的配置文件
- package.json
这是一个标准的npm工具的配置文件,这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候,等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中,后期我们可能会修改这个文件。 - protractor.conf.js 也是一个做自动化测试的配置文件
- README.md 说明文件
- tslint.json 是tslint的配置文件,用来定义TypeScript代码质量检查的规则,不用管它
2. app.module.ts
2. 组件与模块
组件=装饰器+模板+控制器
组件(ts文件):将页面上的能够复用的区域(块)封装在一个ts文件中
装饰器(@Component):告知angular框架如何处理TypeScript类
模板(html文件):定义组件外观,如何渲染组件(html展示组件外观)
控制器(TypeScript类):控制器通过数据绑定与模板通讯,模板展示控制器数据,控制器处理模板上发生的事件(与模板通讯、处理模板事件)
import { Component } from '@angular/core';//导入的是angular/core核心包
@Component({//装饰器
selector: 'app-root',//选择器:可以使用<app-root></app-root>标签引用这个组件
templateUrl: './app.component.html',//模板:组件的外观、与控制器通讯
styleUrls: ['./app.component.css']//模板的样式
})
export class AppComponent {//控制器:处理模板事件、与模板通讯
title = 'auction';//声明数据
}
模块
Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。
根据组件的概念可知, 组件才是用户可以看到的,直接操作的对象,模块就是用来组织和归类组件的一块功能。下面是一张系统模块划分图
app模块:整个应用的根模块,表示整个应用的功能。
订单模块:专注于订单业务和页面集合
用户模块:专注于用户模块的页面集合
重点:一个组件必须且只能属于一个模块
这里面有两层含义:
(1)组件必须属于一个模块,如果这个组件不属于任何模块,则它无法被angular加载并显示在界面上
(2)组件只能属于一个模块,比如上面的订单页面组件,属于订单模块,就不能再把他划给用户模块。
下面来看看ngModule的用法
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
providers: [ Logger ],
declarations: [ AppComponent ],
exports: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
imports: 导入其他模块,表示该模块依赖其他模块的组件
declarations: 声明哪些组件属于该模块
exports: 声明哪些组件可以被导出,其他模块引入该模块时,可以使用该模块导出组件
providers:申明该模块使用哪些service(service后面将会讲解)
bootstrap:模块的启动组件(这个一般在app根模块才会使用,后面会讲解)
模块起到的作用:
(1)将系统的不同功能的组件分门别类
(2)确定不同模块的依赖关系,可以实现懒加载,提高启动速度
(3)可以避免组件重名带来的问题,只要保证同一个模块名字一致就行
(参考:https://blog.csdn.net/QQ401476683/article/details/82417704)
总结
Anuglar目录结构以及模块与组件的关系。