Cant seem to get Angular Routing working on some occasions?

Question

I have been attempting to get angular routing working and everytime I create a new project and It does not work. I have had it working in some projects but I can never see why my newly created project does not work.

Its probably something obvious, thanks for any help in advance.

  <!DOCTYPE html>
    <html ng-app="app">
    <head>
        <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <link href="Content/Styles.css" rel="stylesheet" />
        <script src="Scripts/angular.min.js"></script>
        <script src="Scripts/angular-route.min.js"></script>
    </head>

    <body>

       <a href="#/">
        <button class="btn btn-danger">Homepage</button></a>
    <a href="#/about">
        <button class="btn btn-success">About</button></a>
    <a href="#/date">
        <button class="btn btn-warning">Date</button></a>


        <div class="row">
            <div ng-view>
            </div>
        </div>
        <script src="SinglePageApp/app.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>

    </body>
    </html>

    app.js file


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

    app.config(function ($routeProvider) {
        $routeProvider
        //default page
        .when('/', {
            templateUrl: "pages/homepage.html",
            controller: 'HomeCtrl'
        })
    //about page
    .when('/about', {
        templateUrl: "pages/about.html",
        controller: 'AboutCtrl'
    })
    //date page
    .when('/date', {
        templateUrl: "pages/date.html",
        controller: 'DateCtrl'
    });
    });

    app.controller('HomeCtrl', ['$scope', function ($scope) {
        $scope.homepage = "Homepage";
    }]);

    app.controller('AboutCtrl', ['$scope', function ($scope) {
        $scope.about = "Lorem ipsum............";
    }]);

    app.controller('DateCtrl', ['$scope', function ($scope) {
        $scope.dateNow = new Date();
    }]);

It has started working again, It was my directory layout, Is there a specific layout folders need to take for routing to work?? — Jason, Jan 26 '16 at 09:59

score 0 · Answer 1 · edited May 23 '17 at 11:52

Try this plunker:

http://embed.plnkr.co/L6E4GCe3O0Jh1vqKyGFD/

I've used the example at the angularJS documentation to create your usecase.

You should change the template filepaths, with your own. I also haven't included bootstrap.

If you want to use buttons, then you can use this example in plunkr based on this answer by Josh David Miller(upvote him if you use his directive). Directives are a way to customize html, and here we're using one as an html attribute (you can also use them as standalone elements) to create a hyperlink button.

score 0 · Answer 2 · answered Jan 26 '16 at 10:40

Here's fiddle for you that works as expected

Not sure why your code is not working, angular has pretty bad debugging tool.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
<div>
  <a href="#/">
    <button class="btn btn-danger">Homepage</button>
  </a>
  <a href="#/about">
    <button class="btn btn-success">About</button>
  </a>
  <a href="#/date">
    <button class="btn btn-warning">Date</button>
  </a>
  <div class="row">
    <div ng-view></div>
  </div>
</div>
<script type="text/ng-template" id="pages/homepage.html">
  {{homepage}}
</script>
<script type="text/ng-template" id="pages/about.html">
  {{about}}
</script>
<script type="text/ng-template" id="pages/date.html">
  {{dateNow}}
</script>

Script file looks like this

var app = angular.module('app', ['ngRoute']);
  app.config(function ($routeProvider) {
    $routeProvider
    //default page
    .when('/', {
      templateUrl: "pages/homepage.html",
      controller: 'HomeCtrl'
    })
    //about page
    .when('/about', {
        templateUrl: "pages/about.html",
        controller: 'AboutCtrl'
    })
    //date page
    .when('/date', {
        templateUrl: "pages/date.html",
        controller: 'DateCtrl'
    })
    .otherwise({redirectTo:'/'});
 });
app.controller('HomeCtrl', ['$scope', function ($scope) {
    $scope.homepage = "Homepage";
}]);

app.controller('AboutCtrl', ['$scope', function ($scope) {
    $scope.about = "Lorem ipsum............";
}]);

app.controller('DateCtrl', ['$scope', function ($scope) {
    $scope.dateNow = new Date();
}]);
angular.bootstrap(document.body, ['app']);

Cant seem to get Angular Routing working on some occasions?

2 Answers2