CODEWITHSUNDEEP
angularjsangular-routing
Ebuka
Ebuka

Reputation: 75

Angularjs Routing Not working, the view is not rendering

For some reason my angularjs routing is not working. The view is not rendering when a link is clicked. I don't see any errors in the console.

Here is my setup 

    (function(){
        var app = angular.module('myapp',[
            'ngRoute',
            //'quizcontrollers'
        ]);

        app.config(['$routeProvider',
      function($routeProvider) {
        $routeProvider.
          when('/questions', {
             controller: 'quizcontroller',
             templateUrl: 'questions.html'

            })
          // .when('/quiz/', {
          //   templateUrl: 'partials/phone-detail.html',
          //   controller: 'PhoneDetailCtrl'
          // }).
          .otherwise({
            redirectTo: '/'
             });
         }]);
  }());

quiz.js

 (function(){
      var app = angular.module("myapp",[]);
      app.controller  ("quizcontroller",function($scope,$http,$location,$window){
        $scope.message ="hello"
       })
   }())

add-quiz.php

    <html ng-app="myapp">
    <head></head>
      <body>
       <a href="#/questions">Test</a>
      <div data-ng-view=""></div>

      <script src="/path/backend/web/assets/js/angular/angular.js">     </script>
      <script src="/path/backend/web/assets/js/angular/angular-route.js">     </script>
      <script src="/path/backend/web/assets/js/angular/app.js"></script>
      <script src="/path/backend/web/assets/js/angular/app-config.js"></script>
      <script src="/teachsity/backend/web/assets/js/angular/filters/range.js"></script>
      <script src="/path/backend/web/assets/js/angular/controllers/quiz.js"></script>
     </body>
   </html>

The question.html file is in the same directory as the app.js.

Upvotes: 0

Views: 610

Answers (2)

kmhigashioka
kmhigashioka

Reputation: 521

The reason behind this is because your $routeProvider assumed that questions.html has the same path as your add-quiz.php. So you must change your templateUrl from

$routeProvider.
          when('/questions', {
             controller: 'quizcontroller',
             templateUrl: 'questions.html'

            })

To

$routeProvider.
              when('/questions', {
                 controller: 'quizcontroller',
                 templateUrl: '/path/backend/web/assets/js/angular/questions.html'

                })

Upvotes: 0

Paresh Gami
Paresh Gami

Reputation: 4782

You declar module twice remove from controller declaration.

<html ng-app="myapp">
    <head></head>

    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script>

        <a href="#/questions">Test</a>
        <div ng-view></div>

    </body>
</html>

<script type="text/javascript">
(function()
{
        var app = angular.module('myapp',['ngRoute']);

        app.config(['$routeProvider',
        function($routeProvider) 
        {
            $routeProvider

            .when('/', 
            {
                templateUrl : 'questions.html'
            })

            .when('/questions', 
            {
                controller: 'quizcontroller',
                templateUrl: 'questions.html'
            })
            .otherwise(
            {
                redirectTo: '/'
            });
        }]);

        app.controller  ("quizcontroller",function($scope,$http,$location,$window)
        {
            $scope.message ="hello"
        })
}())
</script>

Upvotes: 2

Related Questions