Angular 5 + Asp .Net Core 2.0 with Microsoft.DotNet.Web.Spa.ProjectTemplates Part 2

Angular Project Structure

after the first article now we want to show in detail the structure and the components of the project.

After the creation of the project we can show the folder product for show the project structure

1.“e2e” folder containing test files, configurations for performing end to end testing on browser without user intervention

2.“node_modules” folder contains all packages restored as per package.json

3.“src/app” folder is the main application development folder containing template HTML files, TS files, CSS file components.

4. "Controllers" folder how can create our back end application

5. StartUp file is most important you can show this article to know the usefulness of this class

Now we want to know how we can read my angular application to know the the different parts of my project

First angular execute the main.ts file

the main.ts file call the AppModule (app.module.ts)

app.module.ts file.

An Angular module class describes how the application parts fit together. Every application has at least one Angular module, the root module that you bootstrap to launch the application. You can call it anything you want. The conventional name is AppModule.

After the import statements, you come to a class adorned with the @NgModule decorator

The @NgModule decorator identifies AppModule as an Angular module class (also called an NgModule class). @NgModule takes a metadata object that tells Angular how to compile and launch the application.

• imports — the BrowserModule that this and every application needs to run in a browser.
• declarations — the application's lone component, which is also ...
• bootstrap — the root component that Angular creates and inserts into the index.html host web page.

BrowserModule – The browser module is imported from @angular/platform-browser and it is used when you want to run your application in a browser.

CommonModule – The common module is imported from @angular/common and it is used when you want to use directives - NgIf, NgFor and so on.

FormsModule – The forms module is imported from @angular/forms and it is used when you build template driven forms.

RouterModule – The router module is imported from @angular/router and is used for routing RouterLink, forRoot, and forChild.

HttpClientModule –The HttpClientModule is imported from @angular/common/http and it used to initiate HTTP request and responses in angular apps. The HttpClient is more modern and easy to use the alternative of HTTP.

AppComponent (app.component.ts) is the root component called with the app.module.ts line 32.

app.component.ts and app.component.html

We display the AppComponent in the index.html file, we calling them by the tag selector = 'app-root' show this in index.html file line 12

when app.component.html displayed in index.html file she is contains two tags <app-nav-menu></app-nav-menu> and <router-outlet></router-outlet>

1. <app-nav-menu></app-nav-menu>

this tag display the navigation bare component

2 . <router-outlet></router-outlet>

With this tag we entered in the SPA (Single Page Application) Architecture.

what is the SPA : when we navigate in our application we see that URL of the browser change, the question is when we show the different URL that we display. does we show for each URL the page correspondent ?

No we show different URL but only one page is displayed : index.html the container is <router-outlet></router-outlet> tag.

in our example we well show firstly the navigation bar page in the left(<app-nav-menu></app-nav-menu> tag) and the home page in the right (line 26 in the app.module.ts file)

We work with Bootstrap 3.3.7 in the HTML pages.

after in the navigation bare we can show different page by clicking in different links.

Angular Cli

Angular CLI is a Command Line Interface to build, deploy and test angular applications. It automates lot of development activities to improve code quality and reduce development time.

Install Angular Cli.

npm install –g @angular/cli

Now i need to add a new component in my application

using Angular Cli i can do that with this command line.

ng generate component product

or

ng g c product

the .spec.ts file is the file that we need to test product component.

To show the product page we need to make change in app.module.ts file and

nav-menu.component.html

other commande line

1. ng generate class productDetail
2. ng generate directive product-item
3. ng generate service product
4. ng generate interface product
5. ng doc – It create docs for the project
6. ng generate pipe numeric-only
7. ng generate enum login-types
8. ng generate module product-report
9. ng test

1.Angular CLI loads “angular-cli.json” and runs “karma.conf.js” as specified in angular-cli file

2.Karma opens browser specified in the Karma Configuration

3.Karma instructs browser to run src/test.ts using Testing Framework i.e Jasmine Framework

4.It runs all unit test cases specified in all files ending with “.spec.ts” in src directory

5.Karma shows test results on the browser

6.Karma runs under watch mode.so, It re-run automatically when file changes are detected

Summary