Angular Workflow - Beta

Meer zoals dit

Car Service Melbourne

door Hawthorn Automotive Improvement

Co-Curricular Ideas

door Nina Martens

EasyCar

door chiew yeemeng

Lib Core Values

door yeziqiu yeziqiu

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.