Scribd
Upload
96 views

Angular JS1

This document provides an overview of key concepts in AngularJS including directives, expressions, filters, forms, views, services and more. It explains that AngularJS directives like ng-app, ng-init and ng-repeat extend HTML functionality. Expressions in double curly braces bind application data to HTML. Filters modify data in expressions. Views enable single-page applications using ng-view, ng-template and $routeProvider. Services provide reusable functions for tasks like making AJAX requests and routing.

Uploaded by

v.meenal
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
96 views

Angular JS1

This document provides an overview of key concepts in AngularJS including directives, expressions, filters, forms, views, services and more. It explains that AngularJS directives like ng-app, ng-init and ng-repeat extend HTML functionality. Expressions in double curly braces bind application data to HTML. Filters modify data in expressions. Views enable single-page applications using ng-view, ng-template and $routeProvider. Services provide reusable functions for tasks like making AJAX requests and routing.

Uploaded by

v.meenal
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Angular JS

AngularJS - Directives
AngularJS directives are used to extend HTML. These
are special attributes starting with ng- prefix.
ng-app This directive starts an AngularJS Application.
ng-init This directive initializes application data.
ng-model This directive binds the values of
AngularJS application data to HTML input controls.
ng-repeat This directive repeats html elements for
each item in a collection.
ng-init
ng-init directive initializes an AngularJS Application data. It is
used to put values to the variables to be used in the
application.
AngularJS - Expressions
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>
AngularJS - Filters
Filters are used to change modify the data and can be
clubbed in expression or directives using pipe character.
AngularJS - HTML DOM
Following directives can be used to bind application data to
attributes of HTML DOM Elements.
AngularJS - Forms
AngularJS enriches form filling and validation. We can
use ng-click to handle AngularJS click on button and use
$dirty and $invalid flags to do the validations
Use novalidate with a form declaration to disable any
browser specific validation. Forms controls makes heavy
use of Angular events.
Events
AngularJS provides multiple events which can be associated with the
HTML controls.
Validate data
Following can be used to track error.
$dirty states that value has been changed.
$invalid states that value entered is invalid.
$error states the exact error.
AngularJS - Ajax

AngularJS provides $https: 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, $https: can be used to get the
data from server
AngularJS - Views
AngularJS supports Single Page Application via multiple
views on a single page. To do this AngularJS has provided ng-
view and ng-template directives and $routeProvider services.
ng-view
ng-view tag simply creates a place holder where a
corresponding view (html or ng-template view) can be
placed based on the configuration.
ng-template
ng-template directive is used to create an html view using
script tag. It contains "id" attribute which is used by
$routeProvider to map a view with a controller.
$routeProvider
$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.
AngularJS - Services
AngularJS supports the concepts of "Separation of Concerns"
using services architecture.
Services are javascript functions and are responsible to do a
specific tasks only.
AngularJS provides many inbuilt services for example,
$https:, $route, $window, $location etc. Each service is
responsible for a specific task for example, $https: is used to
make ajax call to get the server data. $route is used to define
the routing information and so on. Inbuilt services are always
prefixed with $ symbol.
There are two ways to create a service.
factory
service

You might also like