Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Getting Started With Angular 2 and Going Over Our Application Files

DZone's Guide to

Getting Started With Angular 2 and Going Over Our Application Files

In this article, we download and set up our development environments, and create the necessary JSON, HTML, and TypeScript to get started.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

In our previous article we have seen the architecture of an Angular 2 app, for reference click below link,

Architecture of Angular 2 applications

In this article,the first thing we have to do is to download and install Node.js from the link given below.

https://nodejs.org/en

Image title

Node comes with the tool called npm (Node Package Manager). This tool is basically required to install all dependencies and so on.

After downloading Node.js from the link given above, the next thing which we need is an IDE or text editor.

In our tutorials, we shall use Visual Studio Code, which is very helpful for building Angular applications.

You can download VS Code from the link given below.

https://code.visualstudio.com/

Image title

Now, I have good news and bad news. The bad news is that Angular 2 requires a lot of files and configuration. It’s not like an HTML file, where we save a file with a .html extension and its good to go.

The good news is that I have all the required files in the link given below from where you can download and start.

https://1drv.ms/f/s!ArxBJ3qPXoQqmmcdt5h1ydUaqjJ_

Once you download the template folder, open the Command Prompt (Run as an administrator) and run the command given below.

>> npm install 

This will install all the dependencies and the Directives structure. This execution will be a bit time-consuming.

If we are done with no npm errors, then we are good to start with our Hello World Application.

In the next section, we shall give an overview of the application files.


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

Image title

Package.json

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

Image title

Now, for our Angular application, we are going to use TypeScript which is a superscript of JS. So, coming back to the script in package.json as shown below:

{  
   "name":"angular",
   "version":"1.0.0",
   "scripts":{  
      "start":"tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "lite":"lite-server",
      "postinstall":"typings install",
      "tsc":"tsc",
      "tsc:w":"tsc -w",
      "typings":"typings"
   },
   "license":"ISC",
   "dependencies":{  
      "@angular/common":"2.0.0-rc.1",
      "@angular/compiler":"2.0.0-rc.1",
      "@angular/core":"2.0.0-rc.1",
      "@angular/http":"2.0.0-rc.1",
      "@angular/platform-browser":"2.0.0-rc.1",
      "@angular/platform-browser-dynamic":"2.0.0-rc.1",
      "@angular/router":"2.0.0-rc.1",
      "@angular/router-deprecated":"2.0.0-rc.1",
      "@angular/upgrade":"2.0.0-rc.1",
      "systemjs":"0.19.27",
      "es6-shim":"^0.35.0",
      "reflect-metadata":"^0.1.3",
      "rxjs":"5.0.0-beta.6",
      "zone.js":"^0.6.12",
      "angular2-in-memory-web-api":"0.0.7",
      "bootstrap":"^3.3.6"
   },
   "devDependencies":{  
      "concurrently":"^2.0.0",
      "lite-server":"^2.2.0",
      "typescript":"^1.8.10",
      "typings":"^0.8.1"
   }
}

When we mouse over the script, we will see the prompt, “Run by npm start command.” So, when we run this command, it is going to start the TypeScript compiler and it is also going to run the lite-server which is going to host our application.

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

Then, we have to enable post-install over in our scripts. This means that once we start installing dependencies, install type installs our JSON files.

typings.json

Now, open the typings.json file.

{  
   "dependencies":{  
      "zone.js":"github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89"
   },
   "devDependencies":{  

   },
   "ambientDependencies":{  
      "angular-protractor":"github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#64b25f63f0ec821040a5d3e049a976865062ed9d",
      "core-js":"registry:dt/core-js#0.0.0+20160317120654",
      "hammerjs":"github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7",
      "jasmine":"github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c",
      "node":"github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729",
      "selenium-webdriver":"github:DefinitelyTyped/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#a83677ed13add14c2ab06c7325d182d0ba2784ea",
      "webpack":"github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4"
   }
}

Next, 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 the application.

Tsconfig.json

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

{  
   "dependencies":{  
      "zone.js":"github:gdi2290/typed-zone.js#66ea8a3451542bb7798369306840e46be1d6ec89"
   },
   "devDependencies":{  

   },
   "ambientDependencies":{  
      "angular-protractor":"github:DefinitelyTyped/DefinitelyTyped/angular-protractor/angular-protractor.d.ts#64b25f63f0ec821040a5d3e049a976865062ed9d",
      "core-js":"registry:dt/core-js#0.0.0+20160317120654",
      "hammerjs":"github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#74a4dfc1bc2dfadec47b8aae953b28546cb9c6b7",
      "jasmine":"github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c",
      "node":"github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729",
      "selenium-webdriver":"github:DefinitelyTyped/DefinitelyTyped/selenium-webdriver/selenium-webdriver.d.ts#a83677ed13add14c2ab06c7325d182d0ba2784ea",
      "webpack":"github:DefinitelyTyped/DefinitelyTyped/webpack/webpack.d.ts#95c02169ba8fa58ac1092422efbd2e3174a206f4"
   }
}

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 JS code.

Systemjs.config

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

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': {
            main: 'main.js',
            defaultExtension: 'js'
        },
        'rxjs': {
            defaultExtension: 'js'
        },
        'angular2-in-memory-web-api': {
            defaultExtension: 'js'
        },
    };
    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', ];
    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = {
            main: 'index.js',
            defaultExtension: 'js'
        };
    });
    var config = {
        map: map,
        packages: packages
    }
    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) {
        global.filterSystemConfig(config);
    }
    System.config(config);
})(this);

Index.html

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

The first part contains our JavaScript libraries.

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

The second part is our "Configure System.js" file.

<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) {
console.error(err);
});
</script>

</head>

The third part contains the code that will display the application in the browser.

<!-- 3. Display the application -->

<body>
<h4>header4 from index.html</h4>
<my-app>Loading...</my-app>
</body>

App Folder

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

In app.Component.ts, we can see the selector: my-app. Wherever we find my-app in the HTML, it uses the below templates structure.

Image title

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

Thanks for reading my article, stay tuned!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
angular ,angular 2 ,web dev ,node.js

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}