i want to load an animate when routechange.
why nothing in console.
html
<body ng-app="app" ng-controller="ctrl">
<a ui-sref="home">home</a>
<a ui-sref="route">route</a>
<ui-view></ui-view>
<script src="//cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"></script>
js
var app = angular.module('app',['ui.router']);
app.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
url:'/home',
template:'<div>home</div>'
})
.state('route',{
url:'/route',
template:'<div>route</div>'
})
})
app.controller('ctrl',function($scope){
});
app.run(function($rootScope,$state){
// $rootScope.$state = $state;
$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
console.log(111); //why cannot?
// load.onLoading(); //loading animate..
})
});
</script>
</body>
i want to load an animate when routechange.
why nothing in console.
From angular-ui-router docs:
State Change Events
NOTE: State change events are deprecated, DISABLED and replaced by
Transition Hooks as of version 1.0 (details)
And to migrate from legacy to the most recent angular-ui-router version:
// Legacy example
app.run(function($rootScope, $state) {
$rootScope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) {
// some code
});
});
// Migrate to: UI-Router 1.0 Transition Hook
app.run(function($transitions) {
$transitions.onStart({ }, function(trans) {
// some code
});
});
Source here
Its better to use ng-animate module to animate page route. You can see the docs here. You can also check for this tutorial. Tutorial
Related
Please Helpme How can i get values from $statechangeStart and $stateChaneSuccess
MyApp.js
app.run(function ($rootScope) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
$scope.IsLoading = true;
})
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
$scope.IsLoading = False;
})
})
Home.js
///Here How can i use IsLoading
Use providers (generally a service or factory, maybe a .value) to define things that can be injected into controllers.
https://docs.angularjs.org/guide/providers
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
Best practice for using $rootscope in an Angularjs application?
angular.module('myapp',[])
.value('SharedObject', {isLoading:true})
.run(function($timeout, SharedObject){
$timeout(function(){SharedObject.isLoading = false}, 2000);
})
.controller('MyCtrl', function(SharedObject){
this.SharedObject = SharedObject;
})
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl as myctrl">
{{myctrl.SharedObject}}
</body>
</html>
Because you are adding this logic in the run function, you'll want to set the isLoading property on the $rootScope object, not the $scope object, which does not exist in this context:
app.run(function ($rootScope) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
$rootScope.isLoading = true;
});
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
$rootScope.isLoading = false;
});
});
Then, in your template that has access to $rootScope, you can show a loading screen by using ngIf, which conditionally adds elements to the DOM:
<div ng-if="isLoading" class="loading-screen">
Loading...
</div>
I am using UI Router in my angular app. I am trying to integrate state change events, but they are not firing on state change. Everything else is working fine and there is no error in console. I came across following similar questions, but none of the solution worked for me:
$rootScope.$on("$routeChangeSuccess) or $rootScope.$on("$stateChangeSuccess) does not work when using ui-router(AngularJS)
angular + ui-router: $stateChangeSuccess triggered on state b but not on a.b
Following is my Angular code:
(function() {
angular.module("bootdemo", [
"ngResource",
"ui.router",
"bootdemo.core",
"bootdemo.index"
])
.run(function ($rootScope, $location, $state, $stateParams) {
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
alert("root change success");
})
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams, options){
alert("root change start");
})
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error){
alert("root change error");
})
})
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('index', {
url: "/",
templateUrl: '/index/templates/welcome.html',
controller: 'IndexController as vm'
})
.state('login', {
url: "/login",
templateUrl: '/index/templates/login.html',
controller: 'LoginController as ctrl'
})
.state('home', {
url: "/home",
templateUrl: '/index/templates/home.html',
controller: 'HomeController as ctrl'
})
});
}());
Left with no clue. I am not sure what I am missing.
StateChange events has been deprecated for ui.router >= 1.0
for the new ui.router use the following
StateChangeSuccess
$transitions.onSuccess({}, function() {
console.log("statechange success");
});
StateChangeStart
$transitions.onStart({}, function(trans) {
console.log("statechange start");
});
Check this migration guide for more information
If you are using the new ui-router (v1.0.0), the $stateChange* events will not work. You must use $transitions.on* hooks from now on.
You can read here.
https://ui-router.github.io/docs/latest/modules/ng1_state_events.html
https://github.com/angular-ui/ui-router/issues/2720
$state events are deprecated for angular version > 1.0.0.
now onward for change event we have to use $transitions
refer $transitions from here
I wish to attach a listener to URL changes in the ui.router module I use in an AngularJS app, because I need to get the new state and its url when the url changes. In order to customize the url change listener, I've done the following, but it's not working (yet):
in the config section of ui.router, I added this line:
$urlRouterProvider.deferIntercept();
and after the config(), I have the following code, hoping to cactch the ui.router's state and its url
config(
//ui.router's config ommitted....
).run(function($rootScope, $urlRouter) {
$rootScope.$on('$locationChangeSuccess', function(e) {
console.log(e);
e.preventDefault(); //prevent the default handler
$urlRouter.sync(); //once the interception is done, sync the current url
$urlRouter.listen();
})
});
I am not sure if this is possible to do with ui.router. Or there is a much easier way to get the state and its url?
I am not 100% sure what is the real requirement behind. But with UI-Router, we should use $stateChangeStart event I'd say.
There is an example, a working plunker
$rootScope.$on('$stateChangeStart', function (event, toState, toParams
, fromState, fromParams)
{
console.log(event)
console.log(toState)
console.log(toParams)
console.log(fromState)
console.log(fromParams)
console.log(toState)
console.log($location.url())
});
Check it here
The $urlRouter and its .deferIntercept() and .listen() or more useful for declaring states in a .run() phase
// config
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProviderRef = $stateProvider;
$urlRouterProvider.otherwise('/home');
$urlRouterProvider.deferIntercept();
// run
.run(['$rootScope', '$urlRouter',
function($rootScope, $urlRouter) {
$stateProviderRef
.state('home', {
url: "/home",
templateUrl: 'tpl.html',
})
$urlRouter.listen();
}
]);
Testing ui-router for the fist time but testing the Events at the moment and I can't seem to understand how to trigger $viewContentLoaded or Loading. Although, I've got stageChangeSuccess, etc working! I just pushed everything to http://punkbit.com/space_competition/ but also added some code here. I expected to trigger the events when a new view is loaded to ui-view. But I guess I'm missing something here!
<div class="pure-g">
<div class="pure-u-1" ui-view>
</div>
</div>
<!-- s: template partials -->
<script type="text/ng-template" id="menu.html">
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li>home</li>
<li class="pure-menu-selected">like_gate</li>
<li>terms_and_conditions</li>
<li>enter_competition</li>
</ul>
</div>
</script>
<script type="text/ng-template" id="home.html">
<p>home.html template! fbLike is {{fbLike}}</p>
</script>
<script type="text/ng-template" id="enter_competition.html">
<p>enter_competition.html template!</p>
</script>
<script type="text/ng-template" id="like_gate.html">
<p>like.html template!</p>
</script>
<script type="text/ng-template" id="terms_and_conditions.html">
<p>terms_and_conditions.html template!</p>
</script>
<!-- e: template partials -->
main.js
angular.module("space_competition", ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'homeCtrl',
resolve: {
fb_like: 'fbLike'
}
})
.state('enter_competition', {
url: '/enter_competition',
templateUrl: 'enter_competition.html',
controller: 'enterCompetitionCtrl',
resolve: {
fb_like: 'fbLike'
}
})
.state('like_gate', {
url: '/like_gate',
templateUrl: 'like_gate.html',
controller: 'likeGateCtrl'
})
.state('terms_and_conditions', {
url: '/terms_and_conditions',
templateUrl: 'terms_and_conditions.html',
controller: 'termsAndConditionsCtrl'
});
$urlRouterProvider.otherwise("/home");
//$locationProvider.hashPrefix('!');
})
.run(function($rootScope){
$rootScope
.$on('$stateChangeStart',
function(event, toState, toParams, fromState, fromParams){
console.log("State Change: transition begins!");
});
$rootScope
.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){
console.log("State Change: State change success!");
});
$rootScope
.$on('$stateChangeError',
function(event, toState, toParams, fromState, fromParams){
console.log("State Change: Error!");
});
$rootScope
.$on('$stateNotFound',
function(event, toState, toParams, fromState, fromParams){
console.log("State Change: State not found!");
});
$rootScope
.$on('$viewContentLoading',
function(event, viewConfig){
console.log("View Load: the view is loaded, and DOM rendered!");
});
$rootScope
.$on('$viewcontentLoaded',
function(event, viewConfig){
console.log("View Load: the view is loaded, and DOM rendered!");
});
})
.controller('homeCtrl', function($scope, fbLike){
$scope.fbLike = fbLike.liked();
})
.controller('enterCompetitionCtrl', function($scope, fbLike){
fbLike.liked();
})
.controller('likeGateCtrl', function($scope){
})
.controller('termsAndConditionsCtrl', function($scope){
})
.factory('fbLike', function($http, $q){
return {
liked: function(){
return true;
}
};
});
Anyone experienced could have a look please ?
Thanks : D
it looks like you have $viewcontentLoaded instead of $viewContentLoaded. did you forget to camel-case-capitalize the C?
The $viewContentLoading event is now correctly firing with release 0.2.11: fix(state): allow view content loading broadcast
I am doing something similar to below on my app but I am just not able to get the routeChangeSuccess event.
var myapp = angular.module('myapp', ["ui.router", "ngRoute"]);
myapp.controller("home.RootController",
function($rootScope, $scope, $location, $route) {
$scope.menus = [{ 'name': 'Home ', 'link': '#/home'}, {'name': 'services', 'link': '#/services'} ]
$scope.$on('$routeChangeSuccess', function(event, current) {
alert('route changed');
});
}
);
myapp.config(
function($stateProvider, $urlRouterProvider, $routeProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
//template: '<h1>Home Screen</h1>'
templateUrl: "/Client/Views/Home/Home.htm"
})
.state('services', {
url: "/services",
//template: '<h1>Service screen</h1>'
templateUrl: "/Client/Views/Home/service.htm"
});
});
a very simple html as below also fails
<body ng-controller="home.RootController">
<ul class="nav">
<li ng-repeat="menu in menus" "="">
{{menu.name}}
</li>
</ul>
<div ui-view> No data yet!</div>
</body>
but when i click on the link i see that the views are getting updated but the $routeChangeSucces event is never triggered.
is there something i am missing?
Another question I had was is there an event that I can hook on to to know the view is ready so I can start some additional processing, like document.ready().
plnlr but not fully working...
Regards
Kiran
Please, check this wiki: State Change Events. An extract:
$stateChangeSuccess - fired once the state transition is complete.
$scope.$on('$stateChangeSuccess',
function(event, toState, toParams, fromState, fromParams){ ... })
So instead of the $routeChangeSuccess use the $stateChangeSuccess.
To get more detailed information about all available events, check the wiki Events. Here you can find that the suitable for you, could be event $viewContentLoaded...
stateChange events are now deprecated and removed, use transitions instead.
$transitions.onSuccess({}, function () {
console.log("state changed");
});