Click here to Skip to main content
13,258,269 members (41,950 online)
Click here to Skip to main content
Add your own
alternative version

Stats

15K views
293 downloads
19 bookmarked
Posted 2 Aug 2017

Learn Angular in 10 days – Day 2

, 24 Oct 2017
Rate this:
Please Sign up or sign in to vote.
A 10 Days series on Latest version of Angular - Today we will learn how to get started with Angular. We will discuss each andevery step in detail.

So you finally completed TypeScript fundamentals and ready for some Angular.

Today we will learn how to get started with Angular. We will discuss each and every step in detail.

Complete Series

  1. Day 1 – Part 1
  2. Day 1 – Part 2
  3. Day 2
  4. Day 3
  5. Day 4 – Part 1
  6. Day 4 - Execution trick
  7. Day 4 – Part 2
  8. Day 4 – Part 3
  9. Day 5 (Coming soon)
  10. Day 6 (Coming soon)
  11. Day 7 (Coming soon)
  12. Day 8 (Coming soon)
  13. Day 9 (Coming soon)
  14. Day 10 (Coming soon)

Contents

What is Angular?

In Day 1, we saw the basic definition of Angular. It was as follows.

"It’s a JavaScript framework for building HTML based dynamic applications".

I will explain why it is termed as a framework in the end of the series.

Angular architecture

An Angular application consists of the following things.

Components

As I said before, Angular allows us to develop our UI application in a Component oriented style.

Component oriented style is a new UI design technique proposed in HTML5. Other than Angular many other major technologies like React, Polymer adapted this methodology too.

According to this approach, UI should be considered as a combination of composable and reusable Web Components.

Instead of looking at UI as a one big piece of HTML, break it into multiple small logical web components. Each component represents a small part of our UI. Creating a component is like creating a new HTML element.

It will have its own independent existence and will not affect other web components.

Every component will be a combination of three things: HTML, some dynamic logic, styles.

Each component will be designed in such a way that, its logic and style won’t affect any other component’s logic or style.

For instance, let’s say we want to design following UI.

In normal approach, it is a simple HTML file but in Component oriented style it’s a combination of lot of components. Let’s identify those components.

As you can see, multiple components are placed together to make up the final UI. A component called RootComponent wrapped the other components into one.

Don’t worry if you are not 100% clear about the component word, you will be more confident once we start with a demo.

Services

Services are injectable application logic in the Angular application. We will explore more about it later in the series.

Pipes

Pipes represent display-value transformation logic in the Angular application. We will explore it later in the series.

Directives

Directives will be used when we want to modify the default behavior of the DOM element. We will explore it later in the series.

Angular Modules

Components, Directives, Services and Pipes are boxed into Angular Modules (AKA NgModules). It’s a logical container for related Angular constructs.

A single Angular application may have more than one Angular Module defined, one of which will be bootstrapped in the beginning.

Note:

Overall we spoke about three types of Modules.

TypeScript Modules, JavaScript Modules and Angular Modules. All are different concepts and different meaning. Let’s revise all of them.

  • JavaScript Module allows us to group JavaScript code into one logical unit. It will be done via Module Loaders and Module Formatters.
  • TypeScript Module is a way to do the same thing in Typescript world. When TypeScript Module is compiled, we will get JavaScript Module as final product.
  • Angular Module is an Angular concept. Angular Module is a logical parent of all other Angular constructs (components, directives, pipes and services). We can call Angular Module a logical encapsulation whereas JavaScript Module is a physical encapsulation.

Creating Angular Project

It has three steps

  1. Setup the project
  2. Create the Root Component
  3. Use the component

Setup the project

Simply create a new folder "AngularProject" anywhere in your machine.

1. Create Root folder

2. Download Angular Framework

In order to start with our Angular Project, first we need to download the framework which is available as a collection of JavaScript libraries.
Here is the list of those libraries.
  • @angular/common
  • @angular/compiler
  • @angular/core
  • @angular/forms
  • @angular/http
  • @angular/platform-browser
  • @angular/platform-browser-dynamic
  • @angular/router

We can download this files using "npm". It involves simple two Steps.

1. Create package.json

Create a new file called "package.json" in the "AngularProject" folder with the following content.

{
  "name": "myfistproject",
  "version": "1.0.0"
}

If you don’t want to create then above file manually, then open Command prompt and navigate to the "AngularProject" folder and fire below command.

NPM init

(Please note, its "NPM" not "npm")

It will ask for few command line inputs.

