CODEWITHSUNDEEP
angularjsroutes
Pial Kanti
Pial Kanti

Reputation: 1610

AngularJS Route does not loading view

My project structure is looks like this:

project structure

I tried to make a single page application using this image. When index.html page will launch it will by default load registration.html in ng-view. But when index.html loads it does not load the registration.html as ng-view as expected.

And my files for index.html,main.css and mainAppRouter.js are below:

//mainAppRouter.js

(function () {
    var myModule = angular.module('studentInfo', ['ngRoute']);
    myModule.config(function ($routeProvider) {
        $routeProvider
            .when('/registration', {
                templateUrl : '../views/registration.html',
                controller: 'regController'
            })
            .otherwise({
                redirectTo: '/registration'
            });
        
        console.log("checking");
    });

    myModule.controller('regController', function ($scope) {
        $scope.message = 'This is Add new order screen';
        console.log("checking");
    });

});
/*man.css*/

.studentInfo{
    margin-top: 100px;
}

.navbar{
    padding: 1em;
}

.navbar-brand {
  padding:0;
}
<!--index.html-->

<!DOCTYPE html>
<html data-ng-app="studentInfo">

<head>
    <script src="lib/js/angular.min.js"></script>
    <script src="lib/js/jquery-3.0.0.min.js"></script>
    <script src="lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/js/angular-route.js"></script>
    <script src="app/route/mainAppRouter.js"></script>
    <link rel="stylesheet" href="lib/css/bootstrap.css" />
    <link rel="stylesheet" href="lib/css/bootstrap-theme.css" />
    <link rel="stylesheet" href="app/css/main.css" />
    <title>A demo Angular JS app</title>
</head>

<body>
    <div class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#"> <span><img src="app/images/people.png"/></span> Student Info </a>
            </div>
            <ul class="nav nav-pills navbar-right" data-ng-controller="NavbarController">
                <li role="presentation"><a href="#/registration">Registration</a></li>
                <li role="presentation"><a href="#/student">Student Details</a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="col-md-4 col-md-offset-4" data-ng-controller="regController">
            <h1>Student Info</h1>
        </div>
        <div ng-view></div>
    </div>
</body>

</html>

All my codes are in this github repo

What should i do to correct my problem?

Upvotes: 1

Views: 1723

Answers (1)

Vivz
Vivz

Reputation: 6620

I think the problem is because you have not specified any controller for your ng-view and also you have to set your base URL correctly.

 $routeProvider
            .when('/registration', {
              templateUrl :'http://localhost/StudentInfo/app/views/registration.html',
                controller: 'regController'
            })

And remove the controller tag from HTML.Your controller tag was outside the scope of ng-view.

  <div class="container">
        <div class="col-md-4 col-md-offset-4" >
            <h1>Student Info</h1>
        </div>
        <div ng-view></div>
    </div>

And there is a syntax error in your controller as well

myModule.controller('regController', function ($scope){
    $scope.message = 'This is Add new order screen';
})

UPDATED ANSWER: Another reason why this does not work is that you are running your example off the file system (using the file:// protocol) and many browsers (Chrome, Opera) restricts XHR calls when using the file:// protocol. AngularJS templates are downloaded via XHR and this, combined with the usage of the file:// protocol results in the error you are getting.

For more details: Couldn't load template using templateUrl in Angularjs

Upvotes: 2

Related Questions