Angular Workflow - Beta
bootstrapping:
An NgModule therefore contains functionality from multiple files a module refers to functionality in a single file.
bootstrap
Identifies the root component that Angular should bootstrap when it starts the application.
declarations
The list of components or directives belonging to this module.
imports
The other Angular Modules that export material we need in this Angular Module. Almost every application's root module should import the BrowserModule.
BrowserModule
is the Angular Module that contains all the needed Angular bits and Pieces to run our application in the browser.
NgModule
app-component.html
Add your tag to the body of the app-component.html page.
Directives:
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
Once you implement a directive, you should register it in AppModule (or the module it belongs to):
Registeration:
Use dependency injection
Then inject it into the constructor of the components that need it:
Register a service as a provider in AppModule (or the module it belongs to):
Create a service:
Use interpolation {{ }}
Set the properties:
Create a component:
Register the component in @NgModule
template:
import
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.
Before we can use @Component though we need to import it, like so: import { component } from '@angular/core';
@Component decorator/annotation
selector
By setting the selector to joke we've told angular that whenever it finds a tag in the html like to use an instance of the JokeComponent class.
This is done automatically if you used CLI to generate the component.
ng g c task-list-component --spec false
add the spec false if you do not want testing file created.
Delete
Test running the app with just the seed code.
Trouble shooting if necessary:
Check your version by running “node -v” and npm -v using the command line in VS Code. Ctrl +
Use Angular CLI to create the starter/seed project:
ng
Install Angular CLI
npm install -g angular2
ng serve --open
cd my-dream-app
ng new my-dream-app
npm install -g @angular/cli
Install Node? Hasn't it already been installed globally?
Launch Visual Studio Code:
Open project folder.
Create folder for project.
