Learn AngularJS From Beginning - Part One

Daisy Princess
8y
34.9k
0
9

Article

Actually, In this article, we will discuss about the basics of Angular js. Also we will discuss how to write down a very basic program in AngularJS.

Introduction to AngularJS

In 1990, Tim Berners Lee introduced a new markup language named HTML (Hyper Text Markup Language). The main objective of developing HTML was sharing information between different computers in a common readable format. At the beginning HTML is used to share static documents with hyperlinks and allow navigation between them. After that, in 1993, with the introduction of CGI (Common Gateway Interface), it was possible to display dynamic content generated by server side applications. At that time, Perl then followed by Java, PHP etc. were used for this purpose. But still interaction with complex applications through the browser was not enjoyable work and also sometimes, this task becomes to very hard to execute. But technology always kept moving forward. So at the same time, new versions of JavaScript, CSS and HTML were growing in popularity and also transforming the future of the web at a high level. AngularJS is a part of this new generation of libraries and frameworks that came to support the development of more productive, flexible and testable environments for web applications.

AngularJS was actually introduced in 2009 by Misko Hevery and Adam Abrons as an open source, client side javascript based framework that supports a high productivity web development experience. It was built on the belief that declarative programming is the best choice to construct the user interface, while imperative programming is much better and preferred to implement an application's business logic. To achieve this, AngularJS used traditional HTML by extending its current vocabulary, making the life of developers easier. In 2010, Miško Hevery was working at Google on a project called Feedback. For the large size of code in that project, Misko rewrote the project using his own client side framework and reduced the code size by nearly 10 times. Nowadays, the framework is used by more than 100 projects just at Google. The name of the framework was given by Adam Abrons, and it was inspired by the angle brackets of the HTML elements.

JavaScript Client Side Framework

JavaScript based client side application always runs in user’s device or PC and so, it shifts the workload to the user’s hardware and away from the server. At the same time, like other server side based MVC frameworks like Struts, Spring MVC or ASP.NET do not switch the entire load from server machine to the client machine. Javascript based client side framework provides many significant advantages such as simplicity, rapid development, testability and also the ability to package the entire application and deploy it on all mobile devices and the web with related ease.

AngularJS makes the process even more faster and easier. Angular JS helps us to develop the frontend UI in a small time with proper support of unit testing for the client side code. Models and views in AngularJS are much simpler that what you find in most Javascript client side frameworks. Controllers, often missing in other javascript frameworks are likely most functional components in Angular JS. Once the AngularJS application is launched, the model, view, controller and all HTML documents are loaded on user’s device and completely run on the user’s hardware. As per the below diagram, we can see that calls are made to the backend REST services, where all business logic and business processes are loaded. The backend REST service can be located on any server either it is a private web server or a cloud server.

ng-app

Now we can write the same program with declaring the angular module just line below. Now the definition of angular module is as below –

var myAppModule = angular.module('myApp', []);

Write a Hello World in Angular JS

For doing this, we need to create one html file and another js file.

Code of App.js

var testApp = angular.module('TestApp', []);

Code of HelloWorld.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<title>Angular Js</title>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="HelloWorld.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>

Code of Helloworld.js

testApp.controller('HelloController', function ($scope) {
$scope.greeting = { text: 'Hello' };
});

Basically angular module acts as a main entry point of the angular applications. The pair bracket basically indicates the dependency injection concepts. This is one of the main advantages of AngularJS. Dependency injection (DI) is a design pattern where dependencies are defined in an application as part of the configuration. It helps us to avoid creating manual application dependencies. AngularJS uses dependency injection to load module dependencies when an application first starts. Actually dependency injection is not a new concept. It was around 10 years old concept and although it was consistently used in various frameworks.

Angular JS Models ($scope)

Many JavaScript client side frameworks also require you to create javascript model class. But it has not happened with AngularJS. AngularJS has a $scope objects that is used to store the application models. Scopes are attached to the DOM. The way to access the model is by using data properties to the $scope objects. The AngularJS $scope helps to simply Javascript Applications considerably. In AngularJS, $scope is used to gain access to the model related to a particular controller. $rootscope is a parent scope that can be used to save and access model properties that span multiple controllers. The use of $rootscope is highly discouraged in most designs, however. There is a only one $rootscope in an application. $scope is a child scope of $rootscope. A properly designed AngularJS application will have little or ideally no use of $rootscope to store model properties. Model properties can be added to the scope objects and once added they are available inside the view html templates.

