The Basics Angular JS

Getting Started With
Getting Started With
Ref: OICS/TR/PPT/101

Presentation By,
Presentation by,
Mr.Manoj Mohan
OrisysIndia Consultancy Services,Technopark

Introduction
AngularJS is an open source web application framework. It was originally developed in 2009 by
Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.4 .
Defenition :
"AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your
template language and lets you extend HTML's syntax to express your application's components
clearly and succinctly. Angular's data binding and dependency injection eliminate much of the
code you currently have to write. And it all happens within the browser, making it an ideal partner
with any server technology".

Features
● AngularJS is a powerful JavaScript based development framework to create RICH Internet
Application(RIA).
● AngulajJS provides developers options to write client side application (using JavaScript) in a
clean MVC(Model View Controller) way.
● Application written in AngularJS is cross-browser compliant. AngularJS automatically
handles javascript code suitable for each browser.
● 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.
● Overall, AngularJS is a framework to build large scale and high performance web appliation
while keeping them as easy-to-maintain.

Why angular JS ?
●Defines numerous ways to organize web application at client side.
●Enhances HTML by attaching directives, custom tags, attributes, expressions, templates within
HTML.
●Encourage TDD
●Encourage MVC/MVVM design pattern
●Code Reuse
●Good for Single Page Apps (SPA)

Core Features
Expression
Angular JS
Modules
Controllers
Directives
Validators
Providers
Data Binding
Factories
Services
Filters
Dependency Injection
Scope

Architecture
Event
Controller
View
Model

Application
Before we start with creating actual HelloWorld application using AngularJS, let us see
what are the actual parts of a AngularJS application. An AngularJS application consists
of following three important 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.
ng-bind : This directive bidns the AngularJS Application data to HTML tags.

Test App
<html>
<title>AngularJS First Application</title>
<body>
<h1>Sample Application</h1>
<div ng-app="">
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.m
in.js"></script>
</body>
</html>

AngularJS Directives
AngularJS directives are used to extend HTML. These are special attributes starting with ng-
prefix. We're going to discuss following directives:
ng-app - This directive starts an AngularJS Application.
ng-init - This directive initializes application data.
ng-model - This directive defines the model that is variable to be used in AngularJS.
ng-repeat - This directive repeats html elements for each item in a collection.

AngularJS Controllers
<html>
<head>
<title>Angular JS Controller</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp" ng-controller="studentController">
Enter first name: <input type="text" ng-model="student.firstName"><br><br>
Enter last name: <input type="text" ng-model="student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>

AngularJS Controllers
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>

Ajax test code
<html>
<head>
<title>Angular JS Includes</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table>
<tr ng-repeat="student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>

Hello JQuery
<p id="greeting2"></p>
<script>
$(function(){
$('#greeting2').text('Hello World!');
});
</script>

Hello AngularJS
<p ng:init="greeting = 'Hello World!'">{{greeting}}</p>

Html Dom
1 ng-disabled disables a given control.
2 ng-show shows a given control.
3 ng-hide hides a given control.
4 ng-click represents a AngularJS click event.

Advanced AngularJS Concept
•Dependency Injection
•Modularity
•Digesting
•Scope
•Handling SEO
•End to End Testing
•Promises
•Localization
•Filters

Services
This service is used to display toast message for every action.
Sample Code:-
mainApp.service('getToast', ['$mdToast', '$animate', function($mdToast,
$animate) {
this.messageBox = function(msg, type) {
var box = $mdToast.show(
$mdToast.simple()
.textContent(msg)
.position('top right')
.theme(type)
.hideDelay(2000)
);
return box;
}
}]);

Factory
This factory is used to list users which is saved as json file.
Sample Code
mainApp.factory('myAppFactory', function($http) {
return {
getData: function() {
return $http({
method: 'GET',
url: 'json/userlist.json'
});
}
}
})

Dis-advantage
Angular is not the silver bullet. Some of its disadvantages are backsides of its strong points, some
are inherent to the JavaScript ineffectiveness that could not be overcome even with the best
derivatives.
The weaknesses are:
● Angular is big and complicated. With multiple ways to do the same thing it is hard to tell which
way is better for particular task. Mastering Angular over the “Hello world” level requires
considerable efforts. Different developers’ coding styles and habits might complicate integration of
different components into a whole solution.
●The lifecycle of Angular application is complex, and to master it you really need to read the code.
Compile and link are not intuitive, and specific cases can be confusing (recursion in compile,
collisions between directives etc.).
●As the project grows with time, you most likely will need to throw away existing implementations
and create new versions using different approaches. Angular implementations scale poorly.
●More than 2000 watchers can severely lag the UI. That limits the complexity of your Angular
forms, especially big data grids and lists.

Basement (-2), Thejaswini Building
Technopark, Kerala 695 581, India
www.orisys.in
Email: contact@orisys.in ,
Office (Technopark) :+91-9946 014 345
Office (Sasthamangalam) :+91-8086 800 203

The Basics Angular JS

Recommended

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to The Basics Angular JS (20)

Recently uploaded (20)

The Basics Angular JS