Provide package name as "myfirstangularproject" and simply skip everything else.

(Just press enter till it says "Is this ok? (yes)").

Simply type "yes" and press enter.

It will create a new file called "package.json". You may notice some additional entries in the file other than "name" and "version". Simply ignore them.

2. Download Files

Write following command in Command prompt.

npm install @angular/common @angular/core @angular/compiler
@angular/forms @angular/http @angular/platform-browser @angular/platform-browser-dynamic
@angular/router --save

It will create a new folder called "node_modules" and download all the files inside it in one go.

Note:

All the Angular Libraries are Modular. All of them are written in "UMD" Module format. "UMD" stands for Universal Module definition and it’s a Module formatter which is compatible with both "AMD" and "CommonJS" format. It makes both "CommonJs" and "AMD" code possible to work with Angular.

You may have noticed the additional "--save" flag passed with "npm" command.

It will create a new entry inside "package.json" called "dependencies" as follows.

{
  "name": "myfistproject",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common": "^4.3.1",
    "@angular/compiler": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.3.1",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1"
  }
}

This file makes future reinstallation very easy.

Next time only fire below command.

npm install

It will read the "package.json" file and based on dependencies section download everything.

Why should I reinstall?
  • Normally when it comes to deployment, node_modules folder will be skipped to reduce setup size. In the server machine (where the app will be installed) simply using above command all files will be downloaded again.
  • Also upgrading will be easier. Simply change the version in file and execute "npm install" command.

3. Download other Angular dependencies

Angular is dependent on some third party libraries. They are Zone.js, Core-js and rxjs.

In order to get started with Angular you don’t need to have detail knowledge on these libraries.

All three of these libraries are internally used by Angular files.

  • Core-js: Angular JavaScript files contain a lot of code in ES2015 standard. Including this library in our project make ES2015 code work in ES5 compatible browsers.
  • Zone.js: is used to create an execution environment for our code.
  • RxJS: It stands for reactive extensions. Please don’t get confused between RxJS and ReactJS. ReactJS is UI designing library by Facebook where as RxJS is a library used for reactive programming. Angular uses this library internally. We will see some of them in action later in this series.

Note:

You do not need to know Reactive Programming or RxJS in order to build even the most complex applications with Angular.

To download these files write the following command in Command Prompt.

npm install zone.js rxjs core-js --save

4. Install TypeScript

We are going to write our code in TypeScript. So we need TypeScript compiler.

We have already installed TypeScript compiler in Day 1 of this series. If you missed it you can do it using following command.

npm install typescript -g

5. Configure TypeScript

Create a new folder inside the "AngularProject" folder and call it "TypeScriptFiles".

This folder is going to be our root folder for all the future TypeScript files.

Now create TypeScript configuration file, "tsconfig.json" inside this folder with following contents.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

We have already discussed each of the above CompilerOptions in Day 1.

In Day 1 we have also discussed about "Type Definition files" which is a way to teach TypeScript about external JavaScript files. Considering that, our next move will be downloading Angular "Type Definition files".

The good news is, no need to download "Type Definition files" manually. Angular files are downloaded as package using "npm" and fortunately this package contains both JavaScript file and respective "Type Definition file".

Let’s examine one of the folders. Open the "node_modules/@angular/platform-browser-dynamic" folder.

6. Setup Web Server

We will also require one simple web server for testing purpose. In Day 1 of this series we saw demonstration of "http-server". This time let’s look at the one called "lite-server".

Install it using "npm" as follows.

npm install lite-server -g

7. Download Module loader

In Day 1 we spoke about Module Formatters and Module loaders.

We have seen two demos.

  1. JavaScript Module demo with AMD + SystemJs
  2. TypeScript Module demo

(If you missed any of them, I strongly recommend you to go through it before continuing.)

If you remember about second demo, we executed generated JavaScript in the "Node" environment using the "node" command and to our surprise, the demo worked without any Module loader. The reason is very simple. "Node" have inbuilt support for "CommonJS" format which is the default Module formatter of TypeScript.

Our Angular project is going to follow "CommonJS" format but execution environment is going to be browser. Hence we need Module loader this time.

Fire the following command in command prompt.

npm install systemjs --save

Here we complete the setup process.

 

