Enterprise Angular Applications with NgRx and Nx
  • Introduction
  • Introduction
    • Introduction
    • Course Description
    • Resources
    • 0 - Environment Setup
    • 1a - Brief Introduction To Angular
    • 1b - Brief Introduction To Angular
    • 1c - Brief Introduction To Angular
    • 2 - Creating an Nx Workspace
    • 3 - Generating components and Nx lib
    • 4 - Add JSON server
    • 5 - Angular Services
    • 6 - Angular Material
    • 7 - Reactive Forms
    • 8 - Layout Lib and BehaviorSubjects
    • 9 - Route Guards and Products Lib
    • 10 - NgRx Introduction
    • 11 - Adding NgRx to Nx App
    • 12 - Strong Typing the State and Actions
    • 13 - NgRx Effects
    • 14 - NgRx Selectors
    • 15 - Add Products NgRx Feature Module
    • 16 - Entity State Adapter
    • 17 - Router Store
    • 18 - Deploying An Nx Monorepo
Powered by GitBook
On this page
  • 1. Create a new Angular CLI Project
  • 2. Run the app
  • 3. Review the structure and key files
  • 4. Add a Home page component
  • 5. Add a route
  • 6. Event and data binding
  1. Introduction

1a - Brief Introduction To Angular

In the next few sections we will review the main part of Angular. In this first part we will review creating a CLI app and using event and property binding with templates.

The finished code for the next three parts can be found here https://github.com/duncanhunter/workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only

git clone "https://github.com/duncanhunter/workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only"
cd workshop-enterprise-angular-applications-with-ngrx-and-nx-cli-only
npm install

1. Create a new Angular CLI Project

  • Make a new workshop folder and generate a new CLI app

mkdir workshop
cd workshop
ng new angular-cli-app --routing

Change directory into the new app's directory and open it with VS Code

cd angular-cli-app
code .

2. Run the app

  • Run the below command 's' is short for serve.

ng s

Look at output.

3. Review the structure and key files

  • package.json

  • index.html

  • main.ts

  • app.module.ts

  • app.component.ts

  • app-routing.module.ts

4. Add a Home page component

  • Add home page component

ng generate component home
  • Add home component selector to the AppComponent and delete all default HTML except the router outlet.

src/app/app.component.html
<h1>The App</h1>

<app-home></app-home>
<router-outlet></router-outlet>

5. Add a route

src/app/spp-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { } 

6. Event and data binding

  • Add event and data binding to Home component with a new title property

src/app/home/home.component.html
{{title}}

<input type="text" #input [value]="title" (keyup)="updateTitle(input.value)">
  • Add a function to the Home component.

src/app/home/home.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  title: string;
  constructor() {}

  ngOnInit() {}

  updateTitle(value) {
    // debugger;
    console.log(`updateTitle: ${value}`);
    this.title = value;
  }
}

Previous0 - Environment SetupNext1b - Brief Introduction To Angular

Last updated 6 years ago

Bundled javascript files added to index.html dynamically