AngularJs 1 routing not working

Question

AngularJs 1 routing not working

334 Views Asked by sumant thakur At 04 April 2025 at 18:17

My folder structure is:

-ngTest
    --Scripts(all js files)
    --index.html
    --main.js
    --partialView.html

index.html code is as follows:

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>Angular App</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <p>Hello world</p>
        <div ng-view></div>
        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-route.js"></script>
        <script src="main.js"></script>
    </body>
</html>

main.js is :

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when('/home', {
        templateUrl: 'partialView.html',
        controller: 'newCtrl'
    })
}).controller('newCtrl', function () {
    console.log('finally');
});

partialView.html:

<div>
    <p> From view</p>
</div>

What am I missing in this code?

Original Q&A

There are 2 best solutions below

**darron614** · Answer 1

If you want to load partialView.html as default you have to route to "/", not to "/home".

  angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'partialView.html',
        controller: 'newCtrl'
    })
}).controller('newCtrl', function () {
    console.log('finally');
});

"/html" will be accessed if you link to it in your html file, for example with:

<a href=#/html>Link<a>

**Elbassel** · Answer 2

Your code looks good but missing something: You need an anchor that make you go to /home, you can add it in the index file as follow:

<a href="#/home">Red</a>

Then click the home anchor to make your partial view appear. Or
In the router configuration modify the home to make it only "/", so the code will be as the following:

angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
$routeProvider.when('/', {
    templateUrl: 'partialView.html',
    controller: 'newCtrl'
}).controller('newCtrl', function () {
console.log('finally');});

One last thing, if you're using angular latest 1.6.0, you have to add the following code:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');}]);

AngularJs 1 routing not working

There are 2 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULAR-ROUTING

Trending Questions

Popular # Hahtags

Popular Questions