AngularJS Tutorials-ng

The complete AngularJS tutorial for beginners. We provide an easy way to learn AngularJS in this tutorial.

Welcome to AngularJS Tutorial

AngularJS - ng:-

AngularJS is a next generation(ng) javascript framework. AngularsJS extends HTML with some alterations. Learning angularJS is not that much difficult for the beginners if you know HTML and javascript then it will be pretty simple to learn angularJS.


In this site we provide a best AngularJS Tutorial for the beginners. You can Excute and see the output results by clicking the Lets try option of all sample programs which we provide in this angularJS tutorial site. So you no need to run your examples separatly it is cool right. Use the left side nev-bar to get the flow of complete angularJS tutorial.

AngularJs tutorial

Why AngularJS


1. AngularJS is an open source we can use freely.

2. AngularJS is Very usefull to build a single page applications.

3. Code will get reduce in angularJS compare to conventional HTML.

4. We can use MVC concept in AngularJS.clever usage of JSON, client-side caching.

5. AngularJS Easy to learn for the front-end developers.


Lets Try AngularJS Now


In this AngularJS tutorial we provide an option called "Lets try" this will help you to try and run all our examples in online. So you don't need to do any copy and paste work to see the results of sample programs.


Sample AngularJS Tutorial Program


Try the below angularjs sample program by clicking the Lets Try button and start your learning.


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
 
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Welcome to AngularJS {{name}}</h1>

</div>

</body>
</html>

Sunday, 17 July 2016

AngularJS Scopes

with 0 Comment
AngularJS Scope With Example

Angularjs scope is a javascript object which is used to merge the controller with view or HTML page.
All controllers have an associated angular scope object.  A controller function is responsible for assigning model properties and functions. This can be done through angularjs scope. Whatever you apply in the view (HTML page), that is accessed in the controller using the scope. So this angularjs scope object has the main role in combining controller and view.

angularjs scopes
      angularjs scopes                   


angularjs scopes
angularjs scopes
                                  
In other words, we can say the scope is an object that binds to DOM element where you apply controller.

How to use angularjs scope?


The advantage in this angularjs scope is if we defined nested controllers then the child controller will inherit the scope from the parent controller.
angularjs scopes
angularjs scopes
                                              
Not at all like the other MVC frameworks, AngularJS doesn't have particular classes or functions to make model objects. Rather, AngularJS developed the crude JavaScript objects with custom strategies and properties. These objects, otherwise called scope in AngularJS, act as a paste between the view and different parts (mandates, controllers, and services) inside the AngularJS application.

Step by step process of scope for the below example


  • During the constructor definition of a controller,  angularjs scope is passed as the first argument to it.
  • $scope.username is called model which is to be used in the HTML page. 
  • We have set the value to the model (username) which will be available or reflected in the application module whose controller is My controller.

<script>
function MyController($scope) {
 $scope.username = "Money";
 };
</script>


In a larger application, it is very difficult to find a correct scope for the DOM so knowing your scope is very important.
From the above example, you can understand how to create an angularjs scope. In the above example, we are defining an attribute called username with value as money and we can bind that value in HTML like the below code.

<body>
<div ng-controller="MyController">
<h1>{{data.username}}</h1></div>
</body>


The above code will automatically get the value from the controller and make it display in the HTML page where the expression is mention.

Best Example for AngularJS Scope

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
 <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>

  <div ng-controller="AppCtrl">
    <h1>Message: {{message}}</h1>
  </div>

<script>
angular.module('myApp', [])

//The following can also be in another file as long as it is loaded afterwards

angular.module('myApp').controller("AppCtrl", ["$scope", function($scope){

   $scope.message = "This is a message";

}]);
</script>

<p>Notice that controller's color variable does not overwrite the rootScope's color value.</p>

</body>
</html>


AngularJS Root Scope


All applications have a $rootScope which is the extension made on the HTML component that contains the ng-application mandate. The rootScope is accessible in the whole application.

On the off chance that a variable has the same name in both the present extension and in the rootScope, the application utilizes the one in the present degree. At whatever point the AngularJS application is bootstrapped, a rootScope item is made. Every degree made by controllers, mandates and administrations are prototypical acquired from rootScope. AngularJS documentation is one of the best assets to figure out how scope legacy functions: see Scopes in AngularJS. Seeing how scope legacy functions will be helpful in taking after areas.



