Angular Workflow - Beta

Create folder for project.

Launch Visual Studio Code:

Open project folder.

Install Node? Hasn't it already been installed globally?

Install Angular CLI

npm install -g @angular/cli

ng new my-dream-app

cd my-dream-app

ng serve --open

npm install -g angular2

Use Angular CLI to create the starter/seed project:

Trouble shooting if necessary:

Check your version by running “node -v” and npm -v using the command line in VS Code. Ctrl +

Test running the app with just the seed code.

Delete

Create a component:

ng g c task-list-component --spec false

add the spec false if you do not want testing file created.

@Component decorator/annotation

This is done automatically if you used CLI to generate the component.

selector

By setting the selector to joke we've told angular that whenever it finds a tag in the html like <joke></joke> to use an instance of the JokeComponent class.

import

This is done automatically if you used CLI to generate the component.

Before we can use @Component though we need to import it, like so: import { component } from '@angular/core';

The line above is saying we want to import the Component code from the module @angular/core.

We leave to SystemJS to figure out how to load that component from @angular/core or even where @angular/core is.

template:

This is done automatically if you used CLI to generate the component.

Set the properties:

Use interpolation {{ }}

Create a service:

Use dependency injection

Then inject it into the constructor of the components that need it:

Directives:

Registeration:

Once you implement a directive, you should register it in AppModule (or the module it belongs to):

In Final Release, directives is remove from component metadata. You should register all components and directives in AppModule (or the module it belongs to):

Subtopic

app-component.html

Add your tag to the body of the app-component.html page.

bootstrapping:

An NgModule therefore contains functionality from multiple files a module refers to functionality in a single file.

imports

The other Angular Modules that export material we need in this Angular Module. Almost every application's root module should import the BrowserModule.

NgModule

BrowserModule

is the Angular Module that contains all the needed Angular bits and Pieces to run our application in the browser.

declarations

The list of components or directives belonging to this module.

bootstrap

Identifies the root component that Angular should bootstrap when it starts the application.