leah

my dev_log

0%

18. Angular

Posted on Edited on In ,

Angular

TypeScript

www.typescriptlang.org/docs/handbook/intro.html

Handbook - The TypeScript Handbook
Your first step to learn TypeScript
www.typescriptlang.org

let [varName] : [varType] = [value];

  • enum : dictionary
  • function => need to specify the types of parameters
  • getting rid of any error of classes…
  • testing if we generate any error
  • typing faster

imraccoon-developer.tistory.com/11

TypeScript, 왜 써야되나?? (feat. 장단점)
JavaScript가 es6로 바뀌면서 큰 인기를 끌기 시작했습니다. 또한, Node.js로 할 수 있는 것들이 점점 많아졌으며, 지금도 많아지고 있습니다. 처음에는 웹에서 사용하기 위한 스크립트 언어로 활용되
imraccoon-developer.tistory.com

Angular Architecture

  • Modules
  • Components
  • Services
    …

Modules

  • connected through Metadata
  • Component === View
  • Service: share functionality through entire app
  • dependency injector

@NgModule: function

  • bootstrap: starting point, start compiling
  • decorators: annotate data to give extra info to(of) the target

–> decorating: NgModule targeting AppModule

Components

  • A class meant to be as reusable (when applies) as possible

  • Defines application data and logic

  • Bound to a template, an HTML file

  • give users all the functionality of the app

  • create DOM and add components thus drawing a tree: [tree] template -> components (+ template) -> …

  • communicate with each other and give access of information to users

  • component = instance of a class, independent element but communicate with others as a class

  • render the DOM as a new node

  • shadow DOM to encapsulate the component, not affected by exeternal interventions
    Shadow DOM
    different DOM, OWN capsulated environment

polymer-library.polymer-project.org/2.0/docs/devguide/shadow-dom
Shadow DOM is a new DOM feature that helps you build components. You can think of shadow DOM as a scoped subtreeinside your element.

  • Root Component
  • contain everything
  • Root Template
  • Navigation Component: works itself, alone
  • Container Component: including other components
  • Filtering Component
  • receive the input data
  • render into different components (list, map)

e.g. Scenario
if like one of the list component item -> passed up to the container -> reflect that to the map component
filtering info in the filter component -> passed up to the container -> reflect that to the map component

Data Binding

when user gives the input, then DOM will communicate using property in [(ng-model)] = “property”

  • handler: function declared component

object => {}

  • 2 way binding: class component <-> template
  • selector: ‘movie-details’ –> director obj go in trhough selector

Services

  • private: TS property, can’t access it from other classes