AngularJS Data Binding ng-Model

with 0 Comment
Angulars Data Binding

The angularjs Data binding is also called two-way data binding. Two-way data binding keeps the model and view in sync at all times, that is a change in the model updates the view and a change in the view updates the model.

Angularjs Data Binding
Angularjs Data Binding
                                  
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myModule">
<div ng-controller="myController">
<Input type=”text” ng-model="message">        
<br/>
{{message}}
</div>
<script>
var myApp=angular.module("myModule", [])
                 .controller("myController", function($scope){
$scope.message=”welcome to angular world”;
});
</script>
</body>
</html>



  • The Binding Expression updates the view when the model changes {{message}}                .
  • ng-model directive updates the model when the view changes.

                   <input type=”text” ng-model=”messages”/>

If you run the above program you will get the text which is already available inside the text box if you give any input to the field displaying text will get change. So whatever the data we have in the model is automatically displayed in the text box. Because the ng-model directive value is same as the module in the script.


Angularjs Data Binding- angularjs model


If you want to experiment angularjs two-way data binding just type any value in the text box above program. The value of model will get updated automatically because of that ng-model directive. This action is called two-way data binding.

AngularJS Two way data binding
AngularJS Two-way data binding
                               
If you change any value to the ng-model instead of message what will happen? There will not be any text in the text boxes. Try those things with let’s try button.

Angularjs ng-model Directives can be used with

  • input
  • select
  • Textarea

AngularJS Data Binding Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<tr>
<td>First Name</td>
<td><input typr="text" ng-model="employee.firstname"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input typr="text" ng-model="employee.lastname"></td>
</tr>
<tr>
<td>Gender </td>
<td><input typr="text" ng-model="employee.gender"></td>
</tr>
</table>
<table>
<tr>
<td>First Name</td>
<td>{{ employee.firstname }}</td>
</tr>
<tr>
<td>Last Name</td>
<td>{{ employee.lastname }}</td>
</tr>
<tr>
<td>Gender </td>
<td>{{employee.gender}}</td>
</tr>
</table>
</div>
<script>
var myApp=angular.module("myModule", [])
                                   .controller("myController", function($scope){
var employee={
firstname:"karthik",
lastname:"logan",
gender:"male"
};
$scope.employee=employee;
});
</script>
</body>
</html>


From the above example, you can get a complete idea of angularjs model and angularjs two-way data binding right. If you have any question just comment below.

Related searches:


Saturday, 16 July 2016

AngularJS Expressions - The Way of Using Expressions

with 0 Comment
AngularJS- Expressions

Angularjs Expressions are used to bind the data or values to the HTML page. These angularjs expressions are written inside two curly braces, this is similar to javascript expression or snippets. But there are a differents between angularjs expression and normal javascript expressions. This is an effort to bring JavaScript like functionalities, such as operators, parameters, conditions etc in HTML.
Angularjs Expressions
Angularjs Expressions
                           
In angularjs $parse service processes these angularjs expressions very effectively.


Difference between angularjs Expressions and normal javascript expressions:

  • We can write Angularjs expressions within a HTML page but this is not possible in javascript. 
  • You Can't make regular expressions from inside AngularJS expressions. This is to stay away from complex model transformation logic inside formats. Such rationale is better put in a controller or in a committed filter where it can be tested properly.
  • You can't compose a control flow statements in an expression. The purpose for this is center to the Angular logic that application rationale ought to be in controllers, not the views.
  • JavaScript expressions do not support filters,but in AngularJS expressions supports filters.

These are all the main differents between angularjs expression and javascript expression.

Syntax of angularjs expression:

{{ Expression }}
Angularjs Expression
Angularjs Expression
                                  
To display the results in a located or assigned place of the page we can use these expressions. Look at the following examples to get a better understanding of angularjs expression.


<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
    <div ng-app>
       Our tutorial site <b> {{ 'Angularjstutorialsng.com' }} </b>
  </div>
</body>
</html>



Angularjs Expressions in different ways


Angularjs expressions will support string value as an expression, numbers, objects, and array. we will see some examples of the above expressions.

Angular Expressions Using String

<p>welcome {{employee.firstname + " " + employee.lastname}}!</p>

Angular Expressions Using Number

<p> Dress expenses : {{cost * quantity}} Rs</p>

