UI router not working

UI router not working at all. I have:

angular.module('bApp', ['ui.router']);
angular.module('bApp').config(function($stateProvider, $urlRouterProvider) {
    
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('main', {
            url: '/',
            templateUrl: '/views/main.html',
            controller: 'MainCtrl'
        })

    .state('register', {
        url: '/register',
        templateUrl: '/views/register.html',
        controller: 'RegisterCtrl'
       
    });
});

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/bootstrap-hero.css">
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
    <!-- build:js(.) scripts/vendor.js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

    <!-- endbuild -->
</head>
<body ng-app="bApp">
    <!-- Add your site or application content here -->
    <div class="header">
        <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="#/">b</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a ui-sref="main">Home</a></li>
                    <li><a ui-sref="register">Register</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div ui-view></div>
    
     <script src="scripts/app.js"></script>
    <script src="scripts/app.config.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/register.js"></script>
    </div>
</body>

</html>

There is no Errors at the console, Even URL not changing when I'm clicking on register TAB. I do not have any Idea why that is not working. I tried to remove controllers from states and got the same behavior.

That solution also didn't worked Please help.

回答1:

Try $state.go('register'); in controller or app.run block. maybe it raise some error.

watch in DevTools for requests, maybe some of them doesnt works (E.G. 404, 403)..

回答2:

Did you try to take away the begining slash on your url? i'm not quite sure about this, but when I code in AngularJS instead using