How to write a single page app with different views in AngularJS
What Will I Learn?
A.In this tutorial I would like to talk about how you write a single page app with different views in AngularJS.
B.Routes with parameter
C.You can configure it by calling the config function and passing it a function that gets the $routeProvider injected.
Requirements
Basic Knowledge of HTML and CSS language .
Basic Knowledge of JavaScript language .
Has an editor text support HTML and JavaScript .
Difficulty
Basic
Simple routes
In AngularJS a single page app usually consists of just one index.html. If you want the app to have different pages that you can address via a URL path (e.g. www.yourapp.com/dashboard or www.yourapp.com/settings etc.) you can do this by using and configuring the AngularJS $routeProvider.
$routeProvider is a service that can be injected when you configure the main module:
index.html:
<html data-ng-app="myApp">
<head>
<script src="src/angular.js"></script>
<script src="src/controllers.js"></script>
</head>
<body>
<h1>My App</h1>
<div data-ng-view></div>
</body>
</html>
app.js:
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider.when('/', {
controller: DashboardCtrl,
templateUrl: 'dashboard.html'
}).when('/settings', {
controller: SettingsCtrl,
templateUrl: 'settings.html'
}).otherwise({
redirectTo: '/'
});
});
In the index.html you can see that there is a ng-view (data-ng-view to be HTML5 compatible) directive on a div. This is where the different views come in. The views are HTML files which are loaded into that container. This also means that everything that you want to be appearing across all views must be outside of this container. This can e.g. be a navigation bar.
myApp is the main module. You can configure it by calling the config function and passing it a function that gets the $routeProvider injected. The $routeProvider can now be configured with routes (see / and /settings). Each route leads to an HTML file (see templateUrl) and each HTML file is managed by a controller (see controller).
The otherwise function tells the $routeProvider what to do if the browser URL path does not match any specified URL paths. In this case the $routeProvider redirects to /.
Routes with parameter
It is also possible to define routes with parameter(s). Look at the following code line 9:
var app = angular.module('myApp', []);
app.config(function($routeProvider) {
$routeProvider.when('/', {
controller: DashboardCtrl,
templateUrl: 'dashboard.html'
}).when('/settings', {
controller: SettingsCtrl,
templateUrl: 'settings.html'
}).when('/item/:id', {
controller: ItemCtrl,
templateUrl: 'item.html'
}).otherwise({
redirectTo: '/'
});
});
You can see that there is a parameter :id. Parameters in routes start with a leading colon. An example route would be /item/3.
The route parameter can be read out in a controller by injecting the $routeParams service and reading out the property:
app.controller('ItemCtrl', function($scope, $routeParams) {
$scope.id = $routeParams.id;
});
$scope.id holds the number 3 when calling something like www.yourapp.com/item/3 in the browser.
Posted on Utopian.io - Rewarding Open Source Contributors
Your contribution cannot be approved because it does not follow the Utopian Rules.
My opinion:
You can contact us on Discord.
[utopian-moderator]