Angular Expressions Using objects

<p>Roll No: {{employee.rollno}}</p>

Angular Expressions Using array

<p>Marks(Math): {{marks[3]}}</p>

Angularjs Expression Example with all the above types


<html> <head> <title>AngularJS Tutorial</title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> </head> <body> <h1>Angularjs Expression example</h1> <div ng-app = "" ng-init = "quantity = 1;cost = 30; employee= {firstname:'Mahesh',lastname:'Parashar',rollno:101};marks = [80,90,75,73,60]"> <p>Hello {{employee= .firstname + " " + employee= .lastname}}!</p> <p>Dress expenses : {{cost * quantity}} Rs</p> <p>Roll No: {{student.rollno}}</p> <p>Marks(Math): {{marks[3]}}</p> </div> </body> </html>

AngularJS Expressions One-time binding

In Angularjs version 1.3, Angular produce another attribute, called the One-time binding, surprisingly. For the first time you utilize "::"  in an expression, it will make one-time binding with values. What is the use of this feature? It is not extremely straightforward for the beginners to understand, we'll clarify it.

Like whatever other application, an Angularjs application too may have numerous elements, and we bind these elements with information or data. The Angularjs $watch() API keeps a watch on every binding. It runs a loop through every one of the ties, searching for information changes. These loops can expand important resources if at any stage a perspective contains numerous data bindings.


AngularJS Controllers

with 0 Comment

What is an angularJS controller?


An angularJS controller is defined by javascript constructor function that is used to feed the angular scope. To create an angularjs controller we need ng-controller directive. when a controller is attached to the DOM via the ng-controller directive angularjs will create a new controller object, using the particular  controllers constructor function as  $scope. A controller is nothing but used to control the data of applications.

AngularJS Controller
AngularJS Controller
                                            

AngularJS Controllers


An application which contains a controller object which is controlled by that controller that controller is called angularjs controller. All controllers will accept $scope as a parameter which refers to the module that controller is to control. To understand the above line you need to know the working of angularjs modules and angularjs directives go through once.

AngularJS Controller
AngularJS Controller
       
Use of the controller is to add a behavior for the angularjs $scope object. And set up the initial value of the $scope object.

Where we shouldn’t use angularjs controller :


  1. Format input — Use angularjs form controls instead.
  2. Filter output — Use angularjs filters instead.
  3. Share code or state across controllers — Use angularjs services instead.
  4. Manage the life-cycle of other components (for example, to create service instances).

AngularJS controller Example:

In the below example The application name is firstApp this entire application is controlled by a controller called "myCtrl"  the combination of module and directive will make scope object value available in the view or display.


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="firstApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="Husband Name"><br>
Last Name: <input type="text" ng-model="Wife Name"><br>
<br>
Full Name: {{Husband Name + " " + Wife Name}}

</div>

<script>
var app = angular.module('firstApp', []);
app.controller('myCtrl', function($scope) {
    $scope.Husband Name = "John";
    $scope.Wife Name= "Doe";
});
</script>

</body>
</html>



Explanation for the above angularjs controller example


In the above program "myCtrl" function is a javascript function angularjs will add the controller with a $scope object. First of all $scope is an application object. the parameters husband name and wife name is created by the controller called "myCtrl" . The directive ng-model is used to bind the values of input boxes to the controller arguments (husbandname, wifename).

Angularjs Controllers in External File


Most of the time we use an external file to store javascript code. For a larger application storing the external file is the best way.

To do that just copy the code which is in between <script> and </script>. Then place that in an external file (example myapp.js ) finally include this file in your HTML page look at the below example.

Include the below line to include ng-controller.js file in your application page.

<script src="js/ng-controllers.js"></script>

ng-Controller.js file code

angular.module('directives',[])
    .directive('example', function () {
        return {
            //implementation
        }
    })
    .directive('example1', function () {
            return {
                //implementation
            }
    });


This is how we can create and use angularjs controller if you have any doubts please feel free to ask. Use the comment box below

You Should Also Know:



AngularJS Directives

with 0 Comment
Andularjs directives are used to extend the functionality of HTML. Directive functions are used to define custom directives.  Angularjs has a set of built-in directives which provides functionality to your application.  AngularJS application during bootstrap finds the coordinating components and do one-time movement using its compile() method for the custom order then process the component using a link() method for the custom mandate in view of the extent of the mandate. AngularJS gives backing to make custom directives.

  • Attribute.
  • Element directives.
  • CSS.      
  • Comment.

