Tutorial-1 Installing AngularJS

Installation and Setup of AngularJs4


Hi all in this tutorial we will try to install Angular4, and all the dependencies for developing an Angular Application.

Step 1 : Installing NodeJS:-

You can check if the nodeJs is already installed in your system or not, by entering following command in the Command Prompt/terminal.
Syntax : node -v


Fig 1: Syntax to know the NodeJs version

From above image you can find that, as because I already have installed nodeJs, so by entering the above command I got the nodeJs version available in my system.

But what if the nodeJs is not there in your system, then don’t worry you can visit https://nodejs.org/en/download/ and download the NodeJs source code or installer according to your Operating System, and can install it.

Fig 2: Download screen of Node.js

After installing it again enter the previous command to see whether nodeJs is successfully Installed or not, if its successfully installed then it will so you the installed version of the nodeJs as shown in Fig1. If not then try to google for troubleshooting the problem you are facing.

Step 2: Installing AngularCLI:-
Next we will install the Angular CLI package which is required for dealing with the AngularJs. Enter the below command in your command prompt for installing the AngularCLI, remember you have to install it Globally by providing -g, cli stands for Command Line Interface.
Syntax: npm install -g @angular/cli


Fig 3: Syntax for installing AngularCLI


Fig 4: Successful installation of AngularCLI

After the installation gets finished,now we have to check if its available for use or not, by entering the below command.

Syntax: ng -v

Fig 5: Detecting angular installation and its version.


Congrats now you are done with the basic installation of Angular, the next section will demonstrate about how to create a fresh brand new Angular Application, run the application in browser, build the application and hosting it in the Apache Tomcat Web-server.

Tutorial Home                                                                                                                       Next ->

Comments

Post a Comment

Popular posts from this blog

Tutorial-6 Pipes

Image
Pipes We describe Angular Pipes as it provides a way to format the Data in your html template, without putting a lot of efforts in your program for displaying some data in some specific format angular gives us power of Pipes. Pipes can be used within the Interpolation Expression for showing the formatted output. We use Pipe Operator i:e : I for availing the pipe facility, followed by the required pipe name. Syntax : {{dataModel | pipe name}} Ex : <p>Date of joining is{{joinDate | date}}</p> Parameterized Pipe: Pipes can take further formatting options with the help of parameters, parameters are represented by : (Colon) and placed after the pipe names. Syntax: {{dataModel | pipe name:parameter}} Ex : <p>Date of joining is{{joinDate | date:”MM/dd/YYYY”}}</p> Demonstrating uppercase and lowercase pipes App.cpmponent.ts import { Component } from '@angular/core' ; import { FormsModule } from '@angular/forms' ; ...
Read more

Angular2 Tricks

Hi Friends welcome, in this section, I will introduce you with some of the tips and tricks of Angular2. That I came across while doing my handsfree with AngularJS2. I hope these information's will help you. 💭 What if I will use both template and templateUrl field in my Component? Is it going to through me Error, if not then which field will get considered?       Ex : @Component({   selector: 'banchha',   template:`  <h1>Testing template attribute</h1>   `,   templateUrl: './app.component.html' }) 💨  The answer is that you can use both of them in the Component, it might be logically not correct but syntactically Angular2 allows it(as on 1st May 2017), so no error will be thrown by the transpiler. Answering next which field will be considered, the answer is that the field( between template and templateUrl ) that occurs last in the Component,  will get considered, i:e in above example the  templ...
Read more

Tutorial-4 Data Bindings in Angular

Image
Data Bindings in Angular In this section we will discuss various ways to display data in view and fetching data from the view as well as how to sync the data between view and model. Remember to show data in the view we have to take help of the templates, because templates are responsible for rendering the HTML in the browser. Angular provides so many ways for achieving the data binding feature, lets discuss all of them with some suitable examples. Interpolation :{{…}} Interpolation refers to binding data with the help of curly brackets, i:e {{}}. We normally place the components property name in between the Open Curly Bracket {{ and close Curly Bracket }} . Synatx : {{component property name}} Ex: <p>Application Name is{{title}}</p> Remember anything you put in the Interpolation is known as Template Expression. And every Template Expression produces some value which can be used for, displaying data, assigning value to DOM properties and HTML attributes or ca...
Read more