AngularJS Tutorials-ng

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.

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.

Sunday, 17 July 2016

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

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

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.

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.

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 rootScopeitem 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.

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.

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.

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

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.

Related searches:

Saturday, 16 July 2016

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.

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.

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.

Suggested Topics:

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 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

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 :

Format input — Use angularjs form controls instead.

Filter output — Use angularjs filters instead.

Share code or state across controllers — Use angularjs services instead.

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.

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.

You Should Also Know:

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.

You should also know:

Friday, 15 July 2016

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

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.

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.

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 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

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

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.

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.

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.