Basics of AngularJS: Part 1

By Gowtham Rajamanickam on Apr 09, 2015 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 concepts in a simple and easy procedure. I will 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 was 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 is 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 in 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 is 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 will learn the basics of AngularJS: directives, expressions, filters, modules and controllers.
• Then you will learn everything else you need to be familiar with Angular.
• Events, DOM, Forms, Input, Validation, HTTP.
• Any other 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 is 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 that 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 are written inside double braces: {{ expression }}. Sample: if you want to add a two digit use , {{4+5}}

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

You will learn about models and controllers later in this tutorial.

Basics of AngularJS: Part 2

By Gowtham Rajamanickam on Apr 14, 2015

I had planned to 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 its programming concepts in a simple and easy procedure. I will 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 this article I would like to share MVC patterns in Angular js.

• Model

  It is 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 are 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 will 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 that refers to the application/module that the controller is to control.

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

AngularJS applications are controlled by controllers.

The ng-controller directive defines the application controller.

A controller is a JavaScript Object, created by a standard JavaScript object constructor.

1. < div ng - app = "myApp"
2. ng - controller = "inputctrl" > First Name: < input type = "text"
3. ng - model = "firstName" > < br > Last Name: < input type = "text"
4. ng - model = "lastName" > < br > < br > Full Name:
5. {
6. {
7. firstName + " " + lastName
8. }
9. }
10. < /div>
11. <script>
12. var app = angular.module(‘myApp‘, []);
13. app.controller(‘inputctrl‘, function($scope)
14. {
15. $scope.firstName = "";
16. $scope.lastName = "";
17. });
18. </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 will 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 two properties (variables) in the scope (firstName and lastName).

The ng-model directives bind the input fields to the controller properties (firstName and lastName).

In the preceding example we have used two properties, first name and last name.

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

Explanation

1. Full Name: {{fullName()}}
2. $scope.fullName = function() 
   {
3. return $scope.firstName + " " + $scope.lastName;
4. }

Source Code

1. <div ng-app="myApp" ng-controller="inputCtrl">
2. First Name: <input type="text" ng-model="firstName"><br>
3. Last Name: <input type="text" ng-model="lastName"><br>
4. <br>
5. Full Name: {{fullName()}}
6. </div>
7. <script>
8. var app = angular.module(‘myApp‘, []);
9. app.controller(‘ inputCtrl‘, function($scope) {
10. $scope.firstName = "";
11. $scope.lastName = "";
12. $scope.fullName = function() {
13. return $scope.firstName + " " + $scope.lastName;
14. }
15. });
16. </script>

Controllers In External Files

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

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

1. angular.module(‘myApp‘, []).controller(‘namesCtrl‘, function($scope) {
2. $scope.Employees = [{
3. name: ‘Gowtham‘,
4. country: ‘karur‘
5. }, {
6. name: ‘kiruthiga‘,
7. country: ‘Tirupur‘
8. }, {
9. name: ‘GK‘,
10. country: ‘Chennai‘
11. }];
12. });

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/