Setup and Installations of AngularJs

AngularJs setup and Installation

1. View on GitHub.
2. Downloading and hosting files locally.

Moving forward to the AngularJs development we need to setup the environment for AngularJs.

To start with AngularJs lets open https://angularjs.org/ and there we can see something like below –

This contains three options –

1. View on GitHub – these options will take us to GitHub, where we can see clear instruction on how to take checkout from there and setup the same at our end.

2. Download –clicking on the download button will open the below dialog box –

Now let us understand what it contains and what they stand for actually –

Branch – this tells about the version as this is easy to understand from what is written there. 1.3. X is the stable version of AngularJs framework and 1.4.X is the latest one.

Build – this tells about in which format we can download the AngularJs library i.e. Minified, Uncompressed or Zip.

CDN – CDN basically stands for Content Delivery Network which provides the facility to host your files (static files) on distributed servers rather thanhosting them on a single server. There are number of free CND are provided by different providers like Microsoft, Google etc. One benefit of using CDN here is, there will be no need to make extra call to server if you have already loaded AngularJs in your browser earlier. It will use the cached one. You can get more information on web about what is CDN and benefits of using CDN.

Bower – This command based method to add AngularJs, first install bower to your system using “$ npm install -g bower” (supposing you already have installed npm). And then get AngularJs by the given command “bower install angular#1.3.14”.Npm- or you can easily use the npm command to add AngularJs

AngularJs Syntax (First Sample Application)

1. Important parts of AngularJs

i) ng-app

ii) ng-model

iii) ng-controller

ng-app : - The ngApp directive are used to define the root element and the auto-bootstrapping to an application. It's called auto initialization process. If you have multiple angular apps (more than one ng-app) that time you set manually bootstrap.

ng-model :- The ngModel directive are used to bind the custom form control(input, select, textarea) to a property.

The ngModel is responsible for:-

i. Bind the views to the model.

ii. Validate the form control (just like required, number, email and URL validation etc.)

iii. Keep the state of valid controls

iv. Setting of CSS classes (just like ng-valid, ng-invalid etc.)

ng- controller :- The ngController directive are used to link the angular controller to the HTML Views.

Creating & Executing AngularJs Apps

First Sample Application:-

Let us go ahead with developing our fist app after setting up the AngularJs Environment.

Step 1: -

Create an Empty Web Application in your JavaScript IDE (there are many IDEs available like AptanaStudio, WebStorm etc.) and add a HTML page (say index.html). After adding the index.html page add below line in the head tag –

Step 2:-

Add a JavaScript file named “app.js” and include the reference of this file into your index.html <head> tag.

<head>

</head>

Step 3:-

In the body tag of your index.html add ng-app attribute, this will tells angular that what part of HTML contains the angular App. We are free to add this to HTML element or body tag or event to DIVs as well. Like below –

Step 4:-

Now we have to attach controller to the view so that the data-binding can be controlled. We can do this by adding ng-controller attribute to the div where we want to add.

Like below –

Step 5:-

Creating controller - We can create controller in our app.js as below –

Var myApp= angular.module("AngularApp",[]);

myApp.controller("HelloController", function($scope){

$scope.text= "";

});

Step 6:-

Add the model and data to the view like below –

<p>Hello : {{text}}</p>

Run the application in the browser and you will see the magic of AngularJs

Below is the complete code of index.html and app.js –

Index.html –

<!DOCTYPE html>

<head>

<title>Angular Demo</title>

</head>

<p>Hello : {{text}}</p>

</div>

</body>

</html>

App.js –

Var myApp= angular.module("AngularApp",[]);

myApp.controller("HelloController", function($scope){

$scope.text= "";

});

About Blogger

Hey! I am Anil Singh. I am Active Blogger, Writer and Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
http://www.code-sample.com
http://www.code-sample.xyz