Routing issue with angular and bootstrap

Question

I am trying to route my APP in angular and bootstrap, but nothing shows in the view, my code is:

app.js

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


myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/main', {
    templateurl: 'partials/main.html',
    controller: 'MainControl'
}).
otherwise({
    redirectTo: '/main'
});
}]);

controllers.js

var mainControl = angular.module('mainControl', []);
mainControl.controller('MainControl', function($scope) {
$scope.message = "This is the message";

});

index.html

    <!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Angular JS and Bootstrap</title>
    <!-- jQuery Version 1.11.1 -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

<!-- Angular JS -->
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.min.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/accordian.js"></script>

    <!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="css/app.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>

<body ng-app="myApp">

  <div ng-view>
</div>

</body>

</html>

Any help would be appreciated?? I am fairly new to angular JS, am i declaring the ng-app in the wrong place?. when I look in the url, the url is displayed correctly i.e index.html#/main, but nothing is displayed...

does the main.html template get downloaded? If so, does a breakpoint in the controller get hit when it's instantiated? — David L
– David L, Commented Jul 21, 2015 at 15:05
Check your javascript console and tell us if you have any errors. — Okazari
– Okazari, Commented Jul 21, 2015 at 15:08
@Sole That's great, but I still have two outstanding (and incredibly telling) questions that you haven't answered :) — David L
– David L, Commented Jul 21, 2015 at 15:11
@David L... no its not downloaded because nothing is displayed in the view but the url is index.html#/main.... no errors and nothing displayed.. the controller really isnt adding any functionality yet... so the content is in main.html which is not coming through? — Sole
– Sole, Commented Jul 21, 2015 at 15:13
@Sole looks like livepo's answer below is probably want you want. — David L
– David L, Commented Jul 21, 2015 at 15:15

dannypaz · Accepted Answer · 2015-07-21 15:12:31Z

1

It looks like you have a typo?

when('/main', {
    templateUrl: 'partials/main.html', // capitalization on templateurl
    controller: 'MainControl'
}).

EDIT: Confirmed that it works locally with your code.

answered Jul 21, 2015 at 15:12

dannypaz

1,2941 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dannypaz Over a year ago

You have templateurl above. you need to change it to templateUrl

Sole Over a year ago

Yep fixed that but two errors in console any ideas? 1 - XMLHttpRequest cannot load 2 - Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load

Sole Over a year ago

its a chrome problem, or i need to test on a server or switch to firefox to test....

Collectives™ on Stack Overflow

Routing issue with angular and bootstrap

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related