Angular Quickstart Guide

by Gregg Crystal Aug 29, 2021

Here’s some important links to get you started:

angular.io – Has all of the documentation for Angular. It’s a little thin on tutorials but it’s a good start.

https://angular.io/guide/styleguide – Tells you how to structure your code, according to Angular’s latest guidelines.

https://update.angular.io/ – Convenient site to help you understand what’s necessary to change when upgrading Angular.

https://www.npmtrends.com/ngx-bootstrap-vs-@angular/material-vs-primeng-vs-ng-bootstrap – NPM trends is like Google Trends but for npm. It’s let’s you compare packages and see what’s hot and what’s not.

UI Frameworks:

https://material.angular.io/ – Angular’s UI framework of choice

https://ng-bootstrap.github.io/#/home – NG Bootstrap gives you Bootstrap behaviors without adding JQuery dependency. Also lets you access controls via typescript.

https://valor-software.com/ngx-bootstrap/#/ – Same as NG Bootstrap but a different implementation by a different company.

https://www.primefaces.org/primeng/#/ – PrimeNG. Even better than the previous three options (I think) it has more components.

Getting Starting With Angular npm Commands

 

npm -v
Make sure you have it installed. This displays the version number.

npm install -g @angular/cli
Installs the latest Angular globally.

Getting Started with Angular ng Commands

Generate a New Angular Workspace and Application

ng new corporate –routing –style scss –dry-run
This command creates a new project in the ‘corporate’ folder with routing and styles choice of SCSS. The –dry-run flag will show you what files would be created, but doesn’t create them. Remove the –dry-run flag and the project will be created.

Note that is you remove –routing and –style it will prompt for routing and style preference.
These files and folders will be created under the ‘corporate’ directory.

Generate a Module

ng g m products –routing –dry-run
Generates (g) and module (m) called products. Add routing do a dry run, producing this:

Generate a Component

ng g c product-list
This generates a component. Note it will create a folder called product-list unless you use the –flat option.

Running an Angular App

ng s or ng serve
If you want to specify a different port, use the –port option, such as:
ng s –port 4201
This is particularly helpful when you’re running examples for Pluralsight/GitHub/etc, as Angular defaults all ports to 4200.