Some of the key AngularJS concepts that got demonstrated in this article and the related demo page are following:
As defined on Wikipedia page, “a single-page application (SPA), also known as single-page interface (SPI), is a web application or web site that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. In an SPA, either all necessary code “HTML, JavaScript, and CSS” is retrieved with a single page load, or the appropriate resources are dynamically loaded and added to the page as necessary, usually in response to user actions. The page does not reload at any point in the process, nor does control transfer to another page…”.
In my early days of programming, I developed an entire website, funpiper.com, based on the concept of single page application, however, with great amount of complexity. Most of the pages on the website was loaded with home.php with pagetype passed as a GET parameter. This pagetype consisted of PAGE identifier which was used to load appropriate view with header and footer code getting loaded with home.php. Some of the key issues were UI code (routing) written in server pages along with maintenance nightmare. Now that I played with AngularJS, I could really appreciate the power of Routing concept in AngularJS and how easily one could create & manage single-page application using the same.
Following are key design steps in creating SPA with Angular:
Routing functionality provided by Angular helps you to create a single page app where multiple views could be loaded in the single page based on the URL parameter. Different views are accessed using following URL format:
The routing functionality is provided by Angular ngRoute module, which is distributed separately from the core Angular framework. Take a look at the code below under sinple page app to see different library (angular-route.js) for ngRoute module.
Application routes in Angular are declared via the $routeProvider, which is the provider of the $route service. This service makes it easy to wire together controllers, view templates, and the current URL location in the browser. Access greater details on this page (https://docs.angularjs.org/tutorial/step_07).
Following is the code sample for most trivial SPA. Pay attention to some of the following:
<html ng-app="helloApp"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js"></script> <script src="myangular.js"></script> </head> <body> <div ng-view=""></div> </body> </html>
Following code represents the Angular module definition along with routing configuration. Pay attention to some of the following:
var helloApp = angular.module("helloApp", ['ngRoute']); helloApp.config(function($routeProvider){ $routeProvider .when( '/searchtable', { controller: 'CompanyCtrl', templateUrl: 'views/searchtable.html' } ) .when('/sorttablecolumn', { controller: 'CompanyCtrl', templateUrl: 'views/sorttablecolumn.html' }) .otherwise( { redirectTo: '/searchtable' } ); });
[adsenseyu1]
In recent years, artificial intelligence (AI) has evolved to include more sophisticated and capable agents,…
Adaptive learning helps in tailoring learning experiences to fit the unique needs of each student.…
With the increasing demand for more powerful machine learning (ML) systems that can handle diverse…
Anxiety is a common mental health condition that affects millions of people around the world.…
In machine learning, confounder features or variables can significantly affect the accuracy and validity of…
Last updated: 26 Sept, 2024 Credit card fraud detection is a major concern for credit…