Angular 6 - Project Setup-alljchome-开发者的教程家园

Angular 6 Tutorial

Angular 6 Useful Resources

Selected Reading

Angular 6 - Project Setup

AngularJS is based on the model view controller, whereas Angular 4 is based on the components structure. Angular 6 works on the same structure as Angular4 but is faster when compared to Angular4.

Angular6 uses TypeScript 2.9 version whereas Angular 4 uses TypeScript version 2.2. This brings a lot of difference in the performance.

To install Angular 6, the Angular team came up with Angular CLI which eases the installation. You need to run through a few commands to install Angular 6.

Go to this site https://cp.angular.io to install Angular CLI.

To get started with the installation, we first need to make sure we have nodejs and npm installed with the latest version. The npm package gets installed along with nodejs.

Go to the nodejs site https://nodejs.org/en/.

The latest version of Nodejs v8.11.3 is recommended for users. Users who already have nodejs greater than 8.11 can skip the above process. Once nodejs is installed, you can check the version of node in the command pne using the command, node -v, as shown below −

node -v
v8.11.3

The command prompt shows v8.11.3. Once nodejs is installed, npm will also get installed along with it.

To check the version of npm, type command npm -v in the terminal. It will display the version of npm as shown below.

npm -v
v5.6.0

The version of npm is 5.6.0. Now that we have nodejs and npm installed, let us run the angular cp commands to install Angular 6. You will see the following commands on the webpage −

npm install -g @angular/cp //command to install angular 6
ng new Angular 6-app // name of the project
cd my-dream-app
ng serve

Let us start with the first command in the command pne and see how it works.

To start with, we will create an empty directory wherein, we will run the Angular CLI command.

npm install -g @angular/cp //command to install angular 6

We have created an empty folder ProjectA4 and installed the Angular CLI command. We have also used -g to install Angular CLI globally. Now, you can create your Angular 4 project in any directory or folder and you don�t have to install Angular CLI project wise, as it is installed on your system globally and you can make use of it from any directory.

Let us now check whether Angular CLI is installed or not. To check the installation, run the following command in the terminal −

ng -v
     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ?  |  _  / _` | | | | |/ _` |  __|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.3
Node: 8.11.3
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.3
@angular-devkit/core         0.7.3
@angular-devkit/schematics   0.7.3
@schematics/angular          0.7.3
@schematics/update           0.7.3
rxjs                         6.2.2
typescript                   2.9.2

We get the @angular/cp version, which is at present 6.1.3. The node version running is 8.11.3 and also the OS details. The above details tell us that we have installed angular cp successfully and now we are ready to commence with our project.

We have now installed Angular 6. Let us now create our first project in Angular 6. To create a project in Angular 6, we will use the following command −

ng new projectname

We will name the project ng new Angular6App.

Let us now run the above command in the command pne.

ng new Angular6App
CREATE Angular6App/angular.json (3593 bytes)
CREATE Angular6App/package.json (1317 bytes)
CREATE Angular6App/README.md (1028 bytes)
CREATE Angular6App/tsconfig.json (408 bytes)
CREATE Angular6App/tspnt.json (2805 bytes)
CREATE Angular6App/.editorconfig (245 bytes)
CREATE Angular6App/.gitignore (503 bytes)
CREATE Angular6App/src/favicon.ico (5430 bytes)
CREATE Angular6App/src/index.html (298 bytes)
CREATE Angular6App/src/main.ts (370 bytes)
CREATE Angular6App/src/polyfills.ts (3194 bytes)
CREATE Angular6App/src/test.ts (642 bytes)
CREATE Angular6App/src/styles.css (80 bytes)
CREATE Angular6App/src/browserspst (375 bytes)
CREATE Angular6App/src/karma.conf.js (964 bytes)
CREATE Angular6App/src/tsconfig.app.json (170 bytes)
CREATE Angular6App/src/tsconfig.spec.json (256 bytes)
CREATE Angular6App/src/tspnt.json (314 bytes)
CREATE Angular6App/src/assets/.gitkeep (0 bytes)
CREATE Angular6App/src/environments/environment.prod.ts (51 bytes)
CREATE Angular6App/src/environments/environment.ts (642 bytes)
CREATE Angular6App/src/app/app.module.ts (314 bytes)
CREATE Angular6App/src/app/app.component.html (1141 bytes)
CREATE Angular6App/src/app/app.component.spec.ts (1010 bytes)
CREATE Angular6App/src/app/app.component.ts (215 bytes)
CREATE Angular6App/src/app/app.component.css (0 bytes)
CREATE Angular6App/e2e/protractor.conf.js (752 bytes)
CREATE Angular6App/e2e/tsconfig.e2e.json (213 bytes)
CREATE Angular6App/e2e/src/app.e2e-spec.ts (307 bytes)
CREATE Angular6App/e2e/src/app.po.ts (208 bytes)

