Simple AngularJS Routing with Single Page Application

Simple AngularJS Routing with Single Page Application

Today, We want to share with you Simple AngularJS Routing with Single Page Application Example.In this post we will show you AngularJS Routing In-depth, hear for angularjs routing example with parameters we will give you demo and example for implement.In this post, we will learn about AngularJS Routing Tutorial using ngRoute with an example.

Simple AngularJS Routing with Single Page Application Example

There are the Following The simple About Simple AngularJS Routing with Single Page Application Example Full Information With Example and source code.

As I will cover this Post with live Working example to develop Handling AngularJS Routing with Angular-Route , so the some major files and Directory structures for this example is following below.

  • index.html

AngularJS Routing

index.html

This is where I will make a simple HTML form and PHP server side source code for our web application. To make the forms simply all souce code copy and write it into your any text editor Like Notepad++, then save file it as index.html.

  laravel 6 Delete Multiple Records Eloquent

<!DOCTYPE html>
<html>
<head>
<title>angularjs routing example with parameters</title>
<script src="https://pakainfo.com/angular/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>
<body ng-app="pakainfoApp">

<p><a href="#/!">Home</a></p>

<a href="#!mobile">Mobile</a>
<a href="#!laptop">Laptop</a>
<a href="#!computer">Computer</a>

<div ng-view></div>

<script>
var pakainfoApp = angular.module("pakainfoApp", ["ngRoute"]);
pakainfoApp.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "home.htm"
    })
    .when("/mobile", {
        templateUrl : "mobile.htm"
    })
    .when("/laptop", {
        templateUrl : "laptop.htm"
    })
    .when("/computer", {
        templateUrl : "computer.htm"
    });
});
</script>

<p>Click on the links Simple AngularJS Routing to navigate to "mobile.htm", "laptop.htm", "computer.htm", or back to "home.htm"</p>
</body>
</html>

AngularJS with ng-view directive Example

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Routing and Views Tutorial with Example</title>
<script src="https://pakainfo.com/angular/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>

<body ng-app="pakainfoApp">

<p><a href="#/!">Home</a></p>

<a href="#!mobile">Mobile</a>
<a href="#!laptop">Laptop</a>
<a href="#!computer">Computer</a>

<div ng-view></div>

<script>
var pakainfoApp = angular.module("pakainfoApp", ["ngRoute"]);
pakainfoApp.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "home.htm"
    })
    .when("/mobile", {
        templateUrl : "mobile.htm"
    })
    .when("/laptop", {
        templateUrl : "laptop.htm"
    })
    .when("/computer", {
        templateUrl : "computer.htm"
    });
});
</script>

<p>Click on the links.</p>

<p>This example uses theSimple AngularJS Routing ng-view directive angular as an attribute to a HTML DIV element.</p>
</body>
</html>

AngularJS Routing with $routeProvider

Simple AngularJS Routing

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Routing and $routeProvider Tutorial with Example</title>
<script src="https://pakainfo.com/angular/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>

<body ng-app="pakainfoApp">

<p><a href="#/!">Home</a></p>

<a href="#!paakinfo">Website 1</a>
<a href="#!infinityknow">Website 2</a>

<p>Click on the links to read about PakaInfo and InfinityKnow.</p>

<div ng-view></div>

<script>
var pakainfoApp = angular.module("pakainfoApp", ["ngRoute"]);
pakainfoApp.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "home.htm"
    })
    .when("/paakinfo", {
        templateUrl : "paakinfo.htm"
    })
    .when("/infinityknow", {
        templateUrl : "infinityknow.htm"
    });
});
</script>

</body>
</html>

AngularJS Routing with Controllers

<!DOCTYPE html>
<html>
<head>
<title>Single Page Application with Angular Routing</title>
<script src="https://pakainfo.com/angular/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>

<body ng-app="pakainfoApp">

<p><a href="#/!">Home</a></p>

<a href="#!paakinfo">Website 1</a>
<a href="#!infinityknow">Website 2</a>

<p>Click on the links.</p>

<div ng-view></div>

<script>
var pakainfoApp = angular.module("pakainfoApp", ["ngRoute"]);
pakainfoApp.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "home.htm",
    })
    .when("/paakinfo", {
        templateUrl : "paakinfo.htm",
        controller : "londonCtrl"
    })
    .when("/infinityknow", {
        templateUrl : "infinityknow.htm",
        controller : "parisCtrl"
    });
});
pakainfoApp.controller("londonCtrl", function ($scope) {
    $scope.msg = "I love PakaInfo";
});
pakainfoApp.controller("parisCtrl", function ($scope) {
    $scope.msg = "I love InfinityKnow";
});

</script>

</body>
</html>

paakinfo.htm

<h1>PakaInfo</h1>
<h3>PakaInfo is the most Best Programming & Web Development blog.</h3>
<p>We deliver the useful and best tutorials for web professionals — developers, programmers, freelancers and site owners. Any visitors of this site are free to browse our tutorials, live demos and download scripts.</p>
<p>{{msg}}</p>

infinityknow.htm

<h1>InfinityKnow</h1>
<h3>InfinityKnow is the most popular Programming & Web Development blog.</h3>
<p>The InfinityKnow area is the most popular Programming & Web Development blog. Our mission is to provide the best online resources on programming and web development.</p>
<p>{{msg}}</p>

AngularJS Routing with Template

<!DOCTYPE html>
<html>
<head>
<title>Routing In AngularJS For Single Page Application </title>
<script src="https://pakainfo.com/angular/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>

<body ng-app="pakainfoApp">

<p><a href="#/!">Home</a></p>

<a href="#!laptop">Laptop</a>
<a href="#!mobile">Mobile</a>

<p>Click on the links to change the content.</p>

<p>The HTML shown in the ng-view directive are written in the template property of the $routeProvider.when method.</p>

<div ng-view></div>

<script>
var pakainfoApp = angular.module("pakainfoApp", ["ngRoute"]);
pakainfoApp.config(function($routeProvider) {
    $routeProvider
    .when("/", {
        template : "<h1>Home</h1><p>Click on the links to change this Data content</p>"
    })
    .when("/laptop", {
        template : "<h1>Laptop</h1><p>Laptops contain around 75% charges.</p>"
    })
    .when("/mobile", {
        template : "<h1>Mobile</h1><p>mobiles contain around 95% charges.</p>"
    });
});
</script>

</body>
</html>

AngularJS Routing with The otherwise method

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Routing Example and Single Page View Tutorial with Demo</title>
<script src="https://pakainfo.com/angular/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
</head>

<body ng-app="pakainfoApp">

<p><a href="#/!">Home</a></p>

<a href="#!laptop">Laptop</a>
<a href="#!mobile">Mobile</a>

<p>Use the AngularJS Routing "otherwise" function to init what to showing when none of the show urls are clicked.</p>

<div ng-view></div>

<script>
var pakainfoApp = angular.module("pakainfoApp", ["ngRoute"]);
pakainfoApp.config(function($routeProvider) {
    $routeProvider
    .when("/laptop", {
        template : "<h1>Laptop</h1><p>Laptops contain around 75% charges.</p>"
    })
    .when("/mobile", {
        template : "<h1>Mobile</h1><p>mobiles contain around 95% charges.</p>"
    })
    .otherwise({
        template : "<h1>NotSelected</h1><p>NotSelected has been selected</p>"
    });
});
</script>

</body>
</html>

Angular 6 CRUD Operations Application Tutorials

Read :

  Stripe API Master - Download Stripe API using PHP

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Simple AngularJS Routing Tutorial with Example.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Leave a Reply

avatar
  Subscribe  
Notify of