Post
Ask Question

How An Angular 4 Application Created By Angular CLI Is Running

I hope you all liked my previous tutorial Structure Of First Angular Application which is about the Structure of Angular 4 applications. Please read all the previous tutorials so that you can easily understand all of this tutorial.

Today I am here with one more tutorial : “How Angular 4 Applications created by Angular CLI work.” 

First , I will describe a few files which are created by Angular CLI and these files play an important role to run the application.

angular-cli.json

  1. {  
  2.   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",  
  3.   "project": {  
  4.     "name": "new-ang-app"  
  5.   },  
  6.   "apps": [  
  7.     {  
  8.       "root": "src",  
  9.       "outDir": "dist",  
  10.       "assets": [  
  11.         "assets",  
  12.         "favicon.ico"  
  13.       ],  
  14.       "index": "index.html",  
  15.       "main": "main.ts",  
  16.       "polyfills": "polyfills.ts",  
  17.       "test": "test.ts",  
  18.       "tsconfig": "tsconfig.app.json",  
  19.       "testTsconfig": "tsconfig.spec.json",  
  20.       "prefix": "app",  
  21.       "styles": [  
  22.         "styles.css"  
  23.       ],  
  24.       "scripts": [],  
  25.       "environmentSource": "environments/environment.ts",  
  26.       "environments": {  
  27.         "dev": "environments/environment.ts",  
  28.         "prod": "environments/environment.prod.ts"  
  29.       }  
  30.     }  
  31.   ],  
  32.   "e2e": {  
  33.     "protractor": {  
  34.       "config": "./protractor.conf.js"  
  35.     }  
  36.   },  
  37.   "lint": [  
  38.     {  
  39.       "project": "src/tsconfig.app.json",  
  40.       "exclude": "**/node_modules/**"  
  41.     },  
  42.     {  
  43.       "project": "src/tsconfig.spec.json",  
  44.       "exclude": "**/node_modules/**"  
  45.     },  
  46.     {  
  47.       "project": "e2e/tsconfig.e2e.json",  
  48.       "exclude": "**/node_modules/**"  
  49.     }  
  50.   ],  
  51.   "test": {  
  52.     "karma": {  
  53.       "config": "./karma.conf.js"  
  54.     }  
  55.   },  
  56.   "defaults": {  
  57.     "styleExt": "css",  
  58.     "component": {}  
  59.   }  
  60. } 

The above file, angular-cli.json,is the configuration file in which Angular CLI sets the configuration settings. I have highlighted the code which I am going to explain below .

As you can see above we have:
  • With the project I've added project name as I have created the project name “new-ang-app” .
  • With apps the Angular CLI added root :”src” which means the root folder is src in which we will add in our application main files. And with OutDir we have dist which denotes the build folder of the application. I will explain the details about it in my later tutorial.
  • With assets we have assets, which means we will save all the assets of the application in the assets folder as images etc .
  • With index we have index.html which denotes out main html file is an index.html in which we will add all the main reference files as script and style references, and with main we have main.ts file which is the main typescript file of the application.
  • With styles we have style.css which denotes it’s a global style sheet file
  • With environments we have two main things, dev and prod. These are the type script files for development and production. I will explain the details in my future tutorial.
  • With e2e we have testing details which we will use when we will use automated testing in the application.

package.json

It’s a most important file for Angular applications. There are many settings in this file including dependencies and devDependencies .

In this file Angular CLI added all the library dependencies which we are using for the application and stores the related files in the node_modules folder.

tsconfig.json

In this there are many configuration settings for Typescript. Complie the Typescript code into es5 (Javascript) so that the browser can understand it .

styles.css

The styles.css is the global style sheet file for the whole application .

As you know, Angular CLI creates the application using Typescript. Typescript is the language which we are using with .ts extension with the Angular application. You can learn it easily because it's based on OOPS.

The app folder contains our Component and Module files which are very important parts of our application:Angular  

Now, we can understand the flow of Angular applications:

We have a few files which Angular uses when running the application and shows the output to the user,

  1. index.html
  2. main.ts
  3. app.module.ts
  4. app.component.ts
  5. app.component.html.

The process flow of Angular applications:

Angular  
Angular  
Angular  
app.component.html 
  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3.     <h1>  
  4.       Welcome to {{title}}!  
  5.     </h1>  
  6.     <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">  
  7.   </div>  
  8.   <h2>Here are some links to help you start: </h2>  
  9.   <ul>  
  10.     <li>  
  11.       <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>  
  12.     </li>  
  13.     <li>  
  14.       <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>  
  15.     </li>  
  16.     <li>  
  17.       <h2><a target="_blank" href="https://blog.angular.io/">Angular blog</a></h2>  
  18.     </li>  
  19.   </ul>  
  20.   
  21.   <app-table>  
  22.       
  23.   </app-table> 

According to the above:

Index.html

The index.html file is the main file where we can add script or style references for the whole application.This file is the start of the application. When we execute ng serve command in the command window, Angular CLI creates the bundles for the application and according to bundles for index files,  executes the next file main.ts file.

TWe need to  know about the below things:

  • <app-root> tag which is the selector in app.component.ts file
  • <link rel="icon" type="image/x-icon" href="favicon.ico"> used for the favicon for application.
  • <title> tag defines the title of application which shows when running the application in the browser.

Main.ts

In the main.ts typescript file we have platformBrowserDynamic() .bootstrapModule(AppModule). It shows about the bootstrap module. In this case we have AppModule which is the export class in app.module.ts file, so the next file is app.module.ts . We have "platformBrowserDynamic" which is added by Angular CLI by which the application will run in all the current browsers.

App.module.ts

The app.module.ts file is the main module file which is the basic building block of Angular applications. In which few section as declaration ,imports ,providers, bootstrap etc within @NgModule which I will discuss in my later tutorial. There are bootstrap section in which any one component added . The purpose of it for bootstrapping the angular application and need the component to bootstrap the application so in the above case we have AppComponent which is the export class in app.component.ts.

app.component.ts

In the app.component.ts file we have below things within @component decorator. I will discuss about decorator in my later tutorial.

  • selector: 'app-root'
    It's showing the selector which you can see <app-root> in the index.html file

  • templateUrl: './app.component.html'
    It's showing the app.component.html with templeteUrl so the html will run which is in app.component.html file.

  • styleUrls: ['./app.component.css']
    It's showing the style file which is associated with app.component.html page.

App.component.html

As we can see in the above it’s added with the templateurl in app.component.ts file which shows the app.component.html file will render as html.

Now according to the above process  the below output will be displayed for Angular applications which we have created with Angular CLI.

Angular

So, you can easily understand, how the Angular 4 default application will run with the help of the above details .

I hope you liked this -- please share it if you did. My next tutorial will be about the Component and Component Life Cycle Hooks.