Learn AngularJS (v 1.3.4) with basic concepts
This Article is related to the latest UI technology named as AngularJS which uses the MVVM (Model View ViewModel) at the client side JavaScript.
In this article we will learn about - what is AngularJS, various directives used in AngularJS
This article is about to learn the latest JavaScript UI framework called as AngularJS in most simplest and easy way. With this article, you will be able to learn about what AngularJS is and how we can create a simple application which will have the data binding with the UI elements without refreshing your page.
Also it is much simpler and easy way to understand.
We will start-up with some introduction about the AngularJS.
Q. What is AngularJS?
A. AngularJS is one of the most popular JavaScript UI framework which works on client side MVVM model. Here client side means using JavaScript we will create the MVVM. The main advantage here for the AngularJS is Two-way data binding. The two-way data binding is quite easy and simple by using AngularJS.
In this article we will see the latest AngularJS framework 1.3.4 with an example.
Q. What do we need here?
A. To get started with the AngularJS, we can either work with the visual studio and get the library of AngularJS, or we can directly refer that library from CDN (Content Delivery network) by specifying its path in to our code.
So here we will try to use the CDN to make our things more simpler rather than going to Visual Studio IDE.
Q. How to Start?
A. To start with a small application in AngularJS, we can follow the below steps:
1. Create a folder with the name CustomerProject.
2. Now add 3 files inside the folder-
- Customer.ctrl.js (Controller)
- app.js (Model)
- customer.html(UI)
3. Open the customer.html file and provide the reference of our AngualrJS CDN as well as Twitter bootstrap for rich User Interface.
4. So write the below code to the Customer.ctrl.js
< html >
< head lang="en" >
< meta charset="UTF-8" >
< title >Customer Application< /title >
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js" ></script>
< /head >
< body >< /body >
< /html >
With this code, the AngularJS library will be added to our code.
5. Add the reference of our js files to the Html file as below:
< script src="app.js"></script >
< script src="customer.ctrl.js"></script >
6. Make the webpage Angularfy
To angularfy our html page, we need to instantiate the angularJS module in our app.js. This we will use for application actually, the angular.module() function behaves like the properties for the angular modules. We can set and get the values using this function.angular.module('app')
This function takes 2 arguments-
We need to specify the name of the module as the first argument and we can provide an empty array for the second.
7. The next steps here is to tell the angular that where we will use this module. To do so, just add this module to the body tag of the web page < body ng-app="app" >< / body >
It indicates the angular that everything under this element is our application.
8. Creating controller for AngularJS
The controller is used for the actions, events, business logic etc. The AngularJS built based on loosely coupled architecture and it uses MVVM (Model View View-Model) design pattern. So here the controller mainly controls the data and based on the data, the view gets populated.
To declare our main controller, open up customer.ctrl.js and add the following JavaScript code.angular.module('app').controller("customer.ctrl", function () {
var vm = this;
};
In the code above we first retrieve the app module we created earlier and then use the controller function to instantiate a new controller.
The controller function takes two parameters. The first is the controller name and the second is a function where we will place our controlling code.
Now we need to attach our controller to the specific page section. There could be many controllers which can work for a single HTML page. If we want that our controller attch to the entire page, we can use the controllerAs to declare. Write the code below under the body tag:< body ng-app="app" ng-controller="customer.ctrl as main" >< / body >
Till now we have seen the structure of the application and how can we make the application's various components.
Now we will see few more concepts which are belongs to the AngualrJS:
Q. What is "Scope" in AngualrJS?
A. In general, $scope can be used to assign the scope but here in AngualrJS, we have ControllerAs to do the same work. The controllerAs provides more facilities than $scope. We can have the multiple and nested controller can be assigned using this approach.
The way, angular works with 2-way data binding is-
1. Capturing the instance of controller in to the variable of viewmodel
2. Assign all the controller variables to this object so that it will be accessible through the view.
To demonstrate the scope, we can have a variable with the name as "Name" which holds the name of the page. Open the controller and then add:angular.module('app').controller("customer.ctrl", function(){
var vm = this;
vm.Name = 'This is Customer Page';
});
Now to display this text to web page, we can simply use Mustaches.JS syntax< body ng-app="app" ng-controller="customer.ctrl as main" >
< div class="container" >
{{main.Name}}
< /div >
< /body >
Till now we have seen that how scope works in Angualr pages. Now we will also see the 2-way binding which makes the AngualrJS as most famous in terms of latest UI technologists.
Q. What is the Binding in AngualrJS?
A. Two-way data binding is one of the main features of AngularJS. So let's see what is 2-way data binding and how we can achieve it using AngualrJS.
In our controller, add another variable called searchData as shown below.angular.module('app').controller("customer.ctrl", function(){
var vm = this;
vm.Name = 'This is customer Page';
vm.searchData = '';
});
Now open the UI file (Customer.html) and add a simple search input using the following code.< body ng-app="app" ng-controller="customer.ctrl as main" >
< div class="container" >
< b >{{main.Name}}< /b >
< div class="input-group" >
< span class="input-group-addon" >
< span class="glyphicon glyphicon-search" >< /span >
< /span>
< input type="text" class="form-control" ng-model="customer.searchData" >
< /div >
{{customer.searchData}}
< /div >
< /body >
As we can see above, with the searchData input type, we also added the same with Mustaches.JS
{{customer.searchData}}
This will display the value also.
Save all and run will show you the result.
Q. What is the use of ngRepeat directive in AngularJS ?
A. when there is the requirement to display the multiple data using for loop, AngularJS has provided their directive with the name as ngRepeat. This is the builtin directive provided by the AngularJS which allows to iterate data and then displays them on the page.
We can try this just by creating an array of objects and then iterate using ngRepeat directive.
There are various other builtin directives like ngIf, ngShow, ngHide which can be used based on the requirements.
Guys, I hope, you got some idea about the AngularJS and few basics regarding the same.
In the coming articles, we will see a small application using these concepts to get some practical knowledge on the AngualrJS.