Angular

Understanding Application Files, Angular 2 - Part Three

Hi friends!

In our last article, we have seen that the npm was installed successfully without any errors; which is great. Please do read my previous articles before you go through this one.

We have all the necessary files gathered in our Angular application. Let’s go ahead and understand what they are going to do.


Package.json

Generally, our Angular application requires libraries or modules specified in package.json file. So, whenever we run npm install command prompt, all the dependencies are installed to the folder named node_modules, as shown below.

 
 
Now, for our Angular application, we are going to use TypeScript which is nothing but a super script of JS. So, coming back to the script in package.json as shown below.
  1. {  
  2.     "name": "angular",  
  3.     "version": "1.0.0",  
  4.     "scripts": {  
  5.         "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",  
  6.         "lite": "lite-server",  
  7.         "postinstall": "typings install",  
  8.         "tsc": "tsc",  
  9.         "tsc:w": "tsc -w",  
  10.         "typings": "typings"  
  11.     },  
  12.     "license": "ISC",  
  13.     "dependencies": {  
  14.         "@angular/common": "2.0.0-rc.1",  
  15.         "@angular/compiler": "2.0.0-rc.1",  
  16.         "@angular/core": "2.0.0-rc.1",  
  17.         "@angular/http": "2.0.0-rc.1",  
  18.         "@angular/platform-browser": "2.0.0-rc.1",  
  19.         "@angular/platform-browser-dynamic": "2.0.0-rc.1",  
  20.         "@angular/router": "2.0.0-rc.1",  
  21.         "@angular/router-deprecated": "2.0.0-rc.1",  
  22.         "@angular/upgrade": "2.0.0-rc.1",  
  23.         "systemjs": "0.19.27",  
  24.         "es6-shim": "^0.35.0",  
  25.         "reflect-metadata": "^0.1.3",  
  26.         "rxjs": "5.0.0-beta.6",  
  27.         "zone.js": "^0.6.12",  
  28.         "angular2-in-memory-web-api": "0.0.7",  
  29.         "bootstrap": "^3.3.6"  
  30.     },  
  31.     "devDependencies": {  
  32.         "concurrently": "^2.0.0",  
  33.         "lite-server": "^2.2.0",  
  34.         "typescript": "^1.8.10",  
  35.         "typings": "^0.8.1"  
  36.     }  
  37. }  
When mouse over on script, we will see a text “Run by npm start command”. So, when we run this command, it is going to start TypeScript compiler and it is also going to run lite-server which is going to host our application.

And we also going to start TypeScript compiler in watch mode. That means, any change in code is automatically compiled and browser is refreshed.

Then, we have postinstall over in scripts. It means, once we start installing dependencies, install type installs json files.

typings.json

Now, open the typings.json file.

  1. {  
  2.     "dependencies": {  
  3.         "zone.js": "github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89"  
  4.     },  
  5.     "devDependencies": {},  
  6.     "ambientDependencies": {  
  7.         "angular-protractor": "github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#64b25f63f0ec821040a5d3e049a976865062ed9d",  
  8.         "core-js": "registry:dt/core-js#0.0.0+20160317120654",  
  9.         "hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7",  
  10.         "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c",  
  11.         "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729",  
  12.         "selenium-webdriver": "github:DefinitelyTyped/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#a83677ed13add14c2ab06c7325d182d0ba2784ea",  
  13.         "webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4"  
  14.     }  
  15. }  

It is clearly shown that to install all the dependencies once, we install package.json.

The reason for this is that our application might use JavaScript libraries that the TypeScript compiler can’t recognize. So, we make TypeScript aware of JavaScript libraries when we build application.

Tsconfig.json

This contains the configuration to guide the TypeScript Compiler for generating JavaScript files.

  1. {  
  2.     "dependencies": {  
  3.         "zone.js": "github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89"  
  4.     },  
  5.     "devDependencies": {},  
  6.     "ambientDependencies": {  
  7.         "angular-protractor": "github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#64b25f63f0ec821040a5d3e049a976865062ed9d",  
  8.         "core-js": "registry:dt/core-js#0.0.0+20160317120654",  
  9.         "hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7",  
  10.         "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c",  
  11.         "node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729",  
  12.         "selenium-webdriver": "github:DefinitelyTyped/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#a83677ed13add14c2ab06c7325d182d0ba2784ea",  
  13.         "webpack": "github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4"  
  14.     }  
  15. }  
You might be wondering why TypeScript generates JS files. This is because our browser can understand only JavaScript. So whenever we write TS code, it has to be converted to the JS code.

Systemjs.config

This deals with loading with modules and default file extensions, as shown in below figure.

  1. (function(global) {  
  2.     // map tells the System loader where to look for things  
  3.     var map = {  
  4.         'app': 'app', // 'dist',  
  5.         'rxjs': 'node_modules/rxjs',  
  6.         'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',  
  7.         '@angular': 'node_modules/@angular'  
  8.     };  
  9.     // packages tells the System loader how to load when no filename and/or no extension  
  10.     var packages = {  
  11.         'app': {  
  12.             main: 'main.js',  
  13.             defaultExtension: 'js'  
  14.         },  
  15.         'rxjs': {  
  16.             defaultExtension: 'js'  
  17.         },  
  18.         'angular2-in-memory-web-api': {  
  19.             defaultExtension: 'js'  
  20.         },  
  21.     };  
  22.     var packageNames = ['@angular/common', '@angular/compiler', '@angular/core', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ];  
  23.     // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }  
  24.     packageNames.forEach(function(pkgName) {  
  25.         packages[pkgName] = {  
  26.             main: 'index.js',  
  27.             defaultExtension: 'js'  
  28.         };  
  29.     });  
  30.     var config = {  
  31.         map: map,  
  32.         packages: packages  
  33.     }  
  34.     // filterSystemConfig - index.html's chance to modify config before we register it.  
  35.     if (global.filterSystemConfig) {  
  36.         global.filterSystemConfig(config);  
  37.     }  
  38.     System.config(config);  
  39. })(this);  

Style.css

This is nothing but style for our HTML.

Index.html

As you can see below, this file is broken into three parts.

First part is with JavaScript libraries.

  1. <!-- 1. Load libraries -->  
  2. <!-- Polyfill(s) for older browsers -->  
  3. <script src="node_modules/es6-shim/es6-shim.min.js"></script>  
  4. <script src="node_modules/zone.js/dist/zone.js"></script>  
  5. <script src="node_modules/reflect-metadata/Reflect.js"></script>  
  6. <script src="node_modules/systemjs/dist/system.src.js"></script>  

Second part is "Configure System.js".

  1. <!-- 2. Configure SystemJS -->  
  2. <script src="systemjs.config.js"></script>  
  3. <script>  
  4.     System.import('app').catch(function(err) {  
  5.         console.error(err);  
  6.     });  
  7. </script>  
  8. </head>  

Third part is "Display the application"

  1. <!-- 3. Display the application -->  
  2.   
  3. <body>  
  4.     <h4>header4 from index.html</h4>  
  5.     <my-app>Loading...</my-app>  
  6. </body>  

app Folder

In main.ts, this is where our application is going to start from. We have main.ts and main.js files. Just ignore the JS files because those are the files generated by TypeScript compiler.

In app.Component.ts, we can see selector:”my-app”, It means wherever we find my-app in HTML, it replaces with templates below it.

 

In our next article, we shall understand how "Hello world" in Angular 2 application actually happens.

Thanks for reading my article, Stay tuned.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs