The simplest way to create an Angular2 project, no need of bower or gulp config files. Just node and npm required. With them install:
- sudo npm install -g concurrently
- sudo npm install -g lite-server
- sudo npm install -g typescript
Installing the project:
- git clone https://github.com/planetacomputer/Angular2SimpleProject.git
- npm install
- npm start
Getting Started with AngularJS 2, First Application Hello World: In this article we are going to discuss how to create AngularJS 2 application development environment, how to develop (create) first application (Hello World Application) and how to run AngularJS 2 application.
AngularJS 2 application can be develop (created) in TypeScript, JavaScript and Dart. We are going to develop our application in TypeScript.
So let's getting started.
AngularJS 2 is mobile application, web application development framework. It can also be used for desktop application development. AngularJS 2 framework is module base. In order to use any module or component in your application you first needs to import it.
Here is basic file structure of AngularJS 2 application.
![AngularJS 2 File Strucute][1]
It have one HTML file (index.html) and Two TypeScript file in app directory (app.component.ts, main.ts).
Following is the step by step process to create development environment for AngularJS 2 application.
- Install node js and npm
- Create an application project folder
- Add a tsconfig.json to guide the TypeScript compiler
- Add a typings.json that identifies missing TypeScript definition files
- Add a package.json file that defines the packages and scripts we need
- Install the npm packages and typings files
On Linux and mac you can install node js and npm following way.
Installing node js (Run following command in terminal window)
sudo apt-get update sudo apt-get install nodejs
Installing npm (Run following command in terminal window)
sudo apt-get install npm
For Windows you can download window installer from node js website and run it on your machine.
You can get more information about node js and npm installation from there. [Installing Node.js via package manager][2]
Let's now create a folder/directory for our AngularJS 2 application (Run following command in terminal window).
mkdir angularjs2-app cd angularjs2-app
Add a tsconfig.json file in your application folder/directory. Copy and paste following content in your tsconfig.json file.
Add a typings.json file in your application folder/directory. Copy and paste following content in your typings.json file.
Add a package.json file in your application folder/directory. Copy and paste following content in your package.json file.
Install all the packages included in package.json file, run following command in terminal window. (for windows on command line)
npm install
In order to get npm install and running for me, I have globally installed some of the devDependencies (Run following commands in terminal window)
sudo npm install -g concurrently sudo npm install -g lite-server sudo npm install -g typescript
Now we have created the development environment for our AngularJS 2 application.
Now let's start by developing (creating) Hello World application.
Now we create an app folder/directory in our project. app directory will hold our AngularJS 2 application.
Let's create app directory and make it our current directory.
mkdir app cd app
Every AngularJS 2 application consist of one or many components. These components are building blocks of AngularJS 2 application. Every component controls a portion of application using template.
Every AngularJS 2 application must have one root component, usually named as AppComponent.
AppComponent is a component class. There are two purposes of component class.
- Control appearance of view
- Control behavior of view
Component class control behavior and appearance of view through template. Component class can have component decorator.
There are two purpose of component decorator
- It tells the AngularJS framework what template to use
- It tells the AngularJS framework how component will be created.
In order to use the component decorator in our application we needs to import component decorator function from angular2/core
Create app.component.ts
So now let's create AppComponent for our AngularJS 2 application in app.component.ts file
Our Component decorator have two elements(fields) selector and template.
we have assigned AppComponent name to selector field. We can use that AppComponent name in HTML. Whenever we use that AppComponent name (learning-turn) in HTML, AngularJS creates a AppComponent instance and displayed it in HTML.
AppComponent slector is CSS selector not HTML tag
We have assigned AppComponent template to template field. It tell the AngularJS how to render the AppComponent view. Template field can have HTML and other components
we have exported AppComponent so we can import it some where else in our application.
Our AppComponent is now to ready in order to use it in our application.
Create main.ts file
Now create main.ts file in app directory
Following are the purpose of main.ts file
- main.ts is entry point(like main function) of our AngularJS 2 application.
- In main.ts we tells the Angular how to load our AngularJS 2 application.
- In main.ts we tells the Angular in which platform we want to run our AngularJS 2 application (We are going to run our application in browser).
- In main.ts we specify external dependencies of our AngularJS 2 application.
create index.html
Now create index.html file in your root directory of project
index.html will load our application in browser. In index.html we load required scripts(libraries), define system configuration and define application component selector.
When AngularJS framework calls bootstrap function in app/main.ts file, AngularJS prepare AppComponent, find AppComponent selector (learning-turn), locate AppComponent selector assigned CSS selector (learning-turn) in index.html and load application between that it.
Create style.css
Style is not manadotry for AngularJS 2 application. Its purpose is to apply CSS style to HTML element.
** Compile and Run**
Now open your terminal window and run following compand
npm start
After a few moment a browser window (tab) will be open and display following results.
![AngularJS 2 Getting Started. Hello world Application][3]Congratulation we have successfully created our first AngularJS 2 Hello World application.
In this article we have learn What is AngularJS 2, how to create development environment for AngularJS 2 application, how to create AngularJS 2 project and Hello World application.