CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Sole
Sole

Reputation: 3340

Routing issue with angular and bootstrap

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...

Upvotes: 2

Views: 152

Answers (1)

dannypaz
dannypaz

Reputation: 1294

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.

Upvotes: 1

Related Questions