Angular JS routing not working and there is no error in console
Question
Here is my code. I have many partial templates but my angular routing is not working and there is no error in the console.can anybody tell me the error I am making and Thanks in advance.
Everything worked fine until I tried to add routing. I read that Angularjs version 1.2+ requires 'ngRoute' as an dependency (I am using version 1.2.16). I added it but it still doesn't work. Below are my codes.
index.html(main page)
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Angular Library -->
<script type="text/javascript" src="library/angular.js"></script>
<script type="text/javascript" src="library/angular-route.js"></script>
<script type="text/javascript" src="library/angular-animate.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Custom JS -->
<script type="text/javascript" src="js/animate.js"></script>
</head>
<body ng-app="app">
<div id="main">
<div class=" amber">
<div>
<i class="fa fa-facebook-f social" style="font-size:24px; cursor:pointer; padding:10px"></i>
<i class="fa fa-instagram" style="font-size:24px; cursor:pointer; padding:10px"></i>
<i class="fa fa-twitter" style="font-size:24px; cursor:pointer"></i>
</div>
<div class="pullLeft container">
<a href="#/home">HOME</a>
<a href="#/menu">MENU</a>
<a href="#/our_vision">POPULAR PRODUCTS</a>
<a href="#/contact_us">COMBOKITS</a>
<a>OUR VISION</a>
<a>CONTACT</a>
</div>
</div>
<div ng-view>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
script.js
var app = angular.module('app',['ngRoute','ngAnimate']);
app.config(function ($routeProvider){
$routeProvider
.when('/',{
templateUrl: '../Templates/home.html'
})
.when('/home',{
templateUrl: '../Templates/home.html'
})
.when('/menu',{
templateUrl: '../Templates/menu.html'
})
.when('/our_vision',{
templateUrl: '../Templates/our_vision.html'
})
.when('/contact_us',{
templateUrl: '../Templates/contact_us.html'
})
.otherwise({
redirectTo: '/'
});
});
app.controller('TestCtrl',function TestCtrl() {
var self = this;
this.showBoxOne = false;
this.showBoxTwo = false;
this.showBoxThree = false;
this.showBoxFour = false;
});
1 answers
solution1
0 ACCPTED 2017-11-29 09:24:16
@Aria, I tried your sample, seems to be working fine. You sure that at server side your folder structure is correct and files are available. Just suspecting there may be problem with template file paths also can you check the server logs also if you are getting any errors there.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.