3

I checked Single Page Apps with AngularJS Routing and Templating tutorial and found Pretty URLs in AngularJS: Removing the # tutorial for remove # tag from URL. I did all the things but I can't get the app working. It would be great help someone can help on this. These are my codes,

// script.js

// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);

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

            // route for the home page
            .when('/', {
        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'
    });
    // use the HTML5 History API
    $locationProvider.html5Mode(true);
});

// 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! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>

<!-- define angular app -->
<html ng-app="scotchApp">
    <head>
        <base href="/">
        <!-- SCROLLS -->
        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

        <!-- SPELLS -->
        <!-- load angular via CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="script.js"></script>
    </head>

    <!-- define angular controller -->
    <body ng-controller="mainController">

        <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">Angular Routing Example</a>
                    </div>

                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><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>
                </div>
            </nav>
        </header>

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">

            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>

        </div>
    </body>
</html>

After the first tutorial my URL become file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#/ but after Second one URL becomes file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#%2F and links stop woking

Improve this question
5
  • 1
    Can you be more specific as to the results you're getting? Usually, once you switch to HTML5 mode, you will need URL rewriting on the web server so that the sever knows which file or server-side route to serve. You don't have anything here to indicate if that is your issue. Commented Dec 19, 2015 at 10:22
  • After the first tutorial my URL become file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#/ but after Second one URL becomes file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#%2F and links stop woking Commented Dec 19, 2015 at 10:34
  • 2
    Serving web pages from the file system has enough issues on it's own. You really need to host your page with a local web server. There are plenty of free solutions for this, with suitability depending on what other tools you use. Commented Dec 19, 2015 at 10:42
  • Hi @Balrog, I added to local server. This is my file structure - angulRoute - script.js - index.php - pages ----- home.html ----- about.html ----- contact.html and When I click links only URL changes to this localhost/angulRoute/#contact but nothing happens Commented Dec 19, 2015 at 11:02
  • 1
    If you're using HTML5 mode, you can't mix it with the # sign. Commented Dec 19, 2015 at 11:06

4 Answers 4

Reset to default
3

It's easy to solve.

You just need to inject ($locationProvider) where you declare your module and put this code ($locationProvider.html5Mode(true)) inside the function. Something like this.

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

myApp.config(function ($locationProvider){
  $locationProvider.html5Mode(true);
});
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You must not directly open angular's html files in your browser. You should rather start a simple http server for the same. The easiest way to do so, Assuming you have Python 2.7 installed on your filesystem:

python -m http.server <portNo> for serving the directory contents to http://localhost:<portNo>/

Then you also will be able to navigate to http://localhost:<portNo>/about and http://localhost:<portNo>/contact

Example:

Navigating to your project's main directory and then running python -m http.server 8888 would serve files to http://localhost:8888/ , where the routing should work correctly.

Improve this answer

Comments

1

First, remove the hashmark from your <a href="#...">s, like <a href="about"> or <a href="/about">. I also suggest you to use ng-href instead of href

Second, use some local http server, like python -m http.server to serve your files.

Note: If you wisht to use html5 mode, and want your app to work well when the user does not land on index.html, but on another route, you must configure the http server to serve index.html on all of your routes. We do it usually by serving index.html directly instead of returning 404.

Improve this answer

Comments

1

Finally with the help of above answers I figured to find an answer. (I used wamp server as local web server)

My sile structure

angulRoute
- script.js
- index.html
- pages
----- home.html
----- about.html
----- contact.html 

// script.js

// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);

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

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

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

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

    // use the HTML5 History API
    $locationProvider.html5Mode(true);
});

// 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! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="scotchApp">
    <head>
        <meta charset="utf-8">
        <!-- SCROLLS -->
        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

        <!-- SPELLS -->
        <!-- load angular and angular route via CDN -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script src="script.js"></script>
    </head>
    <body ng-controller="mainController">

        <!-- HEADER AND NAVBAR -->
        <header>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">Angular Routing Example</a>
                    </div>

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

        <!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main">

            <!-- angular templating -->
            <!-- this is where content will be injected -->
            <div ng-view></div>

        </div>

    </body>
</html>

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.