CODEWITHSUNDEEP
angularjsangular-ui-router
webNeat
webNeat

Reputation: 2828

Simple AngularJS and ui.router example not working

I am trying to use ui.router in a very simple example but cannot figure out why it doesn't work.

Here is the code:

<!doctype html>
<html ng-app="test">
    <head>
        <meta charset="utf-8">
        <title> ngTest </title>
    </head>
    <body>

        <a ui-sref="pages.home">Home</a>
        <div ui-view></div>

        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
        <script>
            var $app = angular.module('test', ['ui.router']);
            $app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
                $urlRouterProvider.otherwise('/');
                $stateProvider.state('pages', {
                    url: '/pages',
                    abstract: true
                });
                $stateProvider.state('pages.home', {
                    url: '/home',
                    template: '<h1> Hello </h1><p> {{ message }} </p>',
                    controller: function($scope){
                        $scope.message = 'Hey, It works !';
                    }
                });
            }]);
        </script>
    </body>
</html>

When the "Home" link is clicked, the URL is changed but the view is not shown !

Thanks for your help in advance :)

Upvotes: 1

Views: 287

Answers (2)

Roy M J
Roy M J

Reputation: 6938

You need to slightly modify your structure. If you are to use route like

$stateProvider.state('pages.home', {

then you would need to specify ui-view specifically inside that template for the child to be rendered. So it should be something like:

$stateProvider.state('pages', {
    url: '/pages',
    abstract: true,
    template: '<div ui-view></div>' //pages.home template will be nested into this template.
});

$stateProvider.state('pages.home', {
    url: '/home',
    template: '<h1> Hello </h1><p> {{ message }} </p>',
    controller: function($scope){
        $scope.message = 'Hey, It works !';
    }
});

Try it out. Cheers.

To know more, go through : https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views

Upvotes: 2

Nadeem Khoury
Nadeem Khoury

Reputation: 937

just change from url to templateURL. and be sure you specifying the exact location of your html.

Cheers.

Upvotes: 0

Related Questions