Matoy Matoy - 3 months ago 15
Javascript Question

refactor angular-route to angular-ui-router

I've created a single page application using ngRoute like so:

index.html (ngRoute)

var smallTalkzModel = angular.module('smallTalkzModel', ['ngRoute']);
smallTalkzModel.config(function($routeProvider) {

$routeProvider
.when('/', {
templateUrl : 'components/login/loginView.html',
controller : 'loginController'
})
.when('/chat', {
templateUrl : 'components/chat/chatView.html',
controller : 'chatController'
});
}).run(function ($rootScope) {

// App is loading, so set isAppLoading to true and start a timer
console.log($rootScope);
$rootScope.isAppLoading = true;

});;


small-talkz.model.js (ngRoute)

<div ng-app="smallTalkzModel" >
<div ng-view>
</div>

</div>


Then I heard that it is better to use ui.router because it is a 3rd party which have more capabilities and can does everything that ngRoute does and more and will be supported in future version of angular js...

So, I tried to refactore my code into the code below. which does not work...

Can anyone tell me why? I did not use ng-surf because I don't have any links into my html. I get to them by localhost:3000/somePage and not by navigation...

index.html (ui.router)

<div ng-app="smallTalkzModel" class="loader">
<div ui-view>
</div>
</div>


small-talkz.model.js (ui.router)

var smallTalkzModel = angular.module('smallTalkzModel', ['ui.router']);
smallTalkzModel.config(function($stateProvider, $urlRouterProvider) {

$stateProvider
.state('login', {
url: '/',
templateUrl : 'components/login/loginView.html',
controller : 'loginController'
})
.state('chat', {
url: '/chat',
templateUrl : 'components/chat/chatView.html',
controller : 'chatController'
});
});;

Answer

angular-ui-router is based on states. If you want to go from one state to another then you have to use "ui-sref" or "$state.go()"

for example to go to your chat page (State), use:

<a ui-sref="chat">to go chat page</a>
Comments