Just to conclude, you should have following things with you.

  • “AngularProject” folder
  • “TypeScriptFiles” folder inside “AngularProject” Folder.
  • “tsconfig.json” file inside “TypeScriptFiles” folder with following contents
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}
  • “package.json” inside “AngularProject” folder with following contents
{
  "name": "myfistproject",
  "version": "1.0.0",
  "dependencies": {
    "@angular/common": "^4.3.1",
    "@angular/compiler": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/forms": "^4.3.1",
    "@angular/http": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "systemjs": "^0.20.17",
    "zone.js": "^0.8.14"
  }
}

Create Root Component

If you remember the Angular Architecture, UI is composed as tree of Angular components – one component will be placed besides another component, both of which may be wrapped up by one outer component and so on. This component hierarchy starts with one Root Component.

Here are the steps for creating such Root Component.

  • Create Angular Module
  • Create Angular Component
  • Add Component to Module
  • Bootstrap Module
  • Bootstrap Component

1. Create Angular Module

As I said before, everything in Angular belongs to some Angular Module. The same rule is applied for the Root Component. So it’s time to create our very first Angular Module.

It can be done by creating a TypeScript class decorated with the "NgModule" decorator.

What is NgModule?

"NgModule" is a decorator defined inside the "@angular/core" library. In order to use it, first we need to import it as follows.

import {NgModule} from
"../../node_modules/@angular/core/core"

Do you remember "moduleResolution" option we discussed in Day 1?

(I strongly recommend you to go through it again, if you missed it or unable to recollect it.)

According to explanation we had in Day 1, when "moduleResolution" is set to "node" we can rewrite the above statement as follows.

import {NgModule} from "@angular/core"

Creating Module

First create a new folder inside the "TypeScriptFiles" folder called "AppModule".

Then create a new TypeScript file called "app.module.ts" with following content.

import {NgModule} from "@angular/core"
@NgModule()
class AppModule{

}

2. Create Angular Component

Finally we reach the point where we will create our very first Angular component. It can be done by creating a class decorated with "Component" decorator defined inside "@angular/core" library.

Create a new TypeScript file called "app.component.ts" with following code snippet.

import {Component} from "@angular/core"

@Component({
selector:'app-component',
template:`<h1>Welcome to Learn Angular in 10 days series</h1>
<i>Here is the Day 2</i>`
}
)
class AppComponent{

}

You can see two parameters passed to the "Component" decorator.

  1. selector – a simple text representing the tag name of component.
  2. template – UI part of the component.

No need to worry about these two attributes right now. You will see both of them in action very soon.

3. Add Component to Module

It can be done using "delcarations" option in "NgModule" decorator.

Check the below code.

import {NgModule} from "@angular/core"
@NgModule({
    declarations:[AppComponent] //New statement
})
class AppModule{

}

(Check line no 4 in above code, a new "declarations" section is added).

Are we missing something?

Have we forgot about something? Try to think for a minute before continue reading next line.

We forgot about TypeScript Modules. AppComponent and AppModule both are written in separate TypeScript files hence both of them will be considered as independent TypeScript Modules. We have to export AppComponent in app.component.ts and import in "app.module.ts".

So here is the final code.

app.module.ts
import {NgModule} from "@angular/core"
import {AppComponent} from "./app.component"
@NgModule({
    declarations:[AppComponent]
})
class AppModule{

}
app.component.ts
import {Component} from "@angular/core"
@Component({
selector:'app-component',
template:`<h1>Welcome to Learn Angular in 10 days series</h1>
<i>Here is the Day 2</i>`
}
)
export class AppComponent{

}

4. Bootstrap the Module

As I said in the beginning, a single Angular application may have more than one Angular Module defined, but only one of them will be bootstrapped in the beginning. Unlike in AngularJS this bootstrapping process has to be done manually with the help of "platformBrowserDynamic" function defined inside the "@angular/platform-browser-dynamic" library.

First attach export keyword to AppModule class. It allows us to import it in another file.

