Twitter Bootstrap Question posted in

ngRoute not finding template – Twitter bootstrap

I’m new to angular and am having a hard time getting ngRoute to pick up my template file.

Here is my index.html:

<html ng-app="myApp">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="app.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<nav>
    <div>
        <ul>
             <li><a href="#/home">home</a></li>
        </ul>
    </div>
</nav>

<body>
    <div ng-view>
    </div>
</body>


</html>

Here is my app.js:

var myApp = angular.module('myApp', ['ngRoute']);

myApp.controller('MainCtrl', function($scope) {
    $scope.message = 'Hello World';
});

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {
            templateUrl: 'pages/home.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/home'
        });
}]);

Here is my pages/home.html:

<div ng-controller="MainCtrl">
    <p>Test</p>
    <p>{{ message }}</p>    
</div>

I can see that it is appending #/ to the root url so perhaps this is partially working; however, it doesn’t seem to be rendering the template at “pages/home.html”.

I’ve checked the cdn url’s to make sure there wasn’t any version inconsistencies, and what not, but that doesn’t seem the be the case.

This is pretty much my first Angular project, and I’ve just been going off of the docs, but there must be something I’m not seeing. Coming from other server side projects, the lack of stack trace is killing me haha.

Is there something I’m missing in the above code, that is preventing my template from being rendered in ‘/’?

Thanks!

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    This was an annoying one, but I think I figured it out.

    I was encountering this issue while testing locally (no nodejs) on Chrome; however, sure enough when I popped it open in Safari it was working. It seems that ngRoute chokes on local files in Chrome.

    I found a reference to the issue here, which is closed, so I'm guessing if I update to a newer version I shouldn't have this issue.

    https://github.com/angular/angular.js/issues/4680

    Setting up a web server should resolve this problem.

    Why AngularJS routes are not working in local?


  2. 0

    This is my code and it is working fine, you cam take help from it.

    var EventList = angular.module("EventList", ['ngRoute' ,'infinite-scroll']);
EventList.config(function($routeProvider) {
    //$locationProvider.html5Mode(true); 
    $routeProvider
        .when('/', {
            templateUrl: 'views/business/business_home_events.html',
            controller: 'EventListController'
         });
});

EventList.controller('EventListController', ['$scope',  '$http', '$route', function($scope,  $http, $route){

        // Do your work

}]);
    Login or Signup to reply.
  3. 0

    the problem is with your when ('/'). Since your url has #/home – it looks in the .when to find that route.

    change it to

    myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {          // <-
            templateUrl: 'pages/home.html',
            controller: 'MainCtrl'
        })
        .otherwise({
            redirectTo: '/'
        });
}]);
    Login or Signup to reply.
  4. 0

    I have executed you code and is working fine on mozilla.

    However, there is an issue in chrome of cross origin request if we run the file without putting in server.

    But it is working fine on chrome also if you will put it on server (may be xampp/wampp) and run the file. The angular library you are using have http request to another server.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search