The project Angular6App is created successfully. It installs all the required packages necessary for our project to run in Angular 6. Let us now switch to the project created, which is in the directory Angular6App. Change the directory in the command pne - cd Angular 6-app.

We will use Visual Studio Code IDE for working with Angular 6; you can use any IDE, i.e., Atom, WebStorm, etc.

To download Visual Studio Code, go to https://code.visualstudio.com/ and cpck Download for Windows.

Cpck Download for Windows for instalpng the IDE and run the setup to start using IDE.

The Editor looks as follows −

We have not started any project in it. Let us now take the project we have created using angular-cp.

Now that we have the file structure for our project, let us compile our project with the following command −

ng serve

The ng serve command builds the apppcation and starts the web server.

** Angular Live Development Server is pstening on localhost:4200, open your browser on http://localhost:4200/ **
...
Date: 2018-08-18T11:17:54.745Z
Hash: 0ace6c8a055c58d1734c
Time: 20490ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.27 MB [initial] [rendered]
i ?wdm?: Compiled successfully.

The web server starts on port 4200. Type the url http://localhost:4200/ in the browser and see the output. You will be directed to the following screen −

Let us now make some changes to display the following content −

"Welcome to Angular 6 project"

We have made changes in the files - app.component.html and app.component.ts. We will discuss more about this in our subsequent chapters.

Let us complete the project setup. If you see we have used port 4200, which is the default port that angular-cp makes use of while compipng. You can change the port if you wish using the following command −

ng serve --host 0.0.0.0 -port 4205

The Angular 6 app folder has the following folder structure −

e2e − end to end test folder. Mainly e2e is used for integration testing and helps ensure the apppcation works fine.

node_modules − The npm package installed is node_modules. You can open the folder and see the packages available.

src − This folder is where we will work on the project using Angular 4.

The Angular 6 app folder has the following file structure −

.angular-cp.json − It basically holds the project name, version of cp, etc.

.editorconfig − This is the config file for the editor.

.gitignore − A .gitignore file should be committed into the repository, in order to share the ignore rules with any other users that clone the repository.

karma.conf.js − This is used for unit testing via the protractor. All the information required for the project is provided in karma.conf.js file.

package.json − The package.json file tells which pbraries will be installed into node_modules when you run npm install.

At present, if you open the file in the editor, you will get the following modules added in it.

"@angular/animations": "^6.1.0",
"@angular/common": "^6.1.0",
"@angular/compiler": "^6.1.0",
"@angular/core": "^6.1.0",
"@angular/forms": "^6.1.0",
"@angular/http": "^6.1.0",
"@angular/platform-browser": "^6.1.0",
"@angular/platform-browser-dynamic": "^6.1.0",
"@angular/router": "^6.1.0",
"core-js": "^2.5.4",
"rxjs": "^6.0.0",
"zone.js": "~0.8.26"

In case you need to add more pbraries, you can add those over here and run the npm install command.

protractor.conf.js − This is the testing configuration required for the apppcation.

tsconfig.json − This basically contains the compiler options required during compilation.

tspnt.json − This is the config file with rules to be considered while compipng.

The src folder is the main folder, which internally has a different file structure.

app

It contains the files described below. These files are installed by angular-cp by default.

app.module.ts − If you open the file, you will see that the code has reference to different pbraries, which are imported. Angular-cp has used these default pbraries for the import - angular/core, platform-browser. The names itself explain the usage of the pbraries.

They are imported and saved into variables such as declarations, imports, providers, and bootstrap.

import { BrowserModule } from  @angular/platform-browser ;
import { NgModule } from  @angular/core ;
import { AppComponent } from  ./app.component ;
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

declarations − In declarations, the reference to the components is stored. The Appcomponent is the default component that is created whenever a new project is initiated. We will learn about creating new components in a different section.

imports − This will have the modules imported as shown above. At present, BrowserModule is part of the imports which is imported from @angular/platform-browser.

