CODEWITHSUNDEEP
angularjsroutes
user3656567
user3656567

Reputation: 11

Routing in AngularJs not working

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.

Upvotes: 1

Views: 343

Answers (2)

Vaibhav Magon
Vaibhav Magon

Reputation: 1503

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.

Upvotes: 0

Shebo
Shebo

Reputation: 297

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

Upvotes: 2

Related Questions