| AngularJS Routing Overview
|
Tuesday, May 26, 2015
$routeProvider with Static HTML template content
In
the previous post Defining routes using$routeProvider we saw on how to use the $routeProvider to define routes and
assign each route to a .html page, this works when the views are complex and
has more content, but if the views are simple we need not have separate .html
pages to define the views instead we can embed the static HTML content for the
view in the $routeProvider
configuration itself.
In the following example we shall see on how to use the $routeProvider with static HTML content for the templates.
Main HTML Page with ng-view
The templates defined in the $routeProvider will be replaced in the location of the ng-view directive tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div>
<div>
<div>
<a href="#ListContacts">List Contacts</a> |
<a href="#AddContact">Add Contact</a>
</div>
<hr/>
<ng-view></ng-view>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="ContactsApp.js"></script>
</body>
</html>
.js File with Route Configuration
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(function($routeProvider) {
$routeProvider.
when('/ListContacts', {
template: '<b>List all Contacts Template</b>',
}).
when('/AddContact', {
template: '<b>Add Contact Template</b>',
}).
otherwise({
redirectTo: '/ListContacts'
});
});
In the following example we shall see on how to use the $routeProvider with static HTML content for the templates.
Main HTML Page with ng-view
The templates defined in the $routeProvider will be replaced in the location of the ng-view directive tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div>
<div>
<div>
<a href="#ListContacts">List Contacts</a> |
<a href="#AddContact">Add Contact</a>
</div>
<hr/>
<ng-view></ng-view>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="ContactsApp.js"></script>
</body>
</html>
.js File with Route Configuration
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(function($routeProvider) {
$routeProvider.
when('/ListContacts', {
template: '<b>List all Contacts Template</b>',
}).
when('/AddContact', {
template: '<b>Add Contact Template</b>',
}).
otherwise({
redirectTo: '/ListContacts'
});
});
Defining routes using $routeProvider
In
the previous post Routing in AngularJS
we saw the benefits of routing in AngularJS, here we shall see an example of
implementing Routing using AngularJS.
Main HTML Page with ng-view
The templates defined in the $routeProvider will be replaced in the location of the ng-view directive tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div>
<div>
<div>
<a href="#ListContacts">List Contacts</a> |
<a href="#AddContact">Add Contact</a>
</div>
<hr/>
<ng-view></ng-view>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="ContactsApp.js"></script>
</body>
</html>
.js File with Route Configuration and Controller definition
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'list_contact.html',
controller: 'ListContactController'
}).
when('/ListContacts', {
templateUrl: 'list_contact.html',
controller: 'ListContactController'
}).
when('/AddContact', {
templateUrl: 'new_contact.html',
controller: 'AddContactController'
}).
otherwise({
redirectTo: '/ListContacts'
});
});
sampleApp.controller('AddContactController', function($scope) {
$scope.title = 'Add Contact';
});
sampleApp.controller('ListContactController', function($scope) {
$scope.title = 'List Contacts';
});
The $routeProvider defines 4 routes, ‘/’ points to the Root template, otherwise is the default routes, when the URL provided by the user does not match with any of the routes defined it will take this route.
There are 2 other routes /ListContacts & /AddContact which are defined with the .html template page and the Controller to be bound to these templates, these templates are fully functional views with their own Controllers, in fact they can point to different mode objects or make different $http ajax calls to populate the template, on a whole these are fully functional pages on their own.
Main HTML Page with ng-view
The templates defined in the $routeProvider will be replaced in the location of the ng-view directive tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
</head>
<body ng-app="sampleApp">
<div>
<div>
<div>
<a href="#ListContacts">List Contacts</a> |
<a href="#AddContact">Add Contact</a>
</div>
<hr/>
<ng-view></ng-view>
</div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="ContactsApp.js"></script>
</body>
</html>
.js File with Route Configuration and Controller definition
var sampleApp = angular.module('sampleApp', ['ngRoute']);
sampleApp.config(function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'list_contact.html',
controller: 'ListContactController'
}).
when('/ListContacts', {
templateUrl: 'list_contact.html',
controller: 'ListContactController'
}).
when('/AddContact', {
templateUrl: 'new_contact.html',
controller: 'AddContactController'
}).
otherwise({
redirectTo: '/ListContacts'
});
});
sampleApp.controller('AddContactController', function($scope) {
$scope.title = 'Add Contact';
});
sampleApp.controller('ListContactController', function($scope) {
$scope.title = 'List Contacts';
});
The $routeProvider defines 4 routes, ‘/’ points to the Root template, otherwise is the default routes, when the URL provided by the user does not match with any of the routes defined it will take this route.
There are 2 other routes /ListContacts & /AddContact which are defined with the .html template page and the Controller to be bound to these templates, these templates are fully functional views with their own Controllers, in fact they can point to different mode objects or make different $http ajax calls to populate the template, on a whole these are fully functional pages on their own.
Routing in AngularJS
Routing in AngularJS enables embedding different html views to the main page
based on the URL requested by the user. Routing
in AngularJS behaves similar to Routing in Asp.Net MVC, AngularJS allows us to
define the various routes possible and the templates to be loaded for each of
the routes. At runtime based on the URL request from the end user the
appropriate template is embedded in the main page.
Embedding templates in the main page is enabled used in the ng-view directive, the templates are embedded in the main page in the location where the ng-view directive tag is placed.
<ng-view></ng-view>
In the controller, the $routeProvider object is used define the various routes and the templates to be associated with each of the routes. The object also allows us to define the controller to be associated with each of the view templates. This way each of the embedded templates will be fully functional with each one having its own controller. This comes in handy when we want to develop complex Single Page Applications.
Embedding templates in the main page is enabled used in the ng-view directive, the templates are embedded in the main page in the location where the ng-view directive tag is placed.
<ng-view></ng-view>
In the controller, the $routeProvider object is used define the various routes and the templates to be associated with each of the routes. The object also allows us to define the controller to be associated with each of the view templates. This way each of the embedded templates will be fully functional with each one having its own controller. This comes in handy when we want to develop complex Single Page Applications.
Friday, May 22, 2015
AngularJS Events Overview
ng-dblclick event
AngularJS
provides various mouse events to track events raised by user interaction with
the mouse like mousedown, mouseover, mouseover etc, in this post we shall see
on how to handle the dblclick event
using AngularJS
AngularJS provides ng-dblclick directive to handle mouse dblclick events raised by the user, dblclick event can be handled by associating the ng-dblclick directive to an event handler function which passes the mouse event as a parameter.
The following example shows on how to use the ng-dblclick directive to handle dblclick events raised by the user.
AngularJS provides ng-dblclick directive to handle mouse dblclick events raised by the user, dblclick event can be handled by associating the ng-dblclick directive to an event handler function which passes the mouse event as a parameter.
The following example shows on how to use the ng-dblclick directive to handle dblclick events raised by the user.
ng-click event
AngularJS
provides various mouse events to track events raised by user interaction with
the mouse like mousedown, mouseover, mouseover etc, in this post we shall see
on how to handle the click event
using AngularJS
AngularJS provides ng-click directive to handle mouse click events raised by the user, click event can be handled by associating the ng-click directive to an event handler function which passes the mouse event as a parameter.
The following example shows on how to use the ng-click directive to handle click events raised by the user.
AngularJS provides ng-click directive to handle mouse click events raised by the user, click event can be handled by associating the ng-click directive to an event handler function which passes the mouse event as a parameter.
The following example shows on how to use the ng-click directive to handle click events raised by the user.
Subscribe to:
Posts (Atom)
