Only 10 Minutes Needed To Understand And Learn AngularJS

CodingBeginners_AngularJsFeatureImg

AngularJS

Today, I want to share one of the most  fast growing open source front end web application framework. The name of this framework is AngularJS. AngularJS is a JavaScript MVC Framework that integrates web services,  build web components, and two-way data binding which allows complete separation of data model and view+user interaction. Now a days AngularJS  capturing the market. You can Easily upgrade your exiting system with the help of angulrJS. The main thing in angularJs that it create single page application. You can also use AngularJS in building directives or create your own custom directives.

AngularJS  framework consists of a tightly integrated tool set that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.

AngularJS – MVC  Architecture

MVC or Model View Controller as it is popularly called, is a software design pattern for developing web applications. let you work with any server-side technology as long as it can serve your app through a Restful web API. But Angular also provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. As a result, you can move your model and business logic to the front-end and build back-end agnostic web apps.

Models: Now you can hear the world model in MVC Architecture. Model is like a Data in traditional web application. We can use data to create a dynamic document. We get the data from static JSON file or from database like SQL.

View: Other part of the application is called view. In order to show the data in model you can create an angular view. This is nothing more than a template. You can create view in your HTML code by double curly braces. Directives are the part of views component. In case of web application it’s HTML.

Controller: In Angular every thing starts with controller. The Controller is the central component in the Angular Application. The controller contains both logic and state. It gives you the ability to add functionality to your data. Now this is JavaScript link your views to your models.

 

CodingBeginners_MVCArchitecture_AngularJS.jpg

 

In the Concept of Model, View and some thing else, the some thing else is some thing that ties or term is used bind the model and the view. The model and the view are bound, so what ever happen to the model automatically effects to the view, and whatever happens to the view automatically effects to the model. The thing that binds them is called controller.

AngularJS Directives

In AngularJS, suppose you extend HTML with new attributes is called as Directives. Directives are the most important components of any AngularJS application.  Although AngularJS ships with wide range of directives, you will often need to create application specific directive

An AngularJS application consists of following four important parts −

  • ng-app −        This directive defines and links an AngularJS application to HTML.
  • ng-init −        This directives initialize actual application data.
  • ng-model −  This directive binds the values of AngularJS application data to HTML input controls.
  • ng-controller  − This directives defines which controller will be charge of your view.
  • ng-bind −      This directive binds the AngularJS Application data to HTML tags.
  • ng-repeat −  This directives is one of the most commonly used and serve to define your template scope when looping through collections.

AngularJS is JavaScript-based framework. AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag :


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

AngularJS Scopes

        Scope is a special java script object which plays the role of joining controller with the views. Scope contains the model data. In controllers, model data is accessed via $scope object.A controller (constructor) function is responsible for setting model properties and functions. This can be done only through $scope. Whatever function or model you apply in View (html file), that is accessed in controller using scope.

Simple hello world example as follows.

index.html

<div ng-controller="MyController">
  Your name:
    <input type="text" ng-model="name">
    <button ng-click='hello()'>greeting msg</button>
  <hr>
  {{greeting}}
</div>

script.js

angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
  $scope.name = 'World';

  $scope.hello = function() {
    $scope.greeting = 'Hello ' + $scope.name + '!';
  };
}]);

output :

codinfbeginners_helloWord_example.png

Features of AngularJS

Let’s take a look at some architecture choices that angular has made.

Two way binding, this means user input in form field and this instantly updated in your angular model. That means in the most cases you don’t need to watch a specific advance and respond to them and manually update to your html. Instead angular that handles for you.

Dirty Checking, You do not have to put your data in the special structure and called setter and getter method to read and write your method. You can simply put your model data into plain old JavaScript objects and angular were respond one every your data changes and automatically updated the view.

Dependency Injection, This can be encapsulate pieces of your application better and also improve test ability.

If you like this blog, then please subscribe and suppose you have any queries or suggestion then comment below.

8 thoughts on “Only 10 Minutes Needed To Understand And Learn AngularJS”

    1. Thanks for your appreciation and for your question. Yes, I made this website using WordPress blog and my own creativity.

  1. Great goods from you, man. I’ve understand your stuff previous to and you are just extremely fantastic.
    I actually like what you’ve acquired here, really like
    what you are saying and the way in which you say it.
    You make itt entertaining and you still care for to keep it wise.
    I can’t wai to read far more from you. This is actually a terrific site.

Leave a Reply

Your email address will not be published. Required fields are marked *