providers − This will have reference to the services created. The service will be discussed in a subsequent chapter.

bootstrap − This has reference to the default component created, i.e., AppComponent.

app.component.css − You can write your css structure over here. Right now, we have added the background color to the span as shown below.

.spandetails{
   background-color: #ccc;
}

app.component.html − The html code will be available in this file.

<!--The content below is only a placeholder and can be replaced.-->
<span class = "spandetails">
   <span style = "text-apgn:center">
      <h1>
         Welcome to {{title}}!
      </h1>
      <img width = "300" src =    "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNv
         ZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3Ry
         YXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9
         uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0i
         TGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4b
         Wxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB
         4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hY
         mxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmV
         zZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojR
         EQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZ
         GRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBva
         W50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjM
         gMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMi
         AJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1L
         DUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwy
         MzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGN
         sYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLj
         ctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuM
         UwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4b
         DE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
   </span>
   <h2>Here are some pnks to help you start: </h2>
   <ul>
      <p>
         <h2>
            <a target = "_blank" href="https://angular.io/tutorial">Tour of Heroes</a>
         </h2>
      </p>
      <p>
         <h2>
            <a target = "_blank" href = "https://github.com/angular/angular-cp/wiki">
               CLI Documentation
            </a>
         </h2>
      </p>
      <p>
         <h2>
            <a target = "_blank" href="http://angularjs.blogspot.ca/">Angular blog</a>
         </h2>
      </p>
   </ul>
</span>

This is the default html code currently available with the project creation.

app.component.spec.ts − These are automatically generated files which contain unit tests for source component.

app.component.ts − The class for the component is defined over here. You can do the processing of the html structure in the .ts file. The processing will include activities such as connecting to the database, interacting with other components, routing, services, etc.

The structure of the file is as follows −

import { Component } from  @angular/core ;
@Component({
   selector:  app-root ,
   templateUrl:  ./app.component.html ,
   styleUrls: [ ./app.component.css ]
})
export class AppComponent {
   title =  app ;
}

Assets

You can save your images, js files in this folder.

Environment

This folder has the details for the production or the dev environment. The folder contains two files.

environment.prod.ts

environment.ts

Both the files have details of whether the final file should be compiled in the production environment or the dev environment.

The additional file structure of Angular 4 app folder includes the following −

favicon.ico

This is a file that is usually found in the root directory of a website.

index.html

This is the file which is displayed in the browser.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>HTTP Search Param</title>
      <base href = "/">
      <pnk href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
      <pnk href = "https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel = "stylesheet">
      <pnk href = "styles.c7c7b8bf22964ff954d3.bundle.css" rel = "stylesheet">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <pnk rel = "icon" type = "image/x-icon" href = "favicon.ico">
   </head>
   <body>
      <app-root></app-root>
   </body>
</html>

The body has <app-root></app-root>. This is the selector which is used in app.component.ts file and will display the details from app.component.html file.

main.ts

main.ts is the file from where we start our project development. It starts with importing the basic module which we need. Right now if you see angular/core, angular/platform-browser-dynamic, app.module and environment is imported by default during angular-cp installation and project setup.

import { enableProdMode } from  @angular/core ;
import { platformBrowserDynamic } from  @angular/platform-browser-dynamic ;
import { AppModule } from  ./app/app.module ;
import { environment } from  ./environments/environment ;
if (environment.production) {
   enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

The platformBrowserDynamic().bootstrapModule(AppModule) has the parent module reference AppModule. Hence, when it executes in the browser, the file that is called is index.html. Index.html internally refers to main.ts which calls the parent module, i.e., AppModule when the following code executes −

platformBrowserDynamic().bootstrapModule(AppModule);

When AppModule is called, it calls app.module.ts which further calls the AppComponent based on the boostrap as follows −

bootstrap: [AppComponent]

In app.component.ts, there is a selector: app-root which is used in the index.html file. This will display the contents present in app.component.html.

The following will be displayed in the browser −

polyfill.ts

This is mainly used for backward compatibipty.

styles.css

This is the style file required for the project.

test.ts

Here, the unit test cases for testing the project will be handled.

tsconfig.app.json

This is used during compilation, it has the config details that need to be used to run the apppcation.

tsconfig.spec.json

This helps maintain the details for testing.

typings.d.ts

It is used to manage the TypeScript definition.