Can't get AngularJS routing to work

Question

I am sure there is something simple that I am missing but I can't seem to find it. I have a super simple Angular JS SPA. The folder structure is as follows:

index.php
-- js
-- app.js
-- pages
-- home.html
-- post.html
-- know.html

in index.php I have:

<html class="no-js" lang="en" ng-app="postApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Post Safety App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <base href="/postsafetyapp/">
    </head>
    <body ng-controller="mainController">
        <main id="main">
            <div ng-view></div>
        </main>

        <!-- Angular JS -->
        <script src="js/vendor/angular.min.js"></script>  
        <script src="js/vendor/angular-route.min.js"></script>        

        <!-- Custom JS -->
        <script src="js/app.js"></script> 
    </body>
</html>

in home.html I have:

<div class="home buttons">
    <div class="button button-1-of-2">
        <a href="#share" class="button__link" id="button_share">
            <span class="button__icon"><i class="fa fa-share"></i></span>
            <span class="button__text">SHARE</span>
        </a>
    </div>
    <div class="button button-1-of-2">
        <a href="#know" class="button__link" id="button_share">
            <span class="button__icon"><i class="fa fa-graduation-cap"></i></span>
            <span class="button__text">KNOW</span>
        </a>
    </div>    
</div>

Here is the code in the app.js:

// create the main module
var postApp = angular.module("postApp", ['ngRoute']);

// configure our routes
postApp.config(function($routeProvider, $locationProvider) {

    $routeProvider

         // route for the home page
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        // route for the know page
        .when('/know', {
            templateUrl : 'pages/know.html',
            controller  : 'knowController'
        })

        // route for the share page
        .when('/share', {
            templateUrl : 'pages/share.html',
            controller  : 'shareController'
        });

        // use the HTML5 History API
        // $locationProvider.html5Mode({
        //      enabled: true,
        //      requireBase: false
        //  });

    });

The home.html page loads just fine, the URL appears as follows:

http://localhost/postsafetyapp/#!/

If I click on the share button, the URL changes to:

http://localhost/postsafetyapp/#!/#share

But the view doesn't change.

If I un-comment the $locationProvider code the URLs become:

http://localhost/postsafetyapp/ (home.html page loads no problem)

click on the button and the URL becomes:

http://localhost/postsafetyapp/#share (View doesn't change)

I am running WAMPSERVER on my local server. Any help would be amazing!

Answer 1

You can keep the controller in app config

Please compare the code with the plnkr link

Click here for working code in plnkr.

If you want to see the url to see how page gets routed use the below link

Seperate plnkr window (without code)

href in index page

<ul class="nav navbar-nav navbar-right">
        <li><a href="#!/home"><i class="fa fa-home"></i> Home</a></li>
        <li><a href="#!/about"><i class="fa fa-shield"></i> About</a></li>
        <li><a href="#!/contact"><i class="fa fa-comment"></i> Contact</a></li>
      </ul>

Controller defined in app config:

// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute']);

// configure our routes
scotchApp.config(function($routeProvider) {
  $routeProvider

  // route for the home page
    .when('/home', {
    templateUrl: 'pages/home.html',
    controller: 'mainController'
  })

  // route for the about page
  .when('/about', {
    templateUrl: 'pages/about.html',
    controller: 'aboutController'
  })

  // route for the contact page
  .when('/contact', {
    templateUrl: 'pages/contact.html',
    controller: 'contactController'
  })

  //otherwise redirect to home
  .otherwise({
    redirectTo: "/home"
  });
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
  // create a message to display in our view
  $scope.message = 'Everyone come and see how good I look!!!!';
});

scotchApp.controller('aboutController', function($scope) {
  $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
  $scope.message = 'Contact us!.';
});

Can't get AngularJS routing to work

Question

1 answers

solution1
0 2018-03-04 20:18:39

Can't get AngularJS routing to work

Question

1 answers

solution1 0 2018-03-04 20:18:39

solution1
0 2018-03-04 20:18:39