CODEWITHSUNDEEP
javascriptangularjs
php_nub_qq
php_nub_qq

Reputation: 16065

Can not get angular routing to work

I'm diving into angular and this is pretty basic. I can't get this routing thing to work. Essentially this is what I have

<!DOCTYPE html>
<html ng-app="panel">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
        <script>
                    var panel = angular.module('panel', ['ngRoute']);

                    panel.config(function ($routeProvider) {
                        $routeProvider.
                            when(':route', {
                                controller: 'MainCtrl'
                            });
                    });

                    panel.controller('MainCtrl', function ($scope, $http, $routeParam) {
                        console.log($scope, $routeParam);
                        $http.get($routeParam.route).success(function (html) {
                            $scope.body = html;
                        });
                    });
        </script>
    </head>

    <body ng-model="body"></body>
</html>

I'm trying to load whatever page is in the hash dynamically in the body but what I get when I change the hash is I get something like #!#test if I go to #test and I see nothing in the console.

Upvotes: 0

Views: 177

Answers (2)

jesusbotella
jesusbotella

Reputation: 636

You need to set a template for the route, as you can see in this $route example:

$routeProvider
.when('/Book/:bookId', {
  templateUrl: 'book.html',
  controller: 'BookController'
})

I do not remember if the leading slash is mandatory but it may be also needed for the route to work.

Instead of that ng-model that you set in the body tag, you need to put an ng-view tag in order to insert the template into the page body.

Upvotes: 1

Samuel Adeshina
Samuel Adeshina

Reputation: 151

if all you want to do is get the job done, this ↓ is what your code should look like.

<!DOCTYPE html>
    <html ng-app="panel">
        <head>
        <base href="/">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
        <script>
            var panel = angular.module('panel', ['ngRoute']);

            panel.config(function ($routeProvider, $locationProvider) {
                $routeProvider
                .when('/:page*', {
                    controller: "MainCtrl",
                    templateUrl: function(url){
                        return url.page+".html";
                    }
                });

                $locationProvider.html5Mode(true);
            });

            panel.controller('MainCtrl', function ($scope, $http) {

            });
        </script>
    </head>

    <body>
        <ng-view></ng-view>
    </body>
</html>

If you want to know why your code isn't working and why the code above works, grab some popcorn.

There are several things wrong with your code snippet, the first and most obvious one is this line:

panel.controller('MainCtrl', function ($scope, $http, $routeParam) {

$routeParam should've been $routeParams (with an s). From your browser console, you'd probably see something that looks like this:

Error: [$injector:unpr]

That's an Unknown provider injector error and that's because "$routeParam" is not a known provider. The rule of thumb is when you see an error that looks like that, check the services and 'providers' you've injected into your controller(s), believe me, it'd save you years of debugging.

That aside, from your code, it shows that you needed to perform dynamic routing, but has no clue how to get back the url params you send to your route from inside the routing config, yes?

The 'templateUrl' option of the when callback does not only accept strings as value, you can also pass in a function callback which contains as the first parameter, the url you are routing to. Something like this:

.when('/', {
   controller: "
   templateUrl: function(url){
         return url.page+".html";
   }
});

if you try to access something like 'http://local.devserv/test' for instance, url will contain an object that's equivalent to: 

{page: '/test'}

If you look at my code ↑ You'd notice this is exactly how I have provided a better angular-oriented approach to your need for dynamic routes.

templateUrl: function(url){
    return url.page+".html"; //<-- returns test.html for this url
                             //http://local.devserv/test and pages/somepage.html
                             //for this one http://local.devserv/pages/somepage
}

Also don't forget that it is paramount to include the ng-view directive into the markup whenever angular routing is used. Without ng-view, when the route finds the template you need, there'd be no where to display the content of that template. That's also one of the several reasons why your code is not working.

To remove the hashbangs (!, #!#test) from your url, employ the html5mode api of $locationProvider to prettify your urls. That's exactly, why you see it in my snippet above. Check this url for a better explanation of what I mean https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

Upvotes: 1

Related Questions