Basics of AngularJS

Basics of Angularjs:part 1ByGowtham RajamanickamOnAPR, AngularJS

I have planned to start writing about AngularJS. I have begun to learn AngularJS a few months back, it's a great feature for website UI developers. It is also easy to learn with interesting features available in this tutorial.

I have prepared a tutorial designed for the beginners wanting to learn the basics of AngularJS and its programming concept s in a simple and easy procedure. I'll describe the components of AngularJS with suitable examples.

Angular is open source, completely free and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

AngularJS version 1.0 is released in 2012.

Miško Hevery, a Google employee, begun to work with AngularJS in 2009.

The idea turned out very well and the project are now officially supported by Google.

Reference for Angular JS Tutorial:w3schools,tutorialspoint and C # Corner Member DJ for Angular JS.

What AngularJS is

Angular is a very powerful JavaScript library. It is used on single Page application (SPA) projects. It extends the HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free and used by thousands of developers around the world. It is licensed under the Apache License version 2.0.

Features

• AngularJS is a powerful JavaScript based development framework to create RICH Internet application (RIA).
• Applications written in AngularJS is Cross-browser compliant. AngularJS automatically handles JavaScript code suitable for each browser and it's a clean Model View Controller (MVC)

Prerequisites

• Basic understanding of JavaScript and any text editor.
• Web technologies such as HTML, CSS, AJAX and so on.
• First, you'll learn the basics of angularjs:directives, expressions, filters, modules and controllers.
• Then you'll learn everything else you need to being familiar with Angular.
• Events, DOM, Forms, Input, Validation, HTTP.
• Any and editor like Jsfiddle or W3 schools editor to test the output.

The AngularJS framework can be divided into the following three major parts:

• Ng-app:this directive defines and links an AngularJS application to HTML.
• Ng-model:this directive binds the values of AngularJS application data to HTML input controls (input, select, text area).
• Ng-bind:this directive binds the AngularJS application data to HTML tags and views.

AngularJS is a JavaScript Framework

AngularJS is a JavaScript framework. It's a library written in JavaScript. Within the script tag use an Angular JS reference file.

1. <script src= "Http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" ></script>

Example

Step 1

The Ng-app directive tells AngularJS, the <div> element is the ' owner ' of an AngularJS application.



Step 2

The Ng-model directive binds the value of the input field to the application variable name.



Step 3

The ng-bind directive binds the InnerHTML of the <p> element to the application variable name.



Ng-init: The ng-init directive initializes AngularJS application variables.



Expressions: AngularJS Expressions is written inside double braces: {{expression}}. Sample:if want to add a-digit use, {{4+5}}



AngularJS expressions bind AngularJS data to HTML the same as the Ng-bind directive.



You'll learn about models and controllers later in this tutorial.

Basics of Angularjs:part 2ByGowtham RajamanickamOnAPR,I had planned to the start writing about AngularJS. I began to learn AngularJS a few months back, it's a great feature for website UI developers. It is also easy to learn with the interesting features available in this tutorial.

I prepared a tutorial designed for the beginners wanting to learn the basics of AngularJS and their programming concepts in A simple and easy procedure. I'll describe the components of AngularJS with suitable examples.

The reference for Angular JS is tutorial:w3schools,tutorialspoint and C # Corner Member DJ for Angular JS.

In my previous article I explained Angujar JS, its prerequisites, features and basic syntax. Basics of Angularjs:part 1

In the article I would like to share MVC patterns in Angular JS.

• Model
  
  It's the lowest level of the pattern responsible for maintaining data. The model is responsible for managing application data. It responds to the request from the view and to the instructions from the Controller to update itself.
  
  
• View
  
  The View is responsible for displaying all, or a portion of, the data to the user. A presentation of data in a specific format, triggered by the Controller's decision to present the data. They is script-based template systems such as JSP, ASP, PHP and very easy-to-integrate with AJAX technology.

• Controller
  
  A Controller is software code that controls the interactions between the Model and View. The controller responds to user input and performs interactions on the data model objects. The controller receives input, validates it and then performs business operations that modify the state of the data model.
  
  AngularJS is a MVC based framework. In the future chapters, we'll see how AngularJS uses MVC methodology.
  
  

AngularJS Controllers

An AngularJS application mainly relies on controllers to control the flow of data in the application. A controller is defined using the Ng-controller directive. A controller is a JavaScript object containing attributes/properties and functions.

Each controller accepts $scope as a parameter this refers to the Application/module, the controller is to control.

1. <div ng-app="" ng-controller="Inputcontroller">
2. ...  
3. </div>

AngularJS applications is controlled by controllers.

The Ng-controller directive defines the application controller.

A controller is a JavaScript object that created by a standard JavaScript object constructor.

2. < div ng-app = "myApp"
4. Ng-controller = "Inputctrl" > First Name: < input type = "text"
6. Ng-model = "FirstName" > < br > Last Name: < input type = "text"
8. Ng-model = "LastName" > < br > < br > Full Name:
10. {  
12.     {  
14. firstName + "" + lastName
16.     }  
18. }  
20.   
22. </div>
24.   
26. <script>
28. var app = Angular.module (' myApp ', []);
30. App.controller (' Inputctrl ', function($scope)
32. {  
34. $scope. FirstName = "";
36. $scope. LastName = "";
38. });
40. </script >

explanation

In this example Ng-app runs inside a <div>.

This ng-controller directive defines a controller.

The Inputtrl function is a JavaScript function. AngularJS would invoke the controller with a $scope object.

In AngularJS, $scope is the Application object (the owner of the application variables and functions).

The controller creates the properties (variables) in the scope (FirstName and LastName).

The Ng-model directives bind the input fields to the controller properties (FirstName and LastName).



The preceding example we have used the properties of first name and last name.

The same as in the preceding example, here we is returning the first name and last name to the HTML value.

explanation

1. Full Name: {{fullName ()}}
2.   
3. $scope. FullName = function()
   {  
4. return $scope. FirstName + "" + $scope. LastName;
5. }

Source Code

2. <div ng-app="myApp" ng-controller="Inputctrl">
4.   
6. First Name: <input type="text" ng-model="FirstName"><br>
8. Last Name: <input type="text" ng-model="LastName"><br>
10. <br>
12. Full Name: {{fullName ()}}
14.   
16. </div>
18.   
20. <script>
22. var app = Angular.module (' myApp ', []);
24. App.controller (' Inputctrl ', function($scope) {
26. $scope. FirstName = "";
28. $scope. LastName = "";
30. $scope. FullName = function() {
32. return $scope. FirstName + "" + $scope. LastName;
34. }  
36. });
38. </script>

Controllers in External Files

We can use a external file also for this method. In larger applications, it's common to store controllers in external files.



The following is another example to bind the employee details from a external file:

2. angular.module (' myApp ', []). Controller (' Namesctrl ', function($scope) {
4. $scope. Employees = [{
6. name: ' Gowtham ',
8. Country: ' Karur '
10.     }, {  
12. name: ' Kiruthiga ',
14. Country: ' Tirupur '
16.     }, {  
18. name: ' GK ',
20. Country: ' Chennai '
22.     }];
24. });

src:http://www.c-sharpcorner.com/uploadfile/91b369/basics-of-angular-js-part-1/src:http:// www.c-sharpcorner.com/UploadFile/91b369/basics-of-angularjs-part-2/

Basics of AngularJS