AngularJS Directives Example:   



AngularJS directives are extended HTML attributes with the prefix  ng- .
  • The ng –app directives initializes an angularjs application.
  • The ng –init directives initializes application data.
  • The ng-model directive binds the value of HTML controls (input, select, text area) to application data.
  • The ng-controller directives used to control the value of entire application of the page
  • The ng-repeat directive repeats an HTML element.


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="" ng-init="Name='John'">

<p>Enter any values in the below text box:</p>
<p>Name: <input type="text" ng-model="Name"></p>
<p>You wrote: {{ Name }}</p>

</div>

</body>
</html>


Data Binding



The {{ name }} expression, in the example above, is an AngularJS data binding expression.

Data binding in AngularJS binds AngularJS expressions with AngularJS data.

{{ name }} is bound with ng-model="name".


The ng-app Directive


The ng-app directive defines the root element of an AngularJS application.

The ng-app directive will auto-bootstrap (automatically initialize) the application when a web page is loaded.

The ng-init Directive

The ng-init directive defines initial values for an AngularJS application.

Normally, you will not use ng-init. You will use a controller or module instead.

You will learn more about controllers and modules later.

The ng-model Directive

The ng-model directive binds the value of HTML controls (input, select, text area) to application data.

The ng-model directive can also:

Provide the status for application data (invalid, dirty, touched, error).

Provide CSS classes for HTML elements.

Bind HTML elements to HTML forms.

Will see all in details in the next session.

You should also know:


Friday, 15 July 2016

AngularJS - Modules

with 0 Comment

What is AngularJS module?


AngularJS support module approach. An angularjs module defines an application. From the word module, you can get the meaning right means angularjs module is used to separate different part of an application or the module is a container which contains different parts of an application like Services, filters, directives, controllers, application and so on. The module is defined in a separate file we will discuss this angularjs module with some example.

AngularJS Modules
AngularJS Modules
                                
You can think of an angularjs module as a main() method in other types of applications. Modules declaratively specified how the angular application should be bootstrapped. There are a lot of benefits of using module approach we will discuss few in this tutorial.

How to create a module?


Creating a module in angularjs is a pretty straight forward. Use the angularjs object’s module() method to create a module.

“var  exampleApp = angular.module (“exampleModule”,[]);”

Note one thing The module  object which is provided by angular contains 2 parameters those are

  • First, parameter specifies the name of the module (exampleModule).
  • The second parameter specifies the dependencies for the module.


An angularjs module can depend on other angularjs modules. But now in the above angular module that does not depend on any module we pass an empty array for the second parameter. This is how we can create a simple angularjs module.

What is a controller in angularjs?


In angulajs, a controller is a javaScript function. The controller is used to build a module for the view to display.

Angularjs Controller
Angularjs Controller working
          

How to create a controller in angularjs?


To create an angularjs controller is very simple just create a javaScript constructor function like below.

“Var exampleController = function($scope){
$scope.message = “angularjs module & controller tutorial”;
};

Note that in the above create example for controller there is an anonymous function and we are assigning that to a variable called “exampleController” this is an example of an angular controller function.

In that function, we are passing one parameter called “$scope “ do you know about this parameter $scope? $scope is an angular object that is passed to this angular controller function by the angular framework automatically. We attach the module for this $scope object then only this object available in the view. So within the view, we can use the data binding expression to retrieve the data from the scope object and display.

From the above example, we are attaching a message variable to the $scope object and storing the message string (angularjs module & controller tutorial) in the property. So the message property will be available in the view. Let’s have one example for this try that with let’s try button.

var  exampleApp = angular.module (“exampleModule”,[]);
Var exampleController = function($scope) {
$scope.message = “angularjs module & controller tutorial”;
};
exampleApp.controller(“exampleController”, function($scope) {
$scope.message = “angularjs module & controller tutorial”;
};);


In the above example, we create an anonymous function and assigning it to a variable then we are passing that variable to the controller instead of that we can do the things like below.


var  exampleApp = angular.module (“exampleModule”,[]);
exampleApp.controller(“exampleController”, function($scope) {
$scope.message = “angularjs module & controller tutorial”;
};            
 );


