11

I am trying to create my first angular app. But its not working at all. I have no idea what's the problem. I checked the console, but there's no erros.

<head>
 <meta charset="utf-8">
 <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-route.js"></script>
</head>
<body ng-app="myApp">
  <h1>Test angular</h1>
  <a href="#/">Main</a>
  <a href="#sec">Second</a>
  <a href="#th">Third</a>
  <div ng-view></div>
</body>

<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
});
</script>

Can anyone help me?

4
  • there are no erros in the console :/
    – Petrus
    Dec 16, 2016 at 13:25
  • Do all resources resolve properly? Do you see your template when you request you applicationurl/main.html?
    – Jeroen
    Dec 16, 2016 at 13:27
  • Im running on local server.
    – Petrus
    Dec 16, 2016 at 13:36
  • @Jaroen yes i see my template when i request to
    – Petrus
    Dec 16, 2016 at 13:38

5 Answers 5

30

Routes in Angular 1.6 changed from #/myUrl to #!/myUrl

You should change your ref to:

<a href="#!/">Main</a>
<a href="#!/sec">Second</a>
<a href="#!/th">Third</a>

See this answer if you want to remove this prefix.

2
  • @John Sparwasser: Thanks. Worked for me too for 1.6.4/angular.min.js...
    – Thulasiram
    Jun 12, 2017 at 11:23
  • 1
    Perfect answer !! @Mistalis great solution. Jan 10, 2018 at 10:27
5

Try adding $locationProvider to your script

app.config(['$locationProvider', function($locationProvider) {
        $locationProvider.hashPrefix('');
        }]);
1

I've found out that you didn't include the $routeProvider properly, Here's the working routing code:

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
  .when("/", {
      templateUrl : "main.html"
  })
  .when("/sec", {
      templateUrl : "sec.html"
  })
  .when("/th", {
      templateUrl : "th.html"
  });
}]);
3
  • is the website hosted on a local server? If not, then that's the reason why it's not working
    – Emad Salah
    Dec 16, 2016 at 13:34
  • Yes, it is hosted on local server.
    – Petrus
    Dec 16, 2016 at 13:45
  • Try posting a jsFiddle with your website so that I can check why this problem is occurring
    – Emad Salah
    Dec 16, 2016 at 15:32
1

Try this code it is working

app.config(['$routeProvider','$locationProvider',function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
    .when('/', {
        templateUrl: 'index.html'
    })
    .when('/about', {
        templateUrl: 'about.html'
    })
    .when('/service', {
        templateUrl: 'service.html'
    });}]);
-3

You need to fix your href attributes:

The correct way is:

<a href="#/">Main</a>
<a href="#/sec">Second</a>
<a href="#/th">Third</a>
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.