fwu11
fwu11

Angular Notes

angular is a JavaScript Framework which allows you to create reactive Single-Page-Applications(SPAs).

Angular Fundamentals

  1. Component & Templates
  2. Forms
  3. Observables & RxJS
  4. NgModules
  5. Service & Dependency Injection
  6. HttpClient
  7. Routing & Navigation

 

Plan the App

Angular Notes_第1张图片

Angular CLI

npm install -g @angular/cli
// then go to the folder we want to create the project
ng new my-dream-app
cd my-dream-app
ng serve

Use Bootstrap

// use bootstrap 2
npm install --save bootstrap@3

// in angular.json, styles
// add at front
"node_modules/bootstrap/dist/css/bootstrap.min.css",

Use Angular material

ng add @angular/material

How an angular app gets loaded and started

index.html file is served by server

replace with the template of the component. the template of this component is app.component.html

cli created the root component of the application under "app folder"

in app.component.ts

selector: 'app-root'

in main.ts, bootstrap start the application with AppModule

in app.module

app.module.ts: declaration: register the app component with angular

bootstrap: [AppComponent]

list all the components should be known to angular at the point of time it analyse index.html file.

Angular Notes_第2张图片

 

Components

angular thinks in "Components"

component is a typescript class.

Ideally, a component's job is to enable the user experience and nothing more. A component should present properties and methods for data binding, in order to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a model).

Angular Notes_第3张图片

other components, their selectors will be added to the app component from component decorator.

the other component stored in another folder.  component declarations in app.module

creating components with the CLI

ng generate component name
// or
ng g c name
// inside a component folder
ng g c folder/name

nesting components: inside one component call another component using their selectors multiple times

component selector is like CSS selector

select by elements

by attributes

by class

 

Data Binding

Angular Notes_第4张图片

Simply put, data binding is a fundamental concept in Angular that allows developers to make communication between a component and its view or more precisly the DOM. This way you don't need to manually push data from your component to the DOM and back.

Angular provides four types of data binding and they are essentically different in the way data flows i.e from the component to the DOM, from the DOM to the component or both ways:

  • String Interpolation: Data flows from the component to the DOM - It's used to display the value of a component member variable in the associated template, e.g. ``. We use curly braces for interpolation {{ }}.
  • Property binding: Data flows from the component to a property of an element in the DOM. It's used to bind a component member variable to an attribute of a DOM such as the value attribue of an tag (For example: ). We use brackets for property binding.
  • Event binding: Data flows from the DOM to the component. When a DOM event, such as a click, is triggered, the bound method from the component is called. For example: - The sayHi() method will be called so it needs to be defined in the component class. We use parentheses for event binding. passing data, $event is the reserved name, access to event emitted data. when using data, event is in type Event
  • Two-way data binding: Data flows both ways. For example: (The foobar variable needs to be defined in the component). The input element and foobar will have the same value and when one changes, the other one changes to the same value accordingly. We use the banana in the box syntax which combines brackets and parentheses for two-way data binding. ngModel is a special directive that binds to the value attribute of the and