📗
Notes
  • Introduction
  • Files
  • Android
    • Http
      • Http基础
      • Okhttp理解
    • Jetpack
      • Notes
  • Java ways
    • 101
      • Basis
        • Index
        • Front
          • Angular
            • Angular start 01
            • Angular start 02
          • Typescript
            • Index
            • Ts 01
        • Java
          • Concurrency
          • Frameworks
            • Jdbc与连接池
            • Rxjava基础
            • Spring框架基础
          • Sugar&skill
        • Tool
          • Docker
            • Docker basis
            • Kubernetes play
          • Git
            • Git basic
          • Vim
            • Vim advance
      • Cs
        • Imp
          • Lru
          • Index
    • Snippets
      • Jpa和spring系列注解表
      • Java与oracle数据库各种操作
      • Maven初始化template
      • Nginx配置
      • Nginx反代后配置自动ssl续签
      • 终端033颜色
    • Ways
      • Java ways 01
      • Interview
        • Question
        • Requirements
      • Leetcode101
        • Acwing
          • Index
          • 背包问题
        • Explores
        • Solutions
          • Algorithms
            • Index
          • Concurrency
            • Index
          • Shell
            • Index
          • Sql
            • Index
  • Leecode
    • 牛客
      • 剑指offer
  • Play
    • Youtube离线下载
  • Python basic notes
    • Python days
Powered by GitBook
On this page
  • Angular Start
  • 目录结构
  • 创建一个组件

Was this helpful?

  1. Java ways
  2. 101
  3. Basis
  4. Front
  5. Angular

Angular start 01

PreviousAngularNextAngular start 02

Last updated 4 years ago

Was this helpful?

   Author: Gentleman.Hu
   Create Time: 2020-11-04 10:32:18
   Modified by: Gentleman.Hu
   Modified time: 2020-11-05 15:51:43
   Email: justfeelingme@gmail.com
   Home: https://crushing.xyz
   Description:

Angular Start

目录结构

  • ① Root component,根组件

    • ① 对应html中的 DOM中的selector位置,被解释翻译点

    • ② 对应此组件的HTML模板

    • ③ 对应此组件的css样式

    • ④ 此组件类的成员和方法函数等

  • ② Main module,主模块

    • app.module.ts,应用具体定义配置模块,定义了所有相关组件和依赖等

    • @NgModule,这个ts注解标识是Angular的module类

    • declarations ,标识哪些组件可以再本应用使用

    • imports,引入其他的module,提供函数使用

    • bootstrap,本应用的入口组件

  • ③ Root HTML,根HTML页

  • ④ Entry point,入口

    • 启动应用

  • ⑤ Angular CLI config,cli配置

declarations

The declarations block defines all the components that are allowed to be used in the scope of the HTML within this module. Any component that you create must be declared before it can be used.

imports

You will not create each and every functionality used in the application, and the imports array allows you to import other Angular application and library modules and thus leverage the components, services, and other capabilities that have already been created in those modules.

bootstrap

The bootstrap array defines the component that acts as the entry point to your application. If the main component is not added here, your application will not kick-start, as Angular will not know what elements to look for in your index.html.

创建一个组件

  • ng generate component path/name

  • 以上命令利用cli工具创建component

  • cli将自动在app.module.ts中添加声明和依赖

  • 可以看到自动生成的component,selector正是对应html中的selector,对应解析翻译。

  • ngOnInit()此方法是实现OnInit接口的方法,设置了Hook,当此Component初始化时候触发

  • 里边填写相应的初始化变量,类似Java构造方法

app.component.spec.ts,[单元测试]()

providers,injector,提供运行时的注入 [doc]()

typescript - What are the "spec.ts" files generated by Angular CLI for? - Stack Overflow
Angular
UnderstandingCompontents
'$'符号作用
详细(ts)doc
官方文档