Angular.js converting my .html urls to just /something removing .html

Question

I want to convert my angular pages, I am using ng-includes but my pages has .html extensions, I would like have just /mypage

sample:

www.mypage.com/projects.html

I want archive this:

www.mypage.com/projects

html

<!-- header -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
      </button>
      <a class="navbar-brand" href="index.html">logo</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="projects.html">Projects</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>
<!-- header -->

<div>
<div ng-include="'app/pages/projects.html'"></div>
</div>


<footer class="footer">
  <div class="container text-center">
footer
  </div>
</footer>

js:

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

App.controller('ProjectCtrl', function($scope, $http) {
  $http.get('app/projects.json')
       .then(function(res){
          $scope.projects = res.data;
        });
});



 .config(function($routeProvider, $locationProvider) {

        $routeProvider
            .when('/projects', {
                templateUrl : 'projects.html',
                controller : mainController
            });

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

js fiddle: https://jsfiddle.net/3ww49zq7/

how can make it?

thanks.

when I try : localhost:9000/projects , I dont get the page, I need open: localhost:9000/projects.html to see my page :( — user6446281
– user6446281, Commented Oct 11, 2016 at 14:31
Then I suggest you read up on how html5mode works and the server side implications — charlietfl
– charlietfl, Commented Oct 11, 2016 at 14:36

Basil Aiman · Accepted Answer · 2016-10-11 15:01:33Z

1

At the first you will need to use ngRoute and declare it as a dependency in your module

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

Then you can use routeProvider

Second : You should use the ng-view directive to tell the angular that this div will be used to load the views.

<div ng-view></div>

Third :

You should change your links to the same in the routeprovieder

 <li class="active"><a href="index.html">Home</a></li>
 <li><a href="projects.html">Projects</a></li>

should be

 <li class="active"><a href="/index">Home</a></li>
 <li><a href="/projects">Projects</a></li>

and you should make sure that these links match the case in the routeProvider Object.

You should declare the controller you are using in the routeProvider here is a plunker to demonstrate :.http://plnkr.co/edit/DrPG9WtLg8abpLQpVj0W?p=preview

answered Oct 11, 2016 at 15:01

Basil Aiman

831 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user6446281 Over a year ago

thanks that is really what I looking for, but just a problem: when I click in the links appear: localhost:8000/projects.html#/page3 , I would like be just like that: localhost:8000/#/page3 , whithout the .html , understand?

Basil Aiman Over a year ago

Just add a case in the route provider like '.when("/".{ ... ' .. This is will be the default to load when there is no routes in the link. Then start the server like this localhost:8000/ without any routes . It will work.

user6446281 Over a year ago

did not work :(, can you update your question? please?

Collectives™ on Stack Overflow

Angular.js converting my .html urls to just /something removing .html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related