javascript - angularjs - $state.go change url but not load html page -
i'm practicing routing in angularjs , facing problem. looked online , tried many ways doesn't solve problem. can me?
i'm having problem $state.go function. changes url, html file not loaded. looked @ console 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 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/angular-ui-router@1.0.3/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>
as using ui-router
, need use ui-view
directive instead of ng-view
, change code as
<div ui-view></div>
instead of
<div ng-view></div>
Comments
Post a Comment