CODEWITHSUNDEEP
angularjsangular-ui-router
SA.
SA.

Reputation: 752

route not working in angular

I've created a index.html page where I am defining 2 links as:

<!DOCTYPE html>
<html ng-app="test">
<head>
    <title>My Angular App!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script src="js/app.js"></script>
</head>
<body>
<div id="links">
    <a ui-sref="login">Login</a>
    <a ui-sref="register">Register</a>
</div>
<div ui-view></div>
</body>
</html>

I my app.js file, I am defining the route as:

angular.module('test', ['ui.router'])
    .config([
        '$stateProvider',
        '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $stateProvider
                .state('register', {
                    url: '/register',
                    templateUrl: '/partials/register.html',
                    controller: 'registration'
                });
            $stateProvider.state('login',{
               url: '/login',
                templateUrl: '/partials/login.html',
                controller: 'login'
            });

            $urlRouterProvider.otherwise('/');
        }])

When I click on the links, defined in index.html file, it is not showing the another page as defined in app.js

Upvotes: 1

Views: 212

Answers (1)

V31
V31

Reputation: 7666

You need not inject the dependencies in the config folder.

You can do it like this:

angular.module('test', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('register', {
                url: '/register',
                templateUrl: '/partials/register.html',
                controller: 'registration'
            });
        $stateProvider.state('login',{
           url: '/login',
            templateUrl: '/partials/login.html',
            controller: 'login'
        });

        $urlRouterProvider.otherwise('/');
    });

Upvotes: 2

Related Questions