Hi guys, today I am going to write about Angularjs which is one of the most amazing JavaScript MV* ( * whatever) framework that any front end developer ever come across . Although this post will cover only the basics of Angularjs in logical order and will be building our first Angularjs App and hopefully it will give you a kickstart to lot more amazing stuff. Once you get this basic knowledge, you will be a Pro in Angularjs in no time. Stop , enough of talking now and let’s get started.

The first thing you need to do while building an Angularjs App is to download the framework from https://www.angularjs.org or get the latest CDN which I prefer more and link it to the Angular App page. Once Angularjs is included in our HTML page , we are ready to go.

Page setup and introduction to ng-app


<!DOCTYPE  html>
<html  ng-app="myfirstApp">
     <title>Kickstart AngularJS in some minutes</title>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js" type="text/javascript"></script>

Have you noticed the attribute “ ng-app” in the above code? The first thing angular looks for in an app page is the “ng-app” attribute which is indispensable to include in any angular app. We can include “ng-app” in html,body or in any other container element and can have multiple “ng-app” in single page.
We have assigned a name to the ng-app attribute as “myfirstApp” or you can give your own. Now let’s create our app module and save it in a new file called “app.js” and let’s not forget to include it in the html page.


//this is how we define an angular app module
var app = angular.module('myfirstApp', []);

Introduction to ng-controller and scope

Now let’s add a container element to our app and move on.

<div ng-controller="myfirstController"></div>

Here we introduced a new attribute called “ng-controller” and assigned a name as “myfirstController” to the same. Whatever happens inside the container element, the “ng-controller” is responsible for that. Do you want to see that in action what am I saying? To see that, let’s create a new file say as “myfirstController.js” and this is where we are going to write our business logic and all.


app.controller("myfirstController", function($scope){
    $scope.myfirstmodelData = "Whatever assigned to this model, will display in view !";

Wait have you noticed the “$scope” and are you thinking what is it doing there??

$scope is nothing but a JavaScript object and acts as a communicator between the controller and view. It holds all model data and functions that we want to process in the view.

ng-model and two way data binding

Angular uses expression {{}} to display model data in the view. Angular provides one more great feature called two way data binding, that’s mean whenever any changes occur in the view side immediately it reflects the model data and vice versa . That is what angular does for you.

See the below bin to understand it clearly.

Kickstart angularjs in some minutes

We see in the above code the “ng-model” attribute which binds the input value to the scope variable and is responsible for the two way data binding between the model data and the view.

ng-repeat and filter

Let’s create a JSON object list and display it in our view. To do that open the myfirstController.js and add the below code.

//in real application this will come from service api
                         $scope.users =[
					name   :"John Smith",
					email  :"john.smith@gmail.com",
					phone  :7777777777
					name   :"Roberto Doha",
					email  :"robertodoha@gmail.com",
					phone  :2345678901
					name   :"John Snow",
					email  :"johnsnow@gmail.com",
					phone  :3456789012

Now add the below code in our html page.

<h2>List of users:</h2>
<li ng-repeat="user in users">{{user.name}}------------{{user.email}}-----------------{{user.phone}}</li>

In the above code what the “ng-repeat” attribute does is simply iterates through the array of JSON objects and displays it in the view as simple as that.

Now let’s see how we can covert the simple input element into a search box to get results from the displayed list of users. Let’s make some changes in our html page and see the result in action.

 <input type='text'  ng-model="inputValue"   placeholder="Type  here to search" /><br/>
<h2>List of users:</h2>
<li  ng-repeat="user in users | filter : inputValue">{{user.name}}----------{{user.email}}-------------{{user.phone}}</li>

Now start typing something in the input element and see the result .Here we add one of in-built angularjs filters called “filter” which takes an argument and filters the array of objects and returns the result. Are you amazed how such a functionality can be achieved without writing a single bit of code ? Oh yeah, that’s one more pretty cool stuff Angularjs does for you.

Kickstart angularjs in some minutes
ng-events and functions

Let’s add some new users into the existing users list and remove whatever we want from the list. To add new users we need to create some input fields first. Add the below input fields in our html code.

<input type="text" ng-model="name" placeholder="Enter name" /><br/><br/>
<input type="text" ng-model="email" placeholder="Enter email" /><br/><br/>
<input type="text" ng-model="phone" placeholder="Enter phone" /><br/><br/>
<input type="button" ng-click="addUser()" value="Add User" />

Now we added a new attribute call “ng-click” in the input button to trigger our addUser function which adds new users into our existing users list. Now add the below code to our myfirstController.js file .

$scope.addUser = function(){
	  $scope.users.push({ name :$scope.name, email: $scope.email, phone : $scope.phone });
	  $scope.name=null;  // to clear model data after adding

Ya , its time to remove some users from the list. To do that first add the remove link in the user list as below.

<li ng-repeat="user in users | filter : inputValue">{{user.name}}-----------{{user.email}}------------{{user.phone}}------<a href="" title="Remove" ng-click="removeUser($index)" >X</a></li>

Here we assigned the removeUser function to the ng-click event to trigger it.

Now add the removeUser function in our myfirstController.js

$scope.removeUser = function(index){

That’s all, now click the remove link and see it all in action.

JS Bin on jsbin.com

Hopefully this will give visitors a kickstart to Angularjs.