Angular JS Controllers (ng-controllers)

In AngularJS, controllers act as a connection or bridge between views (i.e. HTML) and models (i.e. $scope). Controller is the area where we place all business logic specific for a particular view. When business logic is placed inside an application used by multiple controllers, it should be placed in AngularJS non-REST Services instead. Those services can be injected into any controller which needs to access that business logic with the help of dependency injection.

AngularJS controllers are the center of AngularJS applications and are probably the most important component to understand. AngularJS controllers have two main duties in an application. First, controllers should be used to initialize the model scope properties. When a controller is created and attached to the DOM, a child scope is created. The child scope holds a model used specifically for the controller to which it is attached. We can access the child scope by using $scope objects.

The second primary use of controllers is adding behavior of the $scope objects. We add behavior by adding method to the scope objects.

Presentation logic should not be placed inside the controllers but instead should be placed in the view. AngularJS has many features for DOM manipulation that help you avoid placing presentation logic in the controllers. The controller is also not the place where you should format data. AngularJS has features especially designed for formatting data, and that’s where data formatting should take place.

I will demonstrate the concept of controller objects in below example.

FirstProg.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<title>Angular Js -- First Prog</title>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="FirstProg.js"></script>
</head>
<body>
<div ng-controller="FirstProgController">
<h1>Enter Your Name :</h1>
<input type="text" width="200px" ng-model="name" />
<h2>Your Name : {{name}}</h2>
</div>
</body>
</html>

FirstProg.Js

testApp.controller('FirstProgController', function ($scope) {
$scope.name = '';
});

Nested Controller

In AngularJS, we can use the controllers in a nested concept. Since we need to attach the controller with the DOM, so we can attach multiple controllers at different levels of the DOM hierarchy. Since the controller directive creates a new child scope, so we get a hierarchy of scopes that inherit from each other. The $scope that each Controller receives will have access to properties and methods defined by Controllers higher up the hierarchy. In the below example, we create 3 nested controller directives which results to create four different scopes for the view -

The root scope
The FirstController scope, which contains message and userName properties
The SecondController scope, which inherits the message property but overrides (hides) the userName property from the previous
The ThirdController scope, which overrides (hides) both the message property defined in FirstController and the userName property defined in SecondController.

In the below example, I will demonstrate this concept of nested controller.

Nestted.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<title>Angular Js -- First Prog</title>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="nested.js"></script>
</head>
<body>
<div ng-controller="FirstController">
<p>Welcome {{username}}, {{message}}!</p>
<hr />
<div ng-controller="SecondController">
<p>Welcome {{username}}, {{message}}!</p>
<hr />
<div ng-controller="ThirdController">
<p>Welcome {{username}}, {{message}}!</p>
</div>
</div>
</div>
</body>
</html>

nested.js

testApp.controller('FirstController', function ($scope) {
$scope.username = 'Rabin';
$scope.message = 'You logged in after 7 days.';
});
testApp.controller('SecondController', function ($scope) {
$scope.username = 'Scott';
});
testApp.controller('ThirdController', function ($scope) {
$scope.username = 'Thomash';
$scope.message = 'This is your first time login..';
});

ControllerAs Syntax

From AngularJS 1.1.5, angularjs introduced support for “Controller As” syntax. Using controller as makes it obvious which controller you 1are accessing in the template when multiple controllers apply to an element.

ControllerAs.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
<title>Angular Js -- First Prog</title>
<script src="angular.js"></script>
<script src="app.js"></script>
<script src="ControllerAs.js"></script>
</head>
<body>
<div ng-controller="TestController as a">
<h2>Hello {{a.username}}</h2>
<h1>Enter Your Name :</h1>
<input type="text" width="200px" ng-model="a.name" />
<h2>Your Name : {{a.name}}</h2>
</div>
</body>
</html>

ControllerAs.js

testApp.controller('TestController', function () {
var self = this;
self.name = '';
self.username = 'Sujit';
});