Categorii: Tot - service

realizată de Richard Allen 7 ani în urmă

570

Angular Workflow - Beta

Developing an Angular application involves several key steps and considerations. Initially, you test the app with the seed code and troubleshoot any issues by checking the Node and npm versions via the command line in VS Code.

Angular Workflow - Beta

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.