CRM App - Part 1 Creating an Angular CLI Project ( 1 of 14 )

CRM App - Part 2 Generating Components >

Overview

Time: 2min

In this Module, we will build a simple CRM application that uses many key features of Angular including:

Angular CLI
Angular Modules
Component Architecture
Component Communication
Angular Services and Dependancy Injection
Angular HTTP Module
RxJS and Observables
Routing
Reactive Forms
Code splitting
AoT (ahead of time compilation)
Module bundling
State management

Finished Code for the CRM Module

git clone "https://github.com/SSWConsulting/AngularSuperPowers-CRM-App"

cd firebootcamp-crm-2day

npm install

Create a new Angular CLI application

Time: 5min

See Intro to the Angular CLI for more information about the Angular CLI

In the folder, you would like to create this project run the following command

ng new firebootcamp-crm --prefix fbc --routing  --style scss  --dry-run

//   --prefix = add prefix to all component template element names (see Angular.json)

//   --style = Specify the css pattern css, less or scss (see Angular.json)

//   --routing = Make a default routing module for the app

//   --dry-run = do not run anything to disk

If the dry run output looks right then remove the --dry-run flag and re-run the ng new command.

ng new firebootcamp-crm --prefix fbc --routing  --style scss

Change directory into the new project and open the CLI in Visual Studio Code

cd firebootcamp-crm && code .

Run the application

ng serve -o

Open the application in your web browser at http://localhost:4200

Commit changes locally to default git repo

Time: 5min

By default, the Angular CLI will set up git for source control and a .gitignore file by default.

After getting a default Angular CLI application working, commit the initial changes to your local git repo with the below command.

git commit -m "initialise cli project"

Note: As of v12 the Angular CLI will create an 'Inital Commit' for the project creation. So this step is no longer necessary.

It is possible when creating a new CLI app to pass in the flag --skip-git to turn off the default create a git repo setting.

Course slides

Time: 0min

Course slides

You can access the course slides here:

https://docs.google.com/presentation/d/1rLOa7n8ML7LqYA8mzRG9jmC7rnj7d12Y/edit#slide=id.p1