AngularDemo

Installation

• Start by installing angular-cli: npm i -g @angular/cli
• Generate a project using: ng new angular-demo --style=scss
• Change into dir: cd angular-demo
• Install project deps: npm i

1-housekeeping

• Added box-sizing reset to src/style.scss
• Delete contents of src/app/app.component.html

2-home-page

• Create home component using ng generate component home
• Go over all the files generated, and the changes to the app.module.ts file
• Add home component to app.component.html using app-home
• Create a pages dir under app and move the home component to pages
• The page should be broken now (may need to restart ng serve to make this happen)
• Explain the changes that need to be made to app.module.ts
• Add some data to the home.component.ts file and display that data in home.component.html

3-routing-and-multiple-pages

• Create an about and contact page without using the cli generator
• Explain how to create files and what was being generated for you
• After creating the contact page, explain two-way data, attr, and event binding
• Ensure that the FormsModule is included in the app.modules.ts file.
• Add RouterModule to the app.module.ts file
• Add <router-outlet></router-outlet> to the app.component.html file.
• Define routes for the three pages and a catch all route
• Create a components dir
• In the components dir, create a header component to house page nagviation.
• Add <app-header /> to app.component.html.

4-form-validation

• Clean up the html for the contact page
• Add CSS to make the contact page pretty
• Add validation functions to the contact ts file
• Bind the validation functions to the html file for ContactComponent.

5-component-communication

• Rename about to communication, update the component, router, and header component
• Create a parent component
• Update the app.modules.ts file with the new component
• Create a child component
• Update the app.modules.ts file with the new component
• Add the child component to the parent component and explain the communication between the two
• Add the parent component to the communication component's html

6-backend-service

• Create a service folder under src/app named 'services'
• Create a backend.service.ts file
• Add the backend service to app.module.ts
• Add in a contact method for the contact page to use\
• Bring in the backend server into contact.component.ts file
• Use the contact method in the submit of the contact page
• Add the HttpClient Module to the app.module.ts file.

7-authentication

• Create a session service to hold the current user information
• Add the service to app.module.ts
• Create a auth service to handle login/logout/register
• Add the service to app.module.ts
• Create a login page that uses the auth service
• Update the router to handle the 'login' route
• Update the header component to show a login/logout button
• Remind everyone that this is using object reference to keep track of logged in state

8-observables

• Update the session service to use a Behavior subject to emit out the loggedIn status
• Update the header.component.ts file to leverage the observable
• Update the header component's html file to make sure of the new methods and observable
• Inform the students that there are two different ways to use the observable in this code

9-futher-learning

• Added text file with links to more topics to study
• TypeScript
• Reactive Forms and Validations
• Debouncing inputs with Observables

---

Docs generated by Angular-cli

---

This project was generated with Angular CLI version 6.0.0.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.