Setting up the environment for Angular2 and Hello World Example in Angular2
Hi All,
In this post I am going you to show you how you can set up the environment for Angular2.
You may want to run your application in different servers. So here I am going to show you how you can run your Angular2 application in the following two servers:
1. lite-server (static server)
2. Weblogic Server 10.3
Lets do the setup for lite server.
First of all go to any directory in your computer and create a folder in that directory with name "angular2-example".
You can do it by the command line also by typing the following command.
mkdir angular2-example
Now once the directory is created you need to create three files.
1. tsconfig.json
2. typings.json
3. package.json
1. tsconfig.json
This file is TypeScript compiler configuration file. It guides the compiler to generate JavaScript files after compilation.
The content of this file will be as follows:
{
"compilerOptions": {
"target": "es6",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
2. typings.json
The typings.json file is used to identify TypeScript definition files in your Angular application.
The content of this file will be as follows:
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}
3. package.json
package.json is the files which contains all the packages defined which are required by the application.
The content of this file will be as follows:
{
"name": "angular2-demo",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
Once these files are created go to your folder and run the following command in run command.
npm install
This command will install are the dependencies which are defined in package.json.
Error messages in red may appear while installing npm, just ignore them.
Now our configuration is done.
Let's create a Hello World component to verify whether our setup is done properly or not.
create one folder with name app inside angular2-example folder and create the following files.
1. app.component.ts
=========================================================================
import {Component} from "angular2/core";
@Component({
selector: 'my-app',
template: '<h2>Hello Kunal ! How Are You ?</h2>'
})
export class AppComponent {
}
==========================================================================
2. main.ts
=========================================================================
import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./app.component"
bootstrap(AppComponent);
=========================================================================
Now create the index.html file and write the following inside it.
<!doctype html>
<html>
<head>
<title>Hello World</title>
<base href=".">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.3.2/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/router.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
app: './app'
},
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
System
.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
Loading...
</my-app>
</body>
</html>
Now we can run the lite server and test our application.
To run the lite server we need to run the following command in command line
npm start
Now you can see the result in the browser as shown below:
Now if you want to run the same application in the weblogic server you can create the Web application in the eclipse or any other IDE and then place the app folder and index.html inside web folder. You do not need to put three configuration files (tsconfig.json, typings.json, package.json) and then you can run the application as you run any other J2EE project in eclipse or any other IDE.
Then you can see the same result as above.
That's it .
Happy Coding :)
In this post I am going you to show you how you can set up the environment for Angular2.
You may want to run your application in different servers. So here I am going to show you how you can run your Angular2 application in the following two servers:
1. lite-server (static server)
2. Weblogic Server 10.3
Lets do the setup for lite server.
First of all go to any directory in your computer and create a folder in that directory with name "angular2-example".
You can do it by the command line also by typing the following command.
mkdir angular2-example
Now once the directory is created you need to create three files.
1. tsconfig.json
2. typings.json
3. package.json
1. tsconfig.json
This file is TypeScript compiler configuration file. It guides the compiler to generate JavaScript files after compilation.
The content of this file will be as follows:
{
"compilerOptions": {
"target": "es6",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
2. typings.json
The typings.json file is used to identify TypeScript definition files in your Angular application.
The content of this file will be as follows:
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}
3. package.json
package.json is the files which contains all the packages defined which are required by the application.
The content of this file will be as follows:
{
"name": "angular2-demo",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
Once these files are created go to your folder and run the following command in run command.
npm install
This command will install are the dependencies which are defined in package.json.
Error messages in red may appear while installing npm, just ignore them.
Now our configuration is done.
Let's create a Hello World component to verify whether our setup is done properly or not.
create one folder with name app inside angular2-example folder and create the following files.
1. app.component.ts
=========================================================================
import {Component} from "angular2/core";
@Component({
selector: 'my-app',
template: '<h2>Hello Kunal ! How Are You ?</h2>'
})
export class AppComponent {
}
==========================================================================
2. main.ts
=========================================================================
import {bootstrap} from "angular2/platform/browser"
import {AppComponent} from "./app.component"
bootstrap(AppComponent);
=========================================================================
Now create the index.html file and write the following inside it.
<!doctype html>
<html>
<head>
<title>Hello World</title>
<base href=".">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.47/system.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.3.2/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/angular2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.15/router.js"></script>
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: {
app: './app'
},
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
System
.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
Loading...
</my-app>
</body>
</html>
Now we can run the lite server and test our application.
To run the lite server we need to run the following command in command line
npm start
Now you can see the result in the browser as shown below:
Now if you want to run the same application in the weblogic server you can create the Web application in the eclipse or any other IDE and then place the app folder and index.html inside web folder. You do not need to put three configuration files (tsconfig.json, typings.json, package.json) and then you can run the application as you run any other J2EE project in eclipse or any other IDE.
Then you can see the same result as above.
That's it .
Happy Coding :)
Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from TypeScript Training in Chennai . or learn thru Javascript Online Training from India. Nowadays JavaScript has tons of job opportunities on various vertical industry. JavaScript Training in Chennai
ReplyDeleteAn impressive share!
ReplyDeleteAngularjs Training in Bangalore , Angular 2 Training in bangalore , Python Training in Bangalore
You made such an interesting piece to read, giving every subject enlightenment for us to gain knowledge. Thanks for sharing the such information with us to read this... environmental chamber
ReplyDeleteVery good brief to make concept about angular2 perfect way to accept the updates and this post helped me alot. Say thank you I searching for your facts. Thanks for sharing with us!
ReplyDeleteDevOps Training in Chennai
DevOps Online Training in Chennai
DevOps Training in Bangalore
DevOps Training in Hyderabad
DevOps Training in Coimbatore
DevOps Training
DevOps Online Training
Just admiring your work and wondering how you managed this blog so well. It’s so remarkable that I can't afford to not go through this valuable information whenever I surf the internet.
ReplyDeleteIELTS Coaching in chennai
German Classes in Chennai
GRE Coaching Classes in Chennai
TOEFL Coaching in Chennai
spoken english classes in chennai | Communication training
I've gone through all the sweet alerts that you mentioned with its coding part on Reactjs and I believe that this is the best blog one can learn with. I was looking to hire reactjs development company in India and got your blog.thanks lot!!
ReplyDeleteJava training in Chennai
Java Online training in Chennai
Java Course in Chennai
Best JAVA Training Institutes in Chennai
Java training in Bangalore
Java training in Hyderabad
Java Training in Coimbatore
Java Training
Java Online Training
Thank you for the information. It is very useful and informative
ReplyDeleteangular js course in chennai
angular course in chennai
angular js online course in chennai
angular js course in bangalore
angular js course in hyderabad
angular js course in coimbatore
angular js course
angular js online course
You made such an interesting piece to read, giving every subject enlightenment for us to gain knowledge. Thanks for sharing the such information with us to read this...
ReplyDeleteAWS Course in Chennai
AWS Course in Bangalore
AWS Course in Hyderabad
AWS Course in Coimbatore
AWS Course
AWS Certification Course
AWS Certification Training
AWS Online Training
AWS Training
Just admiring your work and wondering how you managed this blog so well. It’s so remarkable that I can't afford to not go through this valuable information.
ReplyDeleteacte chennai
acte complaints
acte reviews
acte trainer complaints
acte trainer reviews
acte velachery reviews complaints
acte tambaram reviews complaints
acte anna nagar reviews complaints
acte porur reviews complaints
acte omr reviews complaints
The answer is yes everybody has at least one talent, and it is likely that everybody has more than one talent. However most of our talents are largely undiscovered. Whether or not somebody should work hard to get good at something or not is arguable, and can even be put down to preference.keep up!!
ReplyDeleteAndroid Training in Chennai
Android Online Training in Chennai
Android Training in Bangalore
Android Training in Hyderabad
Android Training in Coimbatore
Android Training
Android Online Training
The NoteZilla Crack is a highly functional calendar and task manager as well. Once you've organized them, they can be categorized.ELOoffice 11.02.006 Features
ReplyDeleteCamtasia Studio 2022.2.1 Crack is a powerful easy-to-use screen recorder that helps you create professional videos without having to be a video .Download Camtasia 2022
ReplyDeleteSafety and Risk management software enables organizations to streamline processes, improve data management, enhance compliance, and proactively mitigate risks. It contributes to creating a safer work environment, reducing incidents, and fostering a culture of safety and risk awareness.
ReplyDelete