...
export class AppModule{
...

Then create a new file called "Main.ts" in the "TypeScriptFiles" folder with following content.

import {platformBrowserDynamic} from "@angular/platform-browser-dynamic"
import {AppModule} from "./AppModule/app.module"
platformBrowserDynamic().bootstrapModule(AppModule);

Angular is not limited to only working in the browser. It can be used to write code which can execute in mobile devices using Ionic or some similar framework. This is why we need to tell Angular exactly how we want it to bootstrap itself, in our case we are running in the browser so we use the platformBrowserDynamic function to bootstrap our application.

5. Bootstrap the Component

Later in the series you will see lot of new Modules coming into picture with more than one Components For this initial demo we will stick to one Module and one Component.

Now the question is, if one Angular Module is going to have more than one component how Angular identifies the root component.

It can be done by using the "bootstrap" option in "NgModule" decorator.

Check the below code.

...
import {AppComponent} from "./app.component"
@NgModule({
    declarations:[AppComponent],
    bootstrap:[AppComponent]
})
export class AppModule{
...

6. Compile

Open command prompt, navigate to "TypeScriptFiles" folder and fire "tsc" command.

It should compile successfully.

[If you are facing any error during compilation, I strongly recommend you to go through above steps once again, read each and every statements and only continue after you get success]

Use the component

Now it’s finally time to use the component created above in a real web application.

1. Create Html File

Our very first step will be creating startup HTML file. Create a simple HTML file "Index.html" in the "AngularProject" folder.

2. Include Non Modular script files

Include following three JS files in the "index.html"

  • zone.js
  • shim.min.js (which is core-js library)
  • system.src.js

Final HTML look like following

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <script src="/node_modules/core-js/client/shim.min.js"></script>
    <script src="/node_modules/zone.js/dist/zone.js"></script>
    <script src="/node_modules/systemjs/dist/system.src.js"></script>
  </head>
  <body>
  </body>
</html>

3. Load Main.js file

Load Main.js file using SystemJs loader in "index.html". Check the below code.

...    
    <script>  
      SystemJS.import("/TypeScriptFiles/Main.js");
    </script>
</head>
<body>
...

No need to include any other JS files. All the necessary files will be loaded automatically at runtime by our Module Loader (SystemJs) based on need.

  1. Zone.js, shim.min.js and system.src.js are manually included because they don’t contain Modular code (they are not following any Module formatter). Hence Module loader won’t be able load any of them at runtime.
  2. Main.js is our startup file. It’s an entry point. Hence it need to be included manually.

4. Use the root component

Use the root component’s selector ("app-component") as a tag in "index.html" as follows.

    </script>
  </head>
  <body>
      <app-component>Component is Loading.....</app-component>
  </body>
</html>

5. Execute

Open Command prompt. Navigate to folder "AngularProject". Now fire "lite-server" as follows.

