Angular 4 Tutorial

learn to build web apps using Angular 4

getting started with angular

What is Angular 4
Angular 4 is an open source web development framework written and maintained by angular team at Google .
In order to embrace angular's capabilities better, let's look at some of the important points about angular.
  1. Angular 4 or simply Angular is the next logical version of Angular2 but it has nothing in common with Angular 1 also called AngularJS
  2. Angular is written in TypeScript and so it comes with all the capabilities that typescript offers
  3. Angular is also utilized in the cross platform mobile development framework called IONIC and so it's not limited to web apps only
  4. To keep upgrading Angular , angular community has announced angular releases every 6 months
About Angular 4 Tutorial
In this Angular 4 tutorial , we'll learn Angular 4 in the following ways ::
  1. by understanding fundamental building blocks of angular including modules , components , services , routing , pipes etc.
  2. by going through well commented code examples
  3. and finally we'll also be creating a web application from scrach in Angular
In order to follow this angular tutorial , you need to setup your local environment which needs the following installed on your machine.
  • node.js >= 6.9.x
  • npm >= 3.x.x
  • ide , you can choose from Sublime Text , Visual Studio Code or Atom
  • To check the version of node or npm , you can use the following commands in your terminal.
    node -v 
    npm -v 
    Installing @angular/cli
    @angular/cli is an npm package and it's an amazing tool which helps with different repetitive operations when creating and working with Angular apps. You can install @angular/cli by typing the following command in your terminal.
    npm install @angular/cli -g 
    Once @angular/cli is installed , we've setup the environment we need to start creating our Angular app , so now we're all set to create our angular app. In this tutorial , we'll be creating an angular app with the following plot.
    What shall we create ?
    We're going to create a basic angular app called InventionsHub which simply lists different inventions along with some useful information about those inventions. We'll utilize many angular concepts like modules , components , services , routing , pipes etc while creating our project. So let's get started.

    Create your Angular App
    In order to create your app , first switch to the directory where you would like to start your angular project by using cd command
    cd ~/angular/projects 
    now use the @angular/cli tool's ng new to create a new angular app as follows
    ng new InventionsHub 
    Great! , you just created your app. What ng new command did is that it created a bare bones angular app for you creating and placing initial files and folders at right place. Before we dive deeper into the code structure , first lets see how our creation looks like.
    Serve your app
    To serve your app , use another command ng serve offered by @angular/cli ,
     ng serve 
    this command lifts your app on your local machine at http://localhost:4200
    now go to your browser at the above address and you should see your app in action. following is a screenshot of how it looks like.
    getting started with meteor
    In this first part of the angular tutorial , we learned many interesting things about the angular framework like ::
    1. What is Angular 4
    2. How to get started with Angular 4
    3. What is @angular/cli
    And we also created our InventionsHub app which we will be using to grasp different building blocks of angular in the upcoming tutorials. Hope you're enjoying learning Angular.

    More from RISHABH.IO

    developed & nourished with by