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]
Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…
Last updated: 22nd April, 2024 As data scientists, we navigate a sea of metrics to…
Last updated: 22nd April, 2024 This post will teach you about the gradient descent algorithm…
Last updated: 19th April, 2024 Among the terminologies used in training machine learning models, the…
Last updated: 19th April, 2024 Model parallelism and data parallelism are two strategies used to…
Last updated: 4th April, 2024 In machine learning, model complexity, and overfitting are related in…