Part I - Use Angular to build FrontEnd I

prev_step

Application Creation and Preparation

Step 1: installing Angular CLI

Step 2: creating and launching Angular Application with Angular CLI

• cd to your desired folder, then open cmd and type in ng new todo!
• cd to todo folder, run ng serve.
• open Chrome and type in localhost:4200 in URL, then we can visit our app.

Step 3: importing the app in VSCode

Step 4 : exploring Angular CLI Commends

• ng lint: checking codes with coding standards, you can customize the standards in tslint.json.
• ng build: generating the files in folder dist that are needed to deploy the app.
• ng test: runs the unit tests which are written for Angular app.
  Unit tests for Angular are written in Jasmine framework, and we are using karma to run the unit.
  In front-end applications, tests are called specs.
• ng e2e: run end-to-end tests. Comparing with ng test, end-to-end tests test the entire application, rather than testing a single file.

Step 5: Exploring Angular CLI Project Structure

Step 6: Getting familiar with Angular

1. Angular Components - Basics
A Component is associated with Template, i.e. HTML .component.html, Style, i.e. CSS .component.css, Code, i.e. TypeScript .component.ts.
Component decorator, i.e. @Component: indecates this is a component. In component decorator, there are few attributes.

• selector: the tag name for this component;
• templateUrl: where is the HTML template location for this component;
• styleUrls: where are the Styles for this component. For multiple resources, use [‘url’, ‘url’].

Interpolation : data binding, i.e. taking some data from component and showing them in the view.

Step 7: Language Variation between Java, JavaScript and TypeScript

• In JavaScript, for simplicity, we create one module per file and one file per module, and module is where we organize classes in Javascript.
• If we want to use modules in other files, we use import, e.g. import React from 'react', import Welcome from './components/Welcome'.
• The definition for a class in TypeScipt is similar to that in Java. That is export WelcomeComponent implements OnInit {}. export helps us to use this module outside its boundary.
• Methods in TS: Format is like, constructor() {...}, ngOnInit() {...}, ngOnInit(): void {...},…
• Field members in TS: the format is like message = 'qwer'. In Java, it’s like String message = "qwer";. Tips: 1) In TS, there is no difference between ‘’ and “”. 2) In TS, we implictly indicate the variable type. For the previous example, if we then code this.message = 5, this will cause error!

next_step