Routing is not working with Angular UI Router

Question

I have following code to setup the routing using Angular UI Router:

index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>AngularJS Routing</title>

    <script src="js/angular.js"></script>
    <script src="js/angular-ui-router.min.js"></script>
    <base href="/" />
    <script>
        'use strict'

        var myApp = angular.module('myApp', ['myApp.Controllers', 'ui.router']);

        var myAppControllers = angular.module('myApp.Controllers', []);

        myApp.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
            $stateProvider.state('view1', {
                url: '/view1',
                controller: 'Controller1',
                templateUrl: '/partials/view1.html'
            }).state('view2', {
                url: '/view2/:firstname/:lastname',
                controller: 'Controller2',
                resolve: {
                    names: function () {
                        return ['Misko', 'Voita', 'Brad'];
                    },
                },
                templateUrl: '/partials/view2.html'
            });
            $urlRouterProvider.otherwise('/view1'); 

            $locationProvider.html5Mode(true);
        });


        myAppControllers.controller('Controller1', function ($scope, $location, $state) {
            $scope.loadView2 = function () {                    
                $state.go('view2', {
                    firstname: $scope.firstname,
                    lastname: $scope.lastname
                });
            }
        });

        myAppControllers.controller('Controller2', function ($scope, $stateParams, names) {
            $scope.firstname = $stateParams.firstname;
            $scope.lastname = $stateParams.lastname;
            $scope.names = names;
        });

    </script>
</head>
<body>

    <ul class="menu">
        <li><a ui-sref="view1">View1</a></li>
        <li><a ui-sref="view2">View2</a></li>
    </ul>  
    </body>
</html>

I checked multiple times and I don't see any errors in console window of the chrome browser.

Can anyone help me to resolve this issue?

No I am using Visual Studio 2013 for running the application. — santosh kumar patro
– santosh kumar patro, Commented Feb 23, 2016 at 11:51

shershen · Accepted Answer · 2016-02-23 12:16:47Z

6

There's no ui-view directive in your html code. So the views have nowhere to render. You should add at least

<div ui-view></div>

to show the content of the views.

edited Feb 23, 2016 at 12:16

answered Feb 23, 2016 at 11:52

shershen

10k11 gold badges44 silver badges62 bronze badges

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

1 Comment

santosh kumar patro Over a year ago

Thanks a lot. It fixed the issue for me :).

Collectives™ on Stack Overflow

Routing is not working with Angular UI Router

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related