Angular is one out of top 5 framework for web app development. It's learning curve is not straight forward but we can catch up in a short time. I started learning Angular2 like a month before. This is my first time learning any JavaScript based framework. Now in a month, I am quite confident about developing some components and services using barrels, custom pipes and angular built validations for responsive forms. I still need to learn communicating with third party services and unit testings. I have just began learning the fundamentals. But the fundamentals itself teaches a lot of features about angular which is worth sharing. :)
If you are thinking where to start with, then I would recommend two of these authentic source:
Always search for the official documentation for learning any tools and technologies.
This blog as well as a series of upcoming blogs on Angular2 will be kind of tutorial for exploring fundamentals on Angular2. I will mainly focus on the issues that I encountered during my learning. This could help readers to overcome such issues and save some time as well.
Right before starting my findings I wanted to include this definition about what angular is from Angular's Official site:
Angular is a platform that makes it easy to build applications with the web. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop
Before starting a project on angular skill wise you need to have basic knowledge about HTML, TypeScript, a little bit of CSS and Bootstraping if you want to give a pleasing view to your web application.
You need to install following tools which I'll be listing & also showing you the step wise installation for setting up an angular2 project:
1. Install Node with version greater than 6.0
Download NodeJs from its official website.(nodejs.org). Download LTS(Long Term Support) version such that it will be grater than Version 6.0. Angular2 Supports only Nodejs greate than version 6.0.- Install nodejs
Once you complete the installation, type node --version in your command prompt. You will be displayed the node version if everything went fine with your installation:
Currently, I've v6.11.0 installed on my machine.
2. Update npm( node package manager) to the latest version
Node package manager abbreviated as npm is installed during the installation of nodejs. To check whether npm is installed or not on your machine:
- Open a command prompt ant type npm --version
I've version 5.0.3 installed on my machine. - Now that you have npm update it to the latest version tying:npm i -g npm
3. Install angular-cli from npm
angular-cli is a command line interface for interface. Here we use the inbuilt functionalities of angular-cli to perform actions like:
- create angular project
- create new components scafolded by angular-cli
- create new services scaffolded by angular-cli
- initialize a project configuration flie
Install angular-cli from npm by typing following command from your console:
npm install @angular/cli
Now we are all set with required tools for creating an angular2 project.
Now we are all set with required tools for creating an angular2 project.
4. Creating A Project
Now that we have required tools already set up, creating a project is two steps ahead.
- In your command prompt type :
ng new project-name
You will see a list of files bundled by angular-cli. We will go through the bundled file folders and it's purpose in upcoming blogs. - Now move inside the project directory:
cd project-name - Now start the server and you will see your web application up and running in a port hosted in your localhost server. Type:
ng serve
Notice the information on your command prompt:
**NG Live Development Server is running on http://localhost:4200. **
Open a web browser and browse http://localhost:4200 and find the result for yourself.
**NG Live Development Server is running on http://localhost:4200. **
Open a web browser and browse http://localhost:4200 and find the result for yourself.
It actually Works. Wait for our upcoming blog where we will write something meaningful about Angular2.
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean.