angularjs - $state.go change url but not load html page

Question

I'm practicing routing in angularJS and facing a problem. I looked online and tried many ways but that doesn't solve my problem. Can you help me?

I'm having problem with the $state.go function. It changes the url, but the html file is not loaded. I looked at the console but no error appears

app.js

(function(){
    var app = angular.module('myTrello', 
    ['date-directives', 'ngRoute', 'ui.router']);

    app.controller("mainCtrl", ['$scope', '$http', '$state', '$route', function($scope, $http, $state, $route){
    $scope.title = "Welcome to my trello";
    $http.get("http://quotes.rest/qod.json")
    .then(function(response) {
        let quoteInfo = response.data.contents.quotes[0];
        $scope.quote = quoteInfo.quote;
        $scope.author = quoteInfo.author;
    });
    $scope.go = function(path) {
        $state.go(path, {});
    };
}]);

app.controller("boardCtrl", function(){

});

// app.controller("routeCtrl", function($scope, $routeParams) {
//     $scope.param = $routeParams.param;
// });

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/home');
    $stateProvider
        .state('home', {
            url: '/home',        
            templateUrl: 'index.html',
            controller: 'mainCtrl'
        })
        .state('boards', {
            url: '/boards',
            templateUrl: 'boards/board.html',
            controller: 'boardCtrl'
        })
        // .state('/boards/:param', {
        //     url: '/boards/:param',
        //     templateUrl: 'index.html',
        //     //controller: 'boardCtrl'
        // })
}]);
})();

index.html (important parts)

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="bower-angular-route/angular-route.js"></script>
<script src="https://unpkg.com/[email protected]/release/angular-ui-router.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="date.js"></script>

 <body ng-controller="mainCtrl">
    <div class="container">
        <div class="jumbotron">
            <div class="title">
                <h2 class="text-center">{{title}}</h2>
            </div>
        </div>
        <div class="bg-1 text-white text-center">
            <h3>Today's quote</h3>
            <h4>{{quote}}</h4>
            <h5>By: {{author}}</h5>
        </div>
    </div>
    <button class="btn btn-info btn-lg boards" ng-click="go('boards')">My boards</button>
    <div ng-view></div>
  </body>

board.html

<html>
<h1>Boards</h1>
</html>

Satpal · Accepted Answer · 2017-07-28 13:07:52Z

2

As you are using ui-router, You need to use ui-view directive instead of ng-view, so change the code as

<div ui-view></div>

instead of

<div ng-view></div>

answered Jul 28, 2017 at 13:07

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Collectives™ on Stack Overflow

angularjs - $state.go change url but not load html page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related