  • It will start a server in local machine (in port no 3000 by default) pointing to "AngularProject" folder.
  • Launch the browser (Internet explorer) with hosting URL (http://localhost:3000).
    (I recommend you to open chrome with same URL. Chrome will make our life easy when it comes to JavaScript to debugging.)
  • By default lite-server executes the "index.html" in root folder so need to put the filename in address bar.

Note:

I recommend you to use two different command prompts. One pointing to "TypeScriptFiles" folder. It will be used for compiling typescript files. Second for "lite-server". It will keep your life easy and won’t let you concentrate on learning.

6. Check the output

Unfortunately in the first go we won’t get the expected output. We get something like below.

Bugs and Solutions

1. Identify the bug

In order to identify the reason for not getting expected output, open developer tools in browser and check if there is any JavaScript error. (In Chrome you can get the developer tools by pressing F12 and then check the console tab for JavaScript error.)

As you can see, there are four errors. Let’s concentrate on first error.

Error is related to loading "@angular/platform-browser-dynamic".

Understand the problem

In our case SystemJs (Module Loader) is responsible for loading other files at runtime. It means SystemJs is unable to find "@angular/platform-browser-dynamic".

There are two very strange things happening.

  1. "@angular" is a folder inside "node_modules" folder which have a sub folder called "platform-browser-dynamic". It means SystemJs is trying to load folder. Module Loaders are meant for loading JS file dynamically and in our case it is trying to load folder.
  2. Secondly, @angular folder is present inside the "node_modules" folder but SystemJs is searching for it inside root folder. (Examine the error carefully, it says, "Failed to load ‘:3000/@angular/platform-browser-dynamic’_").

Open "main.js" file. It contains following code.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");
var app_module_1 = require("./AppModule/app.module");
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule);

If you remember we have written following statement in our TypeScript file.

import {NgModule} from ("@angular/platform-browser-dynamic"

Hence generate JS file contain following statement.

var platform_browser_dynamic_1 = require("@angular/platform-browser-dynamic");

It is supposed to be following.

var platform_browser_dynamic_1 = require("/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js");
Solution for the problem

Solution is "teaching". You have to teach SystemJs that, loading "@angular/platform-browser-dynamic" means loading "/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js". In fact we have to do it for every Angular library. It can be done by creating SystemJs Configuration file.

2. Configure System JS

Create a new JS file inside "AngularProject" folder and name it "system.config.js".

Now put following content inside it.

(function (global) {
  System.config({
    map: {
      '@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
      '@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
      '@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
      '@angular/router': '/node_modules/@angular/router/bundles/router.umd.js',
      '@angular/forms': '/node_modules/@angular/forms/bundles/forms.umd.js',
    }
  });
})(this);

Include above file in "index.html" after system.src.js and before main.js as follows.

<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="system.config.js"></script>
<script>
  SystemJs.import("/TypeScriptFiles/Main.js");
</script>

3. Recheck the output

lite-server is very smart. It keep a watch on all the files on your "TypeScriptFiles" folder and automatically refresh the browser if any of the files get changed.

Check the output after including "system.config.js" file.

This time you will get following error.

Understand the problem

Take a while and try to see if you can think about reason for this error.

Check the error carefully. Path is correct, file name is wrong. It is looking for a file called "app.module" which we don’t have. We have "app.module.js"

Solution for this problem

Solution is again teaching. We have to teach SystemJs to add default extension to all the requests.

4. Reconfigure System JS

Add some more settings to "system.config.js" as follows.

(function (global) {
  System.config({
    map: {
      '@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
      '@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
      '@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
      '@angular/router': '/node_modules/@angular/router/bundles/router.umd.js',
      '@angular/forms': '/node_modules/@angular/forms/bundles/forms.umd.js',
    },
     packages: {
      'TypeScriptFiles': {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Check the new packages section above.

It contains an entry which teaches SystemJs to add "js" extension to all requests made for files inside "TypeScriptFiles" folder.

5. Recheck the output

This time error will be as follows.

Again just like before instead of "node_modules" the root folder is considered.

But this time adding one entry inthe map section of SystemJs will not solve the issue because "rxjs" is a big library. It has lot of JavaScript files inside it. Two of them are "Observable.js" and "Subject.js".

We have to add one entry for one such JavaScript file. For example, for the above error we have to following entry in map section.

"rxjs/Observable": "/node_modules/rxjs/Observable.js"

Note: Don’t add above entry in "system.config.js".

6. Reconfigure System JS

Adding one entry for one file will be too much of work, so let’s do it in a shortcut way. We will use of both "map" and "packages" to achieve it.

(function (global) {
  System.config({
    map: {
      '@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
      '@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
      '@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
      '@angular/router': '/node_modules/@angular/router/bundles/router.umd.js',
      '@angular/forms': '/node_modules/@angular/forms/bundles/forms.umd.js',

      'rxjs':'/node_modules/rxjs',
    },
     packages: {
      'TypeScriptFiles': {
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

As you can see, there is a new entry in both "map" and "packages" section now.

7. Recheck the output

This time error will be very different.

This time error is about something called "BrowserModule"

"BrowserModule"is an Angular Module defined inside "@angular/platform-browser" library which contains services which will be required to launch application in browser.

8. Load BrowserModule

We can make "BrowserModule" load when "AppModule" is bootstrapped by using "import" option in the "NgModule decorator. Here is the complete revamped code AppModule.

9. Recheck the Output

This time we have made a change in the TypeScript file which needs recompilation.

Recompile it and check the output.

Finally our very first Angular output is here.

I request you to try all of the above steps one after the other. Implement solution only after error is properly understood. Proceed further with the series only after you feel confident about Day 1 and Day 2.

Restructured Steps

Above steps are very important from learning point of view. It will give you nice idea about internals of Angular project and make it easy to customize project structure as per the need.

Follow the below steps in case you are interested to get in one go. (Preferred way in real time project)

Complete execution process

Step 1

Browser renders contents in "index.html" file. In this situation, "app-component" tag will be a simple HTML tag and get displayed as it. In our case it will show "Component is Loading....." message.

Step 2

"zone.js", "shim.min.js", "system.src.js" and "system.config.js" get downloaded.

Step 3

"main.js" file will be loaded by SystemJs loader. It in turn load other necessary Angular and non-Angular JavaScript files dynamically.

Step 4

"main.js" contains an executable statement which will bootstrap the AppModule.

Step 5

Bootstrapping AppModule leads to bootstrap of AppComponent. Angular will create a new instance AppComponent class and search for AppComponent’s selector (that is "app-component") in "index.html" file.

Incase "index.html" wont contain AppComponent selector, following error will be raised.

If our case we have it. So simply Component’s template will be displayed in the place of "app-component"

Other ways of developing Angular Application

There are two more ways to develop Angular application.

  1. Download Quick start project from following link.

    https://github.com/Angular/quickstart/archive/master.zip

    It contain almost everything configured for you.

  2. Use Angular CLI – Angular CLI is a command line interface using which we can create Angular Projects quickly and easily.

    We will have a detailed demo in one of the future article about Angular CLI.

When it comes to learning, I personally prefer manual way. I follow a simple philosophy, "More errors we get during learning, less we get in production".

Important points to consider

  1. Typescript compiler can be started in watch mode. Simply fire "tsc –w" command in command prompt. It will compile all existing TypeScript files plus keep a watch on folder and all sub folders. Any time, any TypeScript file get changed it will immediately recompile it.
  2. For our demo we have used "lite-server" for creating web server. You can choose any other too. It’s your choice.
  3. Now the most important point – Use your editor and environment efficiently. Try to take full advantage of your development environment.
    1. Many modern editors like Visual Studio and Visual Studio Code, WebStorm are aware about TypeScript hence they provide rich intellisence support for syntaxes. So choose your editor wisely. For this series I am using Visual Studio Code. Which can be downloaded from https://code.visualstudio.com/
    2. Check if your editor have inbuilt support for TypeScript compilation. For instance Visual Studio has it. In such case you can skip the entire TypeScript installation and TypeScript configuration step.
    3. Check if your editor have inbuilt support for light weight web server for testing purpose. For example Visual studio provide, IIS web express. In such case you can just ignore about "lite-server" or other node servers.

Note:

As of now just to be in sync, I recommend you to follow the same editor and tools I am using. Once you are done with entire series you can try it in your editor and environment.

Summary

So finally we are done with our Day 2.

Practice it multiple times, don’t rush to jump to next day. Once you get comfortable and confidence on it move on to Day 3.

Stay tuned.

I am in twitter, Facebook, linked in.

 

Want to know more about me. Visit here

www.sukesh-marla.com

www.justcompile.com

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Marla Sukesh
Instructor / Trainer Train IT
India India
Learning is fun but teaching is awesome.

Code re-usability is my passion ,Teaching and learning is my hobby, Becoming an successful entrepreneur is my goal.

By profession I am a Corporate Trainer.
I do trainings on WCF, MVC, Business Intelligence, Design Patterns, HTML 5, jQuery, JSON and many more Microsoft and non-Micrsoft technologiees.

Find my profile here



My sites



@Twitter
@Facebook

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralMy vote of 5 Pin
singh198126-Sep-17 6:19
membersingh198126-Sep-17 6:19 
QuestionImporting Main.js Pin
Bajaja13-Aug-17 10:57
professionalBajaja13-Aug-17 10:57 
AnswerRe: Importing Main.js Pin
Hipolito Lopez14-Aug-17 4:43
memberHipolito Lopez14-Aug-17 4:43 
GeneralRe: Importing Main.js Pin
Kcom Andy Steel15-Aug-17 5:25
memberKcom Andy Steel15-Aug-17 5:25 
GeneralRe: Importing Main.js Pin
Marla Sukesh18-Aug-17 0:06
mvp Marla Sukesh18-Aug-17 0:06 
QuestionWhy Don´t use Angular CLI ? Pin
Macoratti4-Aug-17 11:26
memberMacoratti4-Aug-17 11:26 
AnswerRe: Why Don´t use Angular CLI ? Pin
Marla Sukesh5-Aug-17 11:34
mvp Marla Sukesh5-Aug-17 11:34 
PraiseBrilliant Explaination Pin
Deepika Sohani3-Aug-17 9:56
memberDeepika Sohani3-Aug-17 9:56 
GeneralRe: Brilliant Explaination Pin
Marla Sukesh9-Aug-17 9:26
mvp Marla Sukesh9-Aug-17 9:26 
QuestionMessage Closed Pin
2-Aug-17 21:49
memberstelecom152-Aug-17 21:49 
QuestionMention angular version in the title Pin
Jeevanandan J2-Aug-17 21:48
memberJeevanandan J2-Aug-17 21:48 
AnswerRe: Mention angular version in the title Pin
Marla Sukesh2-Aug-17 21:59
mvp Marla Sukesh2-Aug-17 21:59 
AnswerRe: Mention angular version in the title Pin
Marla Sukesh2-Aug-17 22:16
mvp Marla Sukesh2-Aug-17 22:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171114.1 | Last Updated 25 Oct 2017
Article Copyright 2017 by Marla Sukesh
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid