Step 1: Prerequisites
Install Node.js & npm
Angular 4/5/6 set up environment
Install Angular CLI
Creating a new Angular app is a bit tedious job especially when you are new to Typescript as there will be lot of initial configurations involved. In order make it simpler Google came up with the utility called Angular CLI, using which we can create and manage our app from command line itself
In order to install Angular CLI open Node.js command prompt/command prompt and run the below command
Install Code Editor
There are multiple code editors available in market
1. Microsoft Visual Code Studio
2. Brackets
3. Notepad++,
4. Sublime Text
As I m Fond of eclipse so I have installed angular plugin in eclipse as Angular editor.
Step 2: Create Project
Lets build our First Angular 5 Hello World application
Create a new folder with folder name “Angular5HelloWorld” anywhere you want.
Open command prompt and navigate to the folder.
Use the ng new command to create our Hello World Angular Project ng new hello-world-app
Ng stands for aNGular. NG is a core module, and this module contains all the directives that comes built in with the AngularJS library file.
In case you get error that 'ng' is not recognized command
To solve that go to :
Control Panel > User accounts > Change my environmnet variables
and add the path to your AppData\Roaming\npm, in my case it was
Above command ng new hello-world-app creates a MAGIC...!!
This command add 1102 packages and all required dependencies for your first project.
Now your project 'hello-world-app' is successfully created.
Step 3: Run our first application
Navigate to your newly created project and run below command to run your application.
This command will start the server and will launch the default Angular Application build by Angular CLI.
If you see above screen after running command then congratulations everything is fine with your application and your are good to go.
Default url to launch application is : http://localhost:4200/
Step 4 :Output
Next :create a customize component
http://librakblog.blogspot.com/2018/07/create-new-component-in-angular.html
Install Node.js & npm
Angular 4/5/6 set up environment
Install Angular CLI
Creating a new Angular app is a bit tedious job especially when you are new to Typescript as there will be lot of initial configurations involved. In order make it simpler Google came up with the utility called Angular CLI, using which we can create and manage our app from command line itself
In order to install Angular CLI open Node.js command prompt/command prompt and run the below command
npm install -g @angular/cli
Install Code Editor
There are multiple code editors available in market
1. Microsoft Visual Code Studio
2. Brackets
3. Notepad++,
4. Sublime Text
As I m Fond of eclipse so I have installed angular plugin in eclipse as Angular editor.
Step 2: Create Project
Lets build our First Angular 5 Hello World application
Create a new folder with folder name “Angular5HelloWorld” anywhere you want.
Open command prompt and navigate to the folder.
Use the ng new command to create our Hello World Angular Project ng new hello-world-app
Ng stands for aNGular. NG is a core module, and this module contains all the directives that comes built in with the AngularJS library file.
D:\Rakesh_kumar_Singhania\Angular5HelloWorld>ng new hello-world-app
In case you get error that 'ng' is not recognized command
To solve that go to :
Control Panel > User accounts > Change my environmnet variables
and add the path to your AppData\Roaming\npm, in my case it was
C:\Users\rakeshkumar\AppData\Roaming\npm
Above command ng new hello-world-app creates a MAGIC...!!
This command add 1102 packages and all required dependencies for your first project.
Now your project 'hello-world-app' is successfully created.
Step 3: Run our first application
Navigate to your newly created project and run below command to run your application.
D:\Rakesh_kumar_Singhania\Angular5HelloWorld\hello-world-app>ng serve
This command will start the server and will launch the default Angular Application build by Angular CLI.
If you see above screen after running command then congratulations everything is fine with your application and your are good to go.
Default url to launch application is : http://localhost:4200/
Step 4 :Output
Next :create a customize component
http://librakblog.blogspot.com/2018/07/create-new-component-in-angular.html
No comments:
Post a Comment