Kalp Corporate Angular Js Tutorials

ANGULARJS DEVELOPER
SHREYA BADIANI
kalpcorporateinfo@kalpcorporate.comkalpcorporate.com

ANGULARJS
 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.
 https://angularjs.org

FEATURES
 AngularJS is a powerful JavaScript based development
framework to create RICH Internet Application(RIA).
 AngularJS 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.

FEATURES
 Data-binding − It is the automatic synchronization of data
between model and view components.
 Scope − These are objects that refer to the model. They act as a
glue between controller and view.
 Controller − These are JavaScript functions that are bound to a
particular scope.
 Services − AngularJS come with several built-in services for
example $http to make a XMLHttpRequests. These are singleton
objects which are instantiated only once in app.
 Filters − These select a subset of items from an array and
returns a new array.
 Directives − Directives are markers on DOM elements (such as
elements, attributes, css, and more). These can be used to
create custom HTML tags that serve as new, custom widgets.
AngularJS has built-in directives (ngBind, ngModel...)
 Templates − These are the rendered view with information from
the controller and model. These can be a single file (like
index.html) or multiple views in one page using "partials".
 Routing − It is concept of switching views.

FEATURES
 Model View controller − MVC is a design pattern
for dividing an application into different parts (called
Model, View and Controller), each with distinct
responsibilities. AngularJS does not implement
MVC in the traditional sense, but rather something
closer to MVVM (Model-View-ViewModel). The
Angular JS team refers it humorously as Model
View Whatever.
 Dependency Injection − AngularJS has a built-in
dependency injection subsystem that helps the
developer by making the application easier to
develop, understand, and test.

ADVANTAGES OF ANGULARJS
 AngularJS provides capability to create Single Page
Application in a very clean and maintainable way.
 AngularJS provides data binding capability to HTML
thus giving user a rich and responsive experience
 AngularJS code is unit testable.
 AngularJS uses dependency injection and make use of
separation of concerns.
 AngularJS provides reusable components.
 With AngularJS, developer write less code and get more
functionality.
 In AngularJS, views are pure html pages, and controllers
written in JavaScript do the business processing.

DISADVANTAGES OF ANGULARJS
 Not Secure − Being JavaScript only framework,
application written in AngularJS are not safe. Server
side authentication and authorization is must to
keep an application secure.
 Not degradable − If your application user disables
JavaScript then user will just see the basic page
and nothing more.

THE ANGULARJS COMPONENTS
 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 binds the AngularJS
Application data to HTML tags.

MVC
 Model View Controller or MVC as it is popularly
called, is a software design pattern for developing
web applications. A Model View Controller pattern is
made up of the following three parts −
 Model − It is the lowest level of the pattern
responsible for maintaining data.
 View − It is responsible for displaying all or a
portion of the data to the user.
 Controller − It is a software Code that controls the
interactions between the Model and View.

STEPS TO CREATE ANGULARJS APP
Step-1
 We have included the AngularJS JavaScript file in
the HTML page so we can use AngularJS −
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1
.3.14/angular.min.js"> </script>
Step-2
 Define AngularJS Application using ng-app directive
<body ng-app = "myapp"> </body>

STEPS(CONTI..)
Step 3
 Define a model name using ng-model directive
<p>Enter your Name: <input type = "text" ng-
model = "name"></p>
Step-4
Bind the value of above model defined using ng-bind
directive.
 <p>Hello <span ng-bind = "name"></span>!</p>

HOW ANGULARJS INTEGRATES WITH
HTML
 ng-app directive indicates the start of AngularJS
application.
 ng-model directive then creates a model variable
named "name" which can be used with the html
page and within the div having ng-app directive.
 ng-bind uses the name model to be displayed in the
html span tag whenever user input something in the
text box.
 Closing</div> tag indicates the end of AngularJS
application

USE ABOVE MENTIONED THREE STEPS IN AN HTML
PAGE.
<html>
<head>
<title>AngularJS First Application</title> </head>
<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.
min.js">
</script>
</body>
</html>

OUTPUT
Sample Application
Enter your Name:
Hello !

EXPRESSION
 Expressions are used to bind application data to
html. Expressions are written inside double braces
like {{expression}}. Expressions behaves in same
way as ng-bind directives. AngularJS application
expressions are pure javascript expressions and
outputs the data where they are used.
 <p>Hello {{student.firstname + " " +
student.lastname}}!</p>

CONTROLLER
 AngularJS application mainly relies on controllers to
control the flow of data in the application. A
controller is defined using ng-controller directive. A
controller is a JavaScript object containing
attributes/properties and functions. Each controller
accepts $scope as a parameter which refers to the
application/module that controller is to control.
 <div ng-app = "" ng-controller =
"studentController"> ... </div>

FILTER
 Filters are used to change modify the data and can
be clubbed in expression or directives using pipe
character. Following is the list of commonly used
filters.

Sr.No. Name Description
1 uppercase converts a text to
upper case text.
2 lowercase converts a text to
lower case text.
3 currency formats text in a
currency format.
4 filter filter the array to a
subset of it based on
provided criteria.
5 orderby orders the array based
on provided criteria.

MODULE
 AngularJS supports modular approach. Modules
are used to separate logics say services,
controllers, application etc. and keep the code
clean. We define modules in separate js files and
name them as per the module.js file. In this
example we're going to create two modules.
 Application Module − used to initialize an
application with controller(s).
var mainApp = angular.module("mainApp", []);

MODULE(CONTI..)
 Controller Module − used to define the controller.
mainApp.controller("studentController",
function($scope) {
……
…
});

AJAX CALL:
 AngularJS provides $http control which works as a
service to read data from the server. The server
makes a database call to get the desired records.
AngularJS needs data in JSON format. Once the
data is ready, $http can be used to get the data
from server

$ROUTE
 $routeProvider is the key service which set the
configuration of urls, map them with the
corresponding html page or ng-template, and attach
a controller with the same.

LINKS
 https://angularjs.org/
 http://campus.codeschool.com/courses/shaping-up-
with-angular-js/contents
 John papa

Our online IM Id’s for more convenient
communication.
3, Suvarna Nagar Bungalow,
Near St.Xaviers School Loyola,
Ahmedabad-380013, Gujarat, India
+91 9879518121
+91 757-294-0388
(001) 415 251 KALP
kalpcorporate
nihar.kalp
nihar@kalpcorporate.com
info@kalpcorporate.com
md@kalpcorporate.com
kalpcorporate.com

Kalp Corporate Angular Js Tutorials

Recommended

More Related Content

What's hot (19)

Viewers also liked (9)

Similar to Kalp Corporate Angular Js Tutorials (20)

Recently uploaded (20)

Kalp Corporate Angular Js Tutorials