1

i am trying to implement routing in AngularJs but it is not working. Following is my code

<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>My Page</title>
<script src="angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js">     
</script>
<script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</html>

And my app.js is

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

phonecatApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
  when('/phones', {
    templateUrl: 'partials/phone-list.html',
    controller: 'PhoneListCtrl'
  }).
  when('/phones/:phoneId', {
    templateUrl: 'partials/phone-detail.html',
    controller: 'PhoneDetailCtrl'
  }).
  otherwise({
    redirectTo: '/phones'
  });
}]);
phonecatApp.controller('PhoneListCtrl', function($scope) {     
$scope.message = 'This is Add new order screen';     
}); 
phonecatApp.controller('PhoneDetailCtrl', function($scope) { 
$scope.message = 'This is Show orders screen'; 
});

and when i try to open 'localhost/angular/app/index.html#/phones/' it do not shows content of phone-list.html, but remains at index.html. Please let me know what i am missing? is there any need to install any dependencies(bower or karma). Thanks in advance.

Improve this question

2 Answers 2

Reset to default
2

To have "regular" urls structure, there are 3 things you gonna need:

The JS Side

You need to use the html5Mode method from $locationProvider service that located in ngRoute module. just declare the dependency in the config header, and call $locationProvider.html5Mode(true);. that will make angular re-writes the url without the hash prefix. Example:

phonecatApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
}]);

The HTML Side

insert a base tag to your index.html head. the base tag should contain your root url. angular uses this as a reference to know on what root url to built it's routing. For example:

<head>
  <meta charset="utf-8">
  <title>My Page</title>
  <link href="style.css" rel="stylesheet" />
  <base href="http://localhost/angular/app/"/>
  <script src="https://code.angularjs.org/1.2.16/angular.js"></script>

The Apache Side

you need the server (i guess that in your case it's an apache ) to let the angular do his own routing, so you need an .htaccess file in you root directory with these lines:

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ /angular/app/ [L]

an example to a full .htaccess file, in case you don't familiar with it (maybe not all of the lines here are needed, i'm no htaccess expert):

<IfModule mod_rewrite.c>
  Options +FollowSymlinks
  RewriteEngine on
  RewriteBase /

  # Don't rewrite files or directories
  RewriteCond %{REQUEST_FILENAME} -f [OR]
  RewriteCond %{REQUEST_FILENAME} -d
  RewriteRule ^ - [L]

  # Rewrite everything else to index.php to allow html5 state links
  RewriteRule ^ /angular/app/ [L]
</IfModule>

I've tested it in my local server and it worked flawless. More about html5Mode in angular's documantations

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

Comments

0

For Routing Please refer to ui-router https://github.com/angular-ui/ui-router. This is much better than the ngRoute provided with angular as it gives more flexibility for nested routing as well.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.