From the above, we can able to do two steps in a single line that is creating an angularjs controller function and register that to a module.

Now we need to associate this module with mg-module directive and controller with the ng-controller directive in the HTML page like below example.

Angularjs Module- Controller Example: 


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app= “exampleModule“ ng-controller=” exampleController”>
{{ message }}
</div>
<div>
{{ message }}
</div>
 
</body>
<script>
var  exampleApp = angular.module (“exampleModule”,[]);
exampleApp.controller(“exampleController”, function($scope) {
$scope.message = “angularjs module & controller tutorial”;
};            
 );
</script>
</html>


So from the above example, angularjs module and controller are combining to display the message property value. In the second div that will not display anything because that is not having any controller which is associated with that property.

Use the let's try option and comment and ask your doubts in the comment box bellow. 

Thursday, 14 July 2016

AngularJS MVC Concept

with 0 Comment
AngularJS MVC Concept - With Example

Angularjs MVC Architecture:  MVC (model view controller) is widely used software design pattern for developing web based applications. If you already worked with PHP, ASP then this concept will be very familiar to you. If you don’t know about MVC that is not a problem we will explain  you about MVC with examples. In Angularjs MVC it contains three parts those are---

Angularjs MVC concept
Angularjs MVC concept
                                 

Model – How the application behaves with data’s

View – whatever visible to the user.

Controller – This is what the coding would act between model and view.


AngularJS MVC –Model


In angularjs MVC, The model for a controller contains the information to be shown, and in addition, information to be gathered in any information fields or structures. Furthermore, models may contain functions that are conjured in light of client info or different exercises like clicking a catch or rolling out improvements to the model information.

Angularjs MVC concept
Angularjs MVC concept
                                  
The $scope object injected into the controller can be utilized as the model specifically. For the straightforward case over, the accompanying code can be utilized to announce and set a quality on the model.

var indexController = hackApp.controller("indexController", function ($scope) {
// controller logic goes here
$scope.message = "Hello Hacking World"
}
);


AngularJS MVC –  View


A presentation of information in a specific form, activated by the controller's choice to show the information. They are script-based layout frameworks, for example, JSP, ASP, PHP and simple to coordinate with AJAX innovation.

Views are nothing but an HTML page this is used to display content and data to the users through browser. In Angular MVC view use expressions to insert data into view.

Eg: <html tag>{{view data}} </html tag>

AngularJS MVC –  Controller


Controller will act as a link between model and view like the below structure
               “Model <-----------Controller-------------> View “
Both model and view are isolated from each other the controller makes a bridge between these two. The MVC architecture is widely used concept because of isolated model and view in Agularjs.
So the controller receives all the information from the user via a view and passes that to the model.
On model similarly whatever it does with the data from the view it passes that to the controller. the controller may or may not modify the data and give that to the view that is the user. So the controller will react for both view and model.

Angularjs MVS Example:


<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="demo" ng-controller="DemoController">
    Postal Code: <input type=text ng-model="query.postalCode">
    Country: <input type=text ng-model="query.countryCode">
    <button ng-click="performPostcodeLookup()">Lookup</button><br>
    Result: {{lookupResult.displayValue}}
</div>

<script>
var demoModule = angular.module("demo", []);

function DemoController($scope, $http) {
   $scope.query = {
      postalCode: "97845",
      countryCode: "DE"
   };

   $scope.lookupResult = {
      displayValue: "Not yet retrieved"
   };

   $scope.performPostcodeLookup = function () {
      var url = "http://api.geonames.org/postalCodeLookupJSON?" +
         "postalcode=" + $scope.query.postalCode +
         "&country=" + $scope.query.countryCode +
         "&username=henriquatre" +
         "&callback=JSON_CALLBACK";

      $http.jsonp(url).then(function (response) {
         var data = response.data;
         if (data.status) {
            $scope.lookupResult.displayValue = "Error: " + data.status.message;
         } else {
            if (data.postalcodes.length === 0) {
               $scope.lookupResult.displayValue = "No data found";
            } else {
               $scope.lookupResult.displayValue = data.postalcodes[0].placeName;
            }
         }
      }, function (data, status) {
         $scope.lookupResult.displayValue = "HTTP Error - " + status;
      });
   }

}

</script>
</body>
</html>


Just try the above example if you have any doubts just use the comment box below.

You should know: