Angular Js Get Started - Complete Course

ANGULAR JS
GET STARTED
By,
Santha Mani

INTRODUCTION
Angular JS is a JavaScript framework you can use to
build applications, but run in a web browser
using HTML.
The Angular JS framework started as a project
inside of Google, but it's now an open source
project so anyone can contribute to Angular or use
Angular in their own applications.

BENEFITS
Used for Single page and line of pages of application
Dependency Injection
Two-way binding
Testing
MVC
Controlling the DOM elements like Directives,
Filters, Services, Controllers,…

ANGULARJS.ORG – HOME FOR
ANGULAR
angularjs.org - this is where you can
find links to mailing lists,
find the documentation,
find a Download button if you want to bring all of
the Angular libraries down and use them locally,
and there's also a link to GitHub where the raw
source code lives.
A related website you might be interested in is,
builtwith.angularjs.org. This website includes
pictures and links to other public websites that have
been built with AngularJS.

AN ANGULAR APPLICATION
There are only two requirements for adding Angular JS
to a web page
<script> tag pointing to angular.js.
need to add an ng-app attribute somewhere in your
HTML
ng-app, in Angular terminology, is called a directive,
and it is just one of many directives that Angular
provides.
The ng prefix is short for Angular.

EXAMPLE
Angular found that particular binding expression,
that's what we call it, and an output into the web
page.
The double curly braces are what some people
would call mustaches or handlebars, they are
binding expressions in Angular.
 {{ expression }} – binding expression
ng-init – initializes the application in the current
scope.

<!DOCTYPE html>
<html>
<head>
<title>Angular JS - Arrays(StringS)</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></scri
pt>
</head>
<body>
<div ng-app="" ng-init="program=['HML','CSS','Jquery','AngularJs']">
<div ng-app="" ng-init="number=[5,25,50,75,100]">
<p>
This is fist program:<span ng-bind="program[3]"></span><br>
This is last program:<span ng-bind="program[1]"></span>
</p>
<p>Single quotes to be mentioned for sring values in the array declaration</p>
</div>
</body>
</html>

MODULE
Modules are the basic building block of Angular.
Everything exists inside of our module.
A module is a container for different parts of your
application i.e., controller, services, directives,
filters etc..
Specifies the bootstrapping

SYNTAX
var myApp = angular.module(“myModule”,[]);
myModule = name of our Module
Empty square braces [] = dependents of our
module

EXAMPLE
var myApp = angular.module('myModule', []);
<!DOCTYPE html>
<html ng-app = "myModule">
<head>
<script data-require="angularjs@1.5.8" data-semver="1.5.8"
src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body >
<h1>Hello Plunker!</h1>
{{ 8/4}}
</body>
</html>

CONTROLLER
The job of a controller is To build a model for View.
It does by attaching to the $scope object.
$scope is not a model it’s the data that we attach to
$scope is the model.

CREATING A CONTROLLER
ng-controller is an attribute that we place into our
HTML, we can specify the name of a controller that
we want to take control of some area of the HTML
Angular will invoke the controller function when it
needs to create a controller to manage an area of the
webpage.
$scope is a component provided by Angular. What we
can do with the scope argument is assign our model
to the object.

EXAMPLE
var myApp = angular.module('myModule', []);
myApp.controller('myController', function($scope)
{
$scope.message = "Hello Angular";
});

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<script data-require="angularjs@1.5.8" data-semver="1.5.8"
src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
{{ 8/4}} <br>
<div ng-controller="myController">
{{message}}
</div>
</body>
</html>

EXAMPLE
Now we've seen a controller in action, and we see that
the primary responsibility of a controller is to set up
the model on our $scope object.
Angular passes $scope to our controller function, and
our controller manipulates that scope.
It only manipulates $scope by attaching a model.
And then we use binding expressions to move data
from the $scope into the view.

EXAMPLE
///<refereence path="angular.min.js"/>
var myApp=angular.module("myModule",[ ]);
myApp.controller("myController", function($scope)
{
var employee = { firstName: "Avinash Kumar",
lastName: "Gaddamanugu",
gender: "Male“
};
$scope.employee=employee;
});

<!DOCTYPE html>
<html ng-app="myModule">
<head> <title>Complex ng-model</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angula
r.min.js"></script>
<script src="angular.js"></script>
<script type="text/javascript" src="ComplexScripts.js"></script>
</head>
<body>
<div ng-controller="myController">
<div> First Name: {{ employee.firstName }} </div>
<div> Last Name: {{ employee.lastName }} </div>
<div> Gender: {{ employee.gender }} </div>
</div>
</body>
</html>

CAPABILITIES
Multiple Controller
Complex Controller
Nested Controller

DIRECTIVES
Controls the DOM elements (behavior)
It is prefixed by ng.
Eg: ng-init, ng-app, ng-model, ng-repeat
The ng-app directive initializes an AngularJS
application.
The ng-init directive initializes application data.
The ng-model directive binds the value of HTML
controls (input, select, textarea) to application data.

NG-SRC
The purpose of the ng-source directive is that once
Angular is up and running, once it has evaluated this
expression, then it will come in and set the actual
source attribute for that image and the image should
be successfully downloaded and you'll avoid these
404 errors.
So ng-source is just a directive to set the source of an
image when there's a data binding expression
involved.

TWO-WAY BINDING
Keeps the model and the view sync all the time.
Change in model updates the view and change in view
updates the model.
Model
View
Change in
View updates
View
Change in
View updates
Model

NG-MODEL
Bind the value of an input field to a variable created in
Angular JS
Ng-model - always keep your data in sync
It can be apply to inputs, select and textarea
Example
Ng-model.html, ng-model.js
Also can specify in complex way
Complex Module & Controller.html & Complex ng-
model.js

NG-MODEL CAN PROVIDE TYPE VALIDATION FOR
APPLICATION DATA (NUMBER, E-MAIL, REQUIRED).
<!DOCTYPE html >
<html ng-app="" >
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js
"></script>
<body>
<form name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-
mail address</span>
</form>
<p>Enter your e-mail address in the input field. AngularJS will display
an errormessage if the address is not an e-mail.</p>
</body>
</html>

NG-MODEL DIRECTIVE CAN PROVIDE STATUS FOR APPLICATION
DATA (INVALID, DIRTY, TOUCHED, ERROR)
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<p>Edit the e-mail address, and try to change the status.</p>
<h1>Status</h1>
<p>Valid: {{myForm.myAddress.$valid}} (if true, the value meets all criteria).</p>
<p>Dirty: {{myForm.myAddress.$dirty}} (if true, the value has been changed).</p>
<p>Touched: {{myForm.myAddress.$touched}} (if true, the field has been in focus).</p>
</form>
</body></html>

NG-MODEL DIRECTIVE PROVIDES CSS CLASSES
FOR HTML ELEMENTS, DEPENDING ON THEIR
STATUS
ng-model directive adds/removes the following
classes, according to the status of the form field
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine

NG-REPEAT
Similar to foreach() loop in C#.
Table format
Ng-repeat.html & ng-repeat.js
List Format
Ul-ng-repeat.html & ul-ng-repeat.js

NG-OPTIONS
Used for filling a dropdown list with options.
Selected value to be an object
For key-value pair
Using an object as the data source, x represents the key, and y
represents the value:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
The selected value will always be the value in a key-value pair.
The options in the dropdown list does not have to be the key in a
key-value pair, it can also be the value, or a property of the
value object
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in
cars">
</select>

NG-OPTIONS VS NG-REPEAT
The ng-options directive was made especially for
filling a dropdown list with options.
The ng-repeat directive repeats a block of HTML code
for each item in an array, it can be used to create
options in a dropdown list.
Dropdowns made with ng-options allows the selected
value to be an object, while dropdowns made from
ng-repeat has to be a string.

NG-OPTIONS VS NG-REPEAT
<select ng-model="selectedCar">
<option ng-repeat="x in cars"
value="{{x.model}}">{{x.model}}</option>
</select>
<select ng-model="selectedCar" ng-options="x.model for
x in cars"></select>

CUSTOM DIRECTIVES
Create New Directives
In addition to all the built-in AngularJS directives, you
can create your own directives.
New directives are created by using
the .directive function.
To invoke the new directive, make an HTML element
with the same tag name as the new directive.
When naming a directive, you must use a camel case
name, w3TestDirective, but when invoking it, you must
use -separated name, w3-test-directive

EXAMPLE<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body ng-app="myApp">
<w3-test-directive></w3-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
</script>
</body>
</html>

CUSTOM DIRECTIVE
You can invoke a directive by using:
Element name
<w3-test-directive></w3-test-directive>
Attribute
<div w3-test-directive></div>
Class
<div class="w3-test-directive"></div>
Comment

You must add the value "C" to the restrict property
to be able to invoke the directive from a class
name.

RESTRICTIONS
Restrict your directives to only be invoked by some
of the methods
The legal restrict values are:
E for Element name
A for Attribute
C for Class
M for Comment
By default the value is EA, meaning that both
Element names and attribute names can invoke
the directive.

EVENT HANDLING – NG-CLICK
An expression that’s going to be a function call
Example
Events.html & events.js

In addition to these built-in directives, angular allows you to write
custom directives.
Custom directives to perform activities like drag-and-drop, or custom
directives that can wrap bootstrap widgets, or media players, or
wrappers for google maps.

FILTERS
Used to transform data
Can do 3 different things
Format data
Sort data
Filter data
Can be used with a binding expression or a
directive.
To apply a filter use pipe (|) character
{{ expression | filter : parameter }}

DATE
YYYY - 4 digit year – Ex: 1992
YY - 2 digit year –Ex: 1992:-92
MMMM – Full name (January – December)
MMM – Jan – Dec
MM – 01-12
M – Numerical Formats (1-12 ) (No leading zeros)
dd – 01 -31
d – 1 – 31 (No leading zeros)

THE FILTER FILTER
The Filter filter selects a subset of an array.
The Filter filter can only be used on arrays, and it
returns an array containing only the matching
item.

LimitTo Filter
limitTo filter: Can be used to limit the
number of rows or characters in a string.
{{ expression | limitTo : limit : begin }}

ADDING FILTERS TO
DIRECTIVES
Filters are added to directives, like ng-repeat, by using
the pipe character |, followed by a filter.
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>

SORTING ROWS IN A TABLE
tablesorting.html
tablesorting.js

SORTING BY MULTIPLE PROPERTIES
Sortingdata.html
Sortingdata.js
Multiplesort.html
Multiplesort.js

SEARCH MULTIPLE PROPERTIES
Searchfilter.html
Searchfilter.js

CUSTOM FILTERS
Customfilter.html
Customefilter.js

ng-hide & ng-show
Used to control the visibility of the HTML element.
Hide Salary: <input type="checkbox" name="checkbox" ng-model="hideSalary" />
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th ng-hide="hideSalary">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td> {{ emp.name }} </td>
<td> {{ emp.gender }} </td>
<td> {{ emp.city }} </td>
<td ng-hide="hideSalary"> {{ emp.salary }} </td>
</tr>
</tbody>

ng-hide & ng-show
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
<th ng-hide="hideSalary">Salary</th>
<th ng-show="hideSalary">Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees">
<td> {{ emp.name }} </td>
<td> {{ emp.gender }} </td>
<td> {{ emp.city }} </td>
<td ng-hide="hideSalary"> {{ emp.salary }} </td>
<th ng-show="hideSalary">####</th>
</tr>
</tbody>

ng-include
Used to embed an HTML page into another HTML
page.
Used when we want specific view in multiple pages
of our application
The value of the ng-include can be
The name of HTML page that to be reusable
A property on the $scope object that points to the
reusable HTML page.

SERVICE
Is a an object that can be reused within an
application.
Eg: Math()- provides services to add number
A service in angular is an object that provides some
sort service that can be reused in a angular
application.
Angular JS has about 30 built-in services.

NEED OF SERVICE
Single Responsibility Condition: States that an object
should have a single responsibility.
Services encapsulate reusable logic that doesn’t
belong anywhere else (i.e., directives, filters, views,
model & controller)
Benefits
Reusability Eg: $http
Dependency Injection
Testability

$location Service
return information about the location of the current web page
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>The url of this page is:</p>
<h3>{{myUrl}}</h3>
</div>
<p>This example uses the built-in $location service to get the absolute url of the page.</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location) {
$scope.myUrl = $location.absUrl();
});
</script>

$interval Service
<body>
<p>The time is:</p>
<h1>{{theTime}}</h1>
</div>
<p>The $interval service runs a function every specified
millisecond.</p>
<script>
app.controller('myCtrl', function($scope, $interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
$scope.theTime = new Date().toLocaleTimeString();
}, 1000);
});
</script>
</body>

$timeout Service
<body>
<p>This header will change after two seconds:</p>
<h1>{{myHeader}}</h1>
</div>
<p>The $timeout service runs a function after a sepecified number of
milliseconds.</p>
<script>
app.controller('myCtrl', function($scope, $timeout) {
$scope.myHeader = "Hello World!";
$timeout(function ()
{
$scope.myHeader = "How are you today?";}, 2000);
});
</script>

$http Service
<div ng-app="myApp" ng-controller="empController">
<table>
<tr><th>Name</th></tr>
<tr ng-repeat=“emp in empployees”>
<td>{{emp.name}}</td>
</tr>
</table>
</div>
<script>
app.controller('myCtrl', function($scope, $http ,$log) {
$http.get(“data.json)then(function (response) {
$scope.employees = response.data;
});
});
</script>

PROMISE OBJECT
$http service returns a promise object as the
functions are executed asynchronously.
A promise object is an object that promises to give
you some result in the future, and that result
might be the data that you need, or the result
might be an error if the server was unavailable.
The way I find out is to call a then() method on my
promise and pass the then() method a function
that will be called in the future.

EG: PROMISE OBJECT
var myApp=angular.module(“serviceApp”,[])
.controller(“serviceCtrl”,function($scope, $http){
$http.get(‘sample.html’)
.then(function(scope)
{
$scope.myWelcome = response.data;
});
});
Function is called when the request completed
successfully, we get response from the server
Ex: http://andyshora.com/promises-angularjs-explained-as-cartoon.html

CUSTOM SERVICES
An AngularJS service can be created or registered or
created in four different ways,
Using the service() method
Using the factory() method
Using the provider() method
Using the value() method
Using the constant() method

service() vs factory()
Using the service() method uses the function
constructor and it returns the object or instance of
the function to work with.
Using the factory() method uses the returned value
of the function. It returns the value of the
function returned after the execution

NORMAL SERVICE
var myApp = angular.module("myModule", [])
.controller("myController", function($scope){
$scope.transformString = function(input){
if(!input)
{
return input;
}
var output = "";
for (var i = 0; i < input.length; i++)
{
if(i>0 && input[i] == input[i].toUpperCase()) {
output = output + " ";
}
output = output + input[i];
}
$scope.output = output;
}
});

NORMAL SERVICE CALL
In this we have two problems
The controller code become complex and large
If we want to reuse this code in any controller we
have to duplicate that code within that controller. At
the moment we start duplicating the maintainability
of the application will be loss.
To overcome this we encapsulate the service and
inject that service into any controller where we
want to use.

SERVICE/FACTORY METHOD
It is used for creating the custom service and register
this with angular.
myApp.factory(‘stringService’, function(){
return
{
processingString: function(input){
------
----
}
};
)}

SYNTAX
var myApp = angular.module(“myModule”,[])
.controller(“myCtrl”,function($scope, stringService)
{
$scope.transformString = function(input)
{
$scope.out = stringService.processingString(input);
}
});

$http get()
In Angularjs get ($http.get()) service or method is used to get data from
remote HTTP servers.
var app = angular.module('getserviceApp', []);
app.controller('getserviceCtrl', function ($scope, $http) {
// Simple GET request example:
$http({
method: 'GET',
url: '/sampleUrl',
data: 'parameters'
})
.then(function success(response) {
// this function will be called when the request is success
},
function error(response) {
// this function will be called when the request returned error status
});
});

SYNTAX
method - This property is used to define required operator like
get or send data. In angularjs we have different methods
available.
url - We need to send url of http server to perform required
operations.
data - If we have any parameters to send and get data from
request url we will pass it using this parameter.
then - In then property we will do our coding based on
response status either success or failure. If it is success it
will execute first method or in case if we get error second
method will execute.

$http.get Properties
config - The configuration object is used to generate the
request.
data - It’s string or an object which is used to carry
response from the server.
headers - This function is used to get header information.
status - This property is used to get HTTP status code of the
response.
statusText - This property is used to get HTTP status text of
the response.

$http post() method
The $http.POST() services are used to send the data
to a specific URL and expects the resource at that
URL to handle the request that means we can say
that POST method is used to Insert new data
based on given URL

SYNTAX
var app = angular.module('putserviceApp', []);
app.controller('putserviceCtrl', function ($scope, $http)
{
// Simple Post request example:
var url = 'posturl', data = 'parameters',config='contenttype';
$http.post(url, data, config)
.then(function (response)
{
// This function handles success
},
function (response) {
// this function handles error
});
});

$http.post() Properties
config - The configuration object is used to
generate the request.
data - It’s either string or an object.
headers - We can get header information.
status - We can get HTTP status code of the
response.
statusText - Get HTTP status text of the response.

$http.put() method
The $http.put() service in angularjs is used to upload
a files to server and update existing data in server
based on given URL.
Generally $http.put method not allowed by many
servers due to security reasons.

SYNTAX
var app = angular.module('putserviceApp', []);
app.controller('putserviceCtrl', function ($scope, $http) {
// Simple Put request example:
var url = 'puturl', data = 'parameters',config='contenttype';
$http.put(url, data, config).then(function (response)
{
// This function handles success
},
function (response) {
// this function handles error
});
});

SYNTAX
url - Used to send url of http server to perform
required operations.
data - This property to send required parameters to
requested url.
config - By using this property we can change
content-type.
After execution of our $http.put request we will get
response based on that response status our
success and failure methods will execut

$http put() Properties
config - The configuration object is used to generate
the request.
data - It’s either string or an object.
headers - We can get header information.
status - We can get HTTP status code of the
response.
statusText - Get HTTP status text of the response.

$http.jsonp() Service
In angularjs jsonp or json with padding service is
used to make cross domain requests from client
browser.
By using $http.jsonp service in angularjs we can get
data in json format and the server whatever we are
requesting should support jsonp requests
otherwise it’s worthless

BENEFIT
Generally now a days browsers are blocking access
data from a server which is in different domain
due to same origin policy.
By using angularjs $http.jsonp method we can
access data from different domain without having
any access problems.

SYNTAX
var app = angular.module('jsonserviceApp', []);
app.controller('jsonCtrl', function ($scope, $http) {
//Call the service to get data in json
var url = "Some API Url" + "?callback=JSON_CALLBACK";
$http.jsonp(url)
.success(function (data, status, headers, config) {
$scope.details = data;
})
.error(function (data, status, headers, config) {
$scope.statusval = status;
});
});

JSON_CALLBACK
“callback=JSON_CALLBACK” to url to make a service
request.
AngularJs is having its own callback pattern, so it will
follow that pattern to handle jsonp callbacks.
In angularjs always we need to
send callback=JSON_CALLBACK with url while
requesting jsonp service.
Using this pattern we handle the JSONP call-back and
its call-back is called JSON_CALLBACK.

Angularjs Success / Error Functions
In angularjs while using $http services we have
success() and error() functions with then property
to display the success and failed response of
request information.
In angularjs we can use success and error methods
with http GET, POST, PUT, DELETE, JSONP and
PATCH services.

SYNTAX
var app = angular.module('getserviceApp', []);
app.controller('getserviceCtrl', function ($scope,
$http) {
// Simple GET request example:
$http.get("url").then(function success(response) {
// this function will be called when the request is
success
},
function error(response)
{
// this function will be called when the request returned
error status
});
});

anchorScroll
Used to jump to specified element on the page.
var myApp=angular.module("myModule",[ ]);
myApp.controller("myController", function($scope,
$location, $anchorScroll)
{
$scope.scrollTo = function(scrollLocation)
//mention the id of the element {
$location.hash(scrollLocation);
$anchorScroll();
}
});

CLIENT AND SERVER ROUTING
Server-Side routing:
A client would request a
webpage or other
resource from the server
using a URL and the
server retrieves the
resource and sends it
back to the client. Often
this meant that an entire
webpage would be sent
back to the browser after
each request to the server.

CLIENT – SIDE ROUTING
Client – Side Routing
However, when using a client-side framework like
Angular, the requests to the server are of often for
smaller bits of information rather than entire
webpages and all of their related resources.
Client-side routing doesn't replace server-side routing.
All web applications still interact heavily with servers
and those servers still need to accept a URL and use it to
locate and return the resource needed by the client.

SERVER-SIDE ROUTING WITH SPAS
AND CLIENT-SIDE ROUTING.
SPA stands for Single Page Application.
The idea behind a SPA is that it appears to the user
as if it's one page in the browser and you only
update portions of that page as the user interacts
with the application.

ngRoute
ngRoute is its own Angular module, and stored in
its own JavaScript file.
ngRoute module helps your application to become a
Single Page Application.
The ngRoute module routes your application to
different pages without reloading the entire
application.

WHAT DO I NEED
To make your applications ready for routing, you must
include the AngularJS Route module:
<script src="https://ajax.googleapis.com/ajax/libs/angul
arjs/1.4.8/angular-route.js"></script>
Then you must add the ngRoute as a dependency in the
application module::
var app = angular.module("myApp", ["ngRoute"]);

$routeProvider
Define the $routeProvider using the config method of
application. Work registered in the config method
will be performed when the application is loading.
ngRoute – provides the routing this our dependency
$ routeProvider – used to configure routes

$routeProvider to configure routes
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.htm"
})
.when("/green", {
templateUrl : "green.htm"
})
.when("/blue", {
templateUrl : "blue.htm"
});
});

EXAMPLE
var myApp=angular.module("myModule",["ngRoute"])
.config(function($routeProvider,$locationProvider)
{
$routeProvider
.when("/",{
templateURL : "Template/home.html",
controller : homeController;
}
});

WHERE DOES IT GO?
Application needs a container to put the content
provided by the routing.
This container is the ng-view directive.
There are three different ways to include the ng-
view directive in your application
<div ng-view></div> as attribute
<ng-view></ng-view> as tag
<div class="ng-view"></div> as class

USING CONTROLLERS
With the $routeProvider you can also define a controller for
each "view".
var app = angular.module("myApp", ["ngRoute"]);
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/london", {
templateUrl : "london.htm",
controller : "londonCtrl"
})
.when("/paris", {
templateUrl : "paris.htm",
controller : "parisCtrl"
});
});
app.controller("londonCtrl", function ($scope) {
$scope.msg = "I love London";
});
app.controller("parisCtrl", function ($scope) {
$scope.msg = "I love Paris";
});

otherwise()
otherwise method, is the default route when none of
the others get a match
If you try to navigate to route that is not configured,
any partial template will not be injected because
angular doesn’t know the route of template/site.
.otherwise({
redierctTo : “/main”;
})

INLINE TEMPLATE
The template property, allows you to write HTML directly
in the property value, and not refer to a page.
Eg:
var app = angular.module("myApp", ["ngRoute"]);
$routeProvider
.when("/", {
template : "<h1>Main</h1><p>Click on the links to
change this content</p>"
});
})

$route Service
It has two methods, reload and updateParams
The updateParams method allows you to reload the
current URL with a new set of route parameters.
You pass the new parameters as properties on an object
to the updateParams method. The property names that
match parameter names you've configured on the route,
will then have the new values inserted into the URL.
The reload method will reload the current route.
This will simply reload the current route within your
Angular app, which mean it will make any necessary
network calls, process route parameters, and generally
treat the route as if you were visiting it for the first time.

$route Service - Parameters
The current property :
gives you a reference to the current route definition
and allows you to exam the controller for the route,
scope, and other variables used when creating the
route's controller.
The routes property :
is an object containing all of the route definitions for
your application. You can use it to see all of the routes
you've configured on the route provider.

reload()
By using the reload() function on the route service
give us the ability to refresh the data on the home
page of the app.
.controller(“homeController, function($http,$route)
var vm = this;
vm. reloadData = function()
{
route.reloadData();
}

Route change
This is used when we are filling long form
application.
This is created with a alert window asking for OK
and Cancel
OK: navigate to next partial template/page
Cancel: stays in current page

Route Change
When a route change occurs, then two events are
generated
$routeChangeStart
$locationChangeStart
The only difference between two events is the ‘next’
and ‘current’ parameters.
The $locationChangeStart event ‘next’ and ‘current’
parameters has got complete next and current
URL’s

$routechangestart()
.controller(“studentController”,
function($http,$scope,$route)
$route.$on(“$routeChangeStart”,
function(event,next,current)
{
if(!confirm(“Are you sure to navigate”))
{
event.preventDefault();
}
}

NAVIGATION PAGE
We can also specify to which page we are navigating.
$route.$on(“$routeChangeStart”,
{
if(!confirm(“Are you sure to
navigate” + next.$$route.orginalPath))
{
}
}

$locationchangestart()
$route.$on(“$locationChangeStart”,
{
if(!confirm(“Are you sure to navigate”))
{
}
}

NAVIGATION PAGE
We can also specify to which page we are navigating.
.controller(“studentController”,function($http,$scope,$route)
$route.$on(“$locationChangeStart”,
{
if(!confirm(“Are you sure to
navigate” + next))
{
}
}

ROUTE RESOLVE
If the components of the application i.e., database
server, application and the client present in
different machines and a network latency then
the data few seconds to load.
If the components of the application are in local
machine, then there will not be any network
latency.

REMOVE (#) SYMBOL
Enable html5mode
$locationProvider.html5mode(true);
Remove # in anchor tag
Include URL rewrite rule in web.config
Set base href element to the location of single page
application
<base href=“/” />
all the partial templates are present within the root
element

ANGULAR CASE-INSENSITIVE
By default Angular is case sensitive
To make a route to case insensitive make it true.
$routeProvider.caseInsensitiveMatch = true;

CONTROLLER AS SYNTAX
There is another mechanism to make the members
of the controller available in the view i.e.,
Controller As Syntax
With this there is no need for injecting the $scope
object.
Instead we use ‘this’ keyword.

<!DOCTYPE html>
<html ng-app = “myModule”>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.m
in.js">
</script>
<script>
var app = angular
.module (“myModule”,[])
.controller (“myController”, function(){
this.message = “Angular JS Tutorial”;
});
</script>
<body ng-controller = “myController as myCtrl”>
<h2> {{ myCtrl.message }} </h2>
</body>
</html>

NESTED CONTROLLER
<div ng-controller="countryController">
{{name}}
<div ng-controller="stateController">
{{name}}
<div ng-controller="cityController">
{name}}
</div
</div>
</div>

CONTROLLER vs SCOPE
Controller as syntax is new & released 1.2.0 officially.
$scope is the old technique & is available since the
initial version of angular is released.
Controller as syntax makes code more readable.
If you want to use $scope object it is to be injected
into the controller function, where as with
controller as syntax there is no need for such
injection, unless it is for some thing else.

$scope
var myApp=angular.module("myModule",[])
.controller("countryController", function($scope){
$scope.name = "India";
});
Controller as syntax
var myApp=angular.module("myModule",[])
.controller("countryController", function(){
this.name = "India";
});

CONTROLLER vs SCOPE
Though we are using controller as syntax; don’t
think that angular won’t use $scope. It is using
but it is hiding.
That is in controller as syntax we aliasing the
controller: myController as myCtrl
This cityCtrl is reference variable pointing to the
myController. Angular will take this reference
and attach to the $scope object.

$scope vs $rootscope
$rootScope: Is available globally (for all controllers)
$scope: Is available only to the controller that is
created.

var myApp = angular.module("myModule", [])
.controller("redController", function($scope, $rootScope)
{
$scope.redColor = "I am Red";
$rootScope.rootScopeColor = "I am Root Scope Color";
})
.controller("greenController", function($scope)
{
$scope.greenColor ="I am Green";
})

<body>
<div ng-controller="redController">
Root Scope : {{ rootScopeColor }}<br>
Red Color Controller : {{ redColor }}<br>
Green Color Controller :{{ greenColor }}
</div>
<br>
<div ng-controller="greenController">
Root Scope : {{rootScopeColor}}<br>
Green Color Controller : {{greenColor}}<br>
Red Color Controller :{{redColor}}
</div>
</body>

Angular $ui-router
The ui-router is a 3rd party routing framework for
Angular JS
ui-router implements routing based on the state of
the application where as ngRoute implements
routing based on the route URL.

$ui-router vs ngroute
ngRoute implements routing based on the route
URL that means we use view & routes that are
tied to the application URL.
ui-router use the routes that are not tied to the
application URL that means parts of the sites can
be changed even if the URL doesn’t change.

WHAT DO I NEED
The first thing you need to do is reference the UI-Router
JavaScript file.
Get the CDN link from:
https://cdnjs.com/libraries/angular-ui-router
<script
src=“https://cdnjs.cloudflare.com/ajax/libs/angular-ui-
router/0.3.2/angular-ui-router.js”></script>
(OR)
<script
src=“https://cdnjs.cloudflare.com/ajax/libs/angular-ui-
router/0.3.2/angular-ui-router.min.js”></script>

ADD A MODULE DEPENDENCY ON UI-
ROUTER.

$ui-view Directive
Finally, you'll need to add a ui-view directive to
your page. This is the rough equivalent of using
the ngView directive when working with
ngRoute.
It gives the router a place to insert views into your
page.

“ https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js “ >

CONFIGURING STATES
Call the config function module, and inject into it the
state $stateProvider service that comes with UI-
Router.
It has two parameters
The first parameter to the function is the name you
want to give the state.
The second parameter to the state function is a
configuration object.

CONFIGURING STATES
var myApp = angular.module(“myModule”,[‘ui-roter’])
.config(function($stateProvider){
$stateProvider
.state(“home” {
url: “/home”,
templateUrl: “Templates/home.html”,
controller: “homeController”,
controllerAs: “homeCtrl”
})
});

Inline $ui-router
var myApp = angular.module(“myModule”,[‘ui-roter’])
.config(function($stateProvider){
$stateProvider
.state(“home” {
url: “/home”,
template: “Hello Angular”,
controller: “homeController”,
controllerAs: “homeCtrl”
})
});

$ui-router Parameters
Define the sate with URL parameter
.state(“studentDetails”,{
url:”/studentdetail/:id”,
templateUrl:”Templates/studentDetails.html”,
controller: “studentDetailsController”,
controllerAs:”studentDetailsCtrl”
})

Link to the state with URL parameter
<ul>
<li ng-repeat=“studentDetailsCtrl.students”>
<a ui-sref=“studentDetails({id:student,id})”></a>
</li>
</ul>

Read the specific parameter value from controller function, call the
web-service method(if any) & id value & then retrieve that specific
parameter.( Eg :student details)
controller(“studentDetailsController”,function($scope,$stateProvider){
var vm = this;
$http({
url:”...”,
method: “get”,
params:{id:$stateparams.id}
}).then(function(response){
vm.student = student.data;
})
})

$ui-router Case-insensitive
To make ui-router case insensitive inject
$urlMatcherProvider() service into the config()
function and call caseInsensitive(true) function.
var app = angular
.module(“myModule”,[‘ui-router’])
.config(funtion($stateProvider,$urlMatcherPro
vider){
$urlMatcherProvider.caseInsentive(true);
});

$ui-router Default route
To achieve this inject $urlRouterProvider service into
config() function & use otherwise function for passing the
default route
var app = angular
.module(“myModule”,[‘ui-router’])
.config(funtion($stateProvider,$urlMatcherProvider,url
RouteProvider){
$urlRouterProvider.otherwise(“/home”);
});

$ui-router – Active menu item
Create a CSS in .css file or style tag
.activeClass{
background-color : pink;
}
Mention “ui-sref-active” directive in anchor tag
<a ui-sref=“home” ui-sref-active=“activeClass”>
Home
</a>

NESTED VIEWS & STATES
One of the benefit over ui-router with ng-route is,
ui-router provides & supports nested states &
views.
In nested states, there is parent-child relation i.e.,
the parent properties are available in all the child
states.

HOW TO SPECIFY
Can be specify in two ways
1. Using dot notation
.state(“home”,{
-----
})
.state(“home.list”,{
---
})
2. Using the parent property with the parent name as string.
.state{“home”,{
---
})
.state(“list”{
parent: “home”,
---
})

Initially my home page is displaying some text along with two buttons.
Which the buttons are activate the home page along with the activated
button data will be displayed.

MULTIPLE NAMED VIEWS
Another benefit of ui-router is it supports multiple name
views.
If we define view object state's templateUrl, template and
templateProvider will be ignored i.e., Views override
state's template properties: that means we create
abstract states.
So in the case that you need a parent layout of these
views, you can define an abstract state that contains a
template, and a child state under the layout state that
contains the 'views' object.

$ui-router MULTIPLE VIEWS
UI-Router assigns every view to an absolute name. The
structure for this is viewName@stateName.
Since our main ui-view inside our about state, we gave it a
blank name.
The other two views
columnOne@about and columnTwo@about having the
naming scheme this way let’s us define multiple views
inside a single state.

Angular Js Get Started - Complete Course

Angular Js Get Started - Complete Course

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Angular Js Get Started - Complete Course

Similar to Angular Js Get Started - Complete Course (20)

More from EPAM Systems

More from EPAM Systems (9)

Recently uploaded

Recently uploaded (20)

Angular Js Get Started - Complete Course

Editor's Notes