Angular Crash Course 정리

• src
  • index.html
    • main page & only page(SPA) that is loaded on the browser
    • embed root app component
  • app(for creating component and services)
    • app.module.ts
      • entry point to angular
      • meeting point for all the components
      • import statements : import ts file for the component
      • NgModule : root app module 
        • declaration : list of components including main app component(AppComponent)
          
          • every componet created will reside inside root app component
        • module : list of modules including Browser(DOM), AppRouting(if use routing selected)
        • providers : list of services
        • bootstrap : bootstraping main app components
    • app.component.ts
      • @ -> decorator
        • meta data for the component
        • selector : used in html
        • templateURL : points to template
        • styleURL : points to style sheet
      • class
        • propoerty
          • using typescript is highly reccommended
          • access allowed for all the methods
        • constructor
          • runs as soon as the component is loaded
          • for importing services
        • custom method
    • app.componet.html -> template(must be wrapped in a single tag)
      • text interpolation : dynamic content
      • pipelines
      • javascript expressions
• angular.json
  • import bootstrap, css(global style sheet)

 

• generating component
  • ng generate component
  • same as main app component but has ngOnInit() method in ts file
    • lifecycle method
  • must be embeded to apear on the main page

 

• create todos
  • todos come from json placeholder
  • fetch em thru a service
  • subsribe to a method in the service thru component
  • instead for now todos come from data in class in ts file
• create class Todo
  • in Todo.ts in app/models
  • export class Todo {
  • import { Todo } from '../../models/Todo'