CODEWITHSUNDEEP
angularjsangularjs-routingngroute
vimuth
vimuth

Reputation: 5612

Removing the # from AngularJS Routing

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

Upvotes: 3

Views: 3271

Answers (4)

Thiago Maciel
Thiago Maciel

Reputation: 37

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);
});

Upvotes: 3

vimuth
vimuth

Reputation: 5612

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>

Upvotes: 1

Tamas Hegedus
Tamas Hegedus

Reputation: 29916

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.

Upvotes: 1

Avijit Gupta
Avijit Gupta

Reputation: 5756

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.

Upvotes: 1

Related Questions