0.模块介绍和基础知识css
https://cloud.tencent.com/developer/section/1489514html
1.以下图VSCode--node
node_modules 第三方依赖包存放目录 e2e 端到端的测试目录 用来作自动测试的 src 应用源代码目录 .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.Src目录下:jquery
app目录 包含应用的组件和模块,咱们要写的代码都在这个目录
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 不用管
3.app目录(重点)
app目录是咱们要编写的代码目录。咱们写的代码都是放在这个目录。
一个Angular程序至少须要一个模块和一个组件。在咱们新建项目的时候命令行已经默认生成出来了。typescript
app.component.ts:这个文件表示组件,
组件是Angular应用的基本构建模块,能够理解为一段带有业务逻辑和数据的Htmlnpm
4.组件相关的概念:
1.组件元数据装饰器(@Component)
简称组件装饰器,用来告知Angular框架如何处理一个TypeScript类.
Component装饰器包含多个属性,这些属性的值叫作元数据,Angular会根据这些元数据的值来渲染组件并执行组件的逻辑
2.模板(Template)
咱们能够经过组件自带的模板来定义组件的外观,模板以html的形式存在,告诉Angular如何来渲染组件,通常来讲,模板看起来很像html,可是咱们能够在模板中使用Angular的数据绑定语法,来呈现控制器中的数据。
3.控制器(controller)
控制器就是一个普通的typescript类,他会被@Component来装饰,控制器会包含组件全部的属性和方法,绝大多数的业务逻辑都是写在控制器里的。控制器经过数据绑定与模板来通信,模板展示控制器的数据,控制器处理模板上发生的事件。
装饰器,模板和控制器是组件的必备要素。还有一些可选的元素,好比:
**输入属性(@inputs)😗*是用来接收外部传入的数据的,Angular的程序结构就是一个组件树,输入属性容许在组件树种传递数据
**提供器(providers):**这个是用来作依赖注入的
**生命周期钩子(LifeCycle Hooks):**一个组件从建立到销毁的过程当中会有多个钩子会被触发,相似于Android中的Activity的生命周期
样式表:组件能够关联一些样式表
动画(Animations): Angular提供了一个动画包来帮助咱们方便的建立一些跟组件相关的动画效果,好比淡入淡出等
**输出属性(@Outputs):**用来定义一些其余组件可能须要的事件或者用来在组件之间共享数据
json
app.module.ts:这个文件表示模块app
与AppComponent相似,模块也须要装饰器来装饰。框架