I have a problem to use $rootScope.$on in AngularJS, I try to call alert, but unsuccess, nothing error in console, I generate this project use yeoman generator, I don't know why, this is my script, please correct my script.
'use strict';
angular
.module('siapApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.router',
'ui.bootstrap'
])
.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', '$qProvider',
function ($stateProvider, $locationProvider, $urlRouterProvider, $qProvider) {
$stateProvider
.state('main', {
url: '/',
views: {
'content#': {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
}
}
})
.state('about', {
url: '/about',
views: {
'content#': {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
}
}
})
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise('/');
$qProvider.errorOnUnhandledRejections(false);
}])
.run(['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
alert('success'); /*cannot call alert*/
});
}
]);
Please anyone help me.
Thanks.
This should work in any case. The only thing I can suspect is you don't have ui-view directive on your index.html page.
<ui-view></ui-view>
Related
I have a angular application in wamp in a subfolder.
When i go to http://myapp.dev/angular/myapp i'm getting the 404 view instead of the home view.
What did i miss here?
thanks,
runConfig.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider', '$provide'];
function runConfig($stateProvider, $urlRouterProvider, $locationProvider, $provide) {
$stateProvider
.state('home', {
url: '/',
controller: 'HomeController',
controllerAs: 'vm',
templateUrl: 'components/home/homeView.html'
})
.state('404', {
templateUrl: 'tpl/404.html'
});
$urlRouterProvider.otherwise(function ($injector, $location) {
var $state = $injector.get('$state');
$state.go('404');
return $location.path();
});
$locationProvider.html5Mode(true);
app.js:
'use strict';
/**
* #ngdoc overview
* #name App
* #description
* # App
*
* Main module of the application.
*/
angular
.module('App', [
'ngAnimate',
'ngCookies',
'ngRoute',
'ngResource',
'ngSanitize',
'ngTouch',
'ngMaterial',
"ui.router"
])
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
}
]
);
index.html:
<body ng-app="App">
<header></header>
<div ui-view="">
</div>
<footer></footer>
</body>
There are no errors in the console. I have tried ngRouter and that seems to work but uiRouter is just not working and I am not able to see why.
I have tried using already.
It should be App instead of webocityReviewApp
<body ng-app="App">
EDIT
Try with a state "/"
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/");
$stateProvider
.state('root', {
url: '/',
templateUrl: "home.html",
controller: 'HomeCtrl'
})
.state('root.master1', {
url: '/master1',
templateUrl: "master1.html",
controller: 'master1Ctrl'
})
.state('root.master2', {
url: '/master2',
templateUrl: "master2.html",
controller: 'master2Ctrl'
})
})
DEMO
friends, can anybody help.
Angular 1.4.9 make links like this http://domain/#!/product,
but I need links like this http://domain/#!product with out slash.
Code:
var app = angular.module('myApp', [
'ngRoute'
])
.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider, ngMeta) {
'use strict';
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', {
controller: 'HomeCtrl',
templateUrl: 'views/home.html',
})
.when('/article/:slug', {
controller: 'ArticleCtrl',
templateUrl: 'views/article.html'
})
.when('/catalog/:category/:subcategory', {
controller: 'CatalogCtrl',
templateUrl: 'views/catalog.html'
})
.when('/product/:category/:subcategory/:product', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.when('/product/:category/:subcategory/:product/:texture', {
controller: 'ProductPageCtrl',
templateUrl: 'views/product.html',
reloadOnSearch: false
})
.otherwise({
redirectTo: '/'
});
}
]);
I don't think this is a valid URL - http://domain/#!product
It should be http://domain/#!/product or http://domain/product,
To transform your URLs in desired way, it gives you some heads up -
https://docs.angularjs.org/guide/$location
How can I share the scope with angular ui router ? I tried this :
angular.module('myApp').controller('detailCtrl', ['$scope',
function($scope) {
$scope.test=$scope.$parent.services;
angular
.module('myApp', ['ngAnimate', 'ngCookies', 'ngResource'
, 'ui.router', 'ngSanitize', 'ngTouch'])
.config ($stateProvider) ->
$stateProvider.state('home',
url: "/"
templateUrl: "home.html"
).state('services',
url: "/services"
templateUrl: "services.html"
).state('services.detail',
url: "/detail/"
templateUrl: "detail.html"
)
in servicesCtrl :
$scope.services = getServices.query();
I have a very simple AngularJs app.
Here my app.js file:
angular.module('myApp', [
'ngRoute',
'ngResource',
'ui.bootstrap',
'ui.router',
'myApp.controllers'
]).
config(['$stateProvider', function($stateProvider) {
$stateProvider.
state('home', {
url: "/{Id:[0-9]}",
templateUrl: 'html/home.html',
controller: 'HomeCtrl'
});
}]);
And my controllers.js file:
angular.module('myApp.controllers', []).
controller('HomeCtrl', ['$stateParams', function($stateParams) {
console.log($stateParams.Id);
}]);
The return of the console.log($stateParams.Id) is undefined. While I'm expecting "1" (my Id).
Otherwise if I ask for console.log($stateParams) it returns a function (?!?):
function l(a){function c(a){var b=r({},a,{data:Dc(a.data,a.headers,d.transformResponse)});return 200<=a.status&&
300>a.status?b:m.reject(b)}var d={method:"get",transformRequest:e.transformRequest,transformResponse:e.transformResponse},f=function(a){function b(a){var c;q(a,function(b,d){Q(b)&&(c=b(),null!=c?a[d]=c:delete a[d])})}var c=e.headers,d=r({},a.headers),f,g,c=r({},c.common,c[A(a.method)]);b(c);b(d);a:for(f in c){a=A(f);for(g in d)if(A(g)===a)continue a;d[f]=c[f]}return d}(a);r(d,a);d.headers=f;d.method=Ia(d.method);(a=Mb(d.url)?b.cookies()[d.xsrfCookieName||e.xsrfCookieName]:s)&&(f[d.xsrfHeaderName||
e.xsrfHeaderName]=a);var h=[function(a){f=a.headers;var b=Dc(a.data,Cc(f),a.transformRequest);w(a.data)&&q(f,function(a,b){"content-type"===A(b)&&delete f[b]});w(a.withCredentials)&&!w(e.withCredentials)&&(a.withCredentials=e.withCredentials);return u(a,b,f).then(c,c)},s],k=m.when(d);for(q(x,function(a){(a.request||a.requestError)&&h.unshift(a.request,a.requestError);(a.response||a.responseError)&&h.push(a.response,a.responseError)});h.length;){a=h.shift();var l=h.shift(),k=k.then(a,l)}k.success=
function(a){k.then(function(b){a(b.data,b.status,b.headers,d)});return k};k.error=function(a){k.then(null,function(b){a(b.data,b.status,b.headers,d)});return k};return k}
While I'm expecting {Id: "1"}.
What am I doing wrong???
Just to try I changed my state in the following way:
$stateProvider.
state('home', {
url: "/{Id:[0-9]}",
templateUrl: 'html/home.html',
controller: function($stateParams){
console.log($stateParams);
}
});
}]);
And it works! It returns {Id: "1"} but unfortunately this is not an option for me since what I described here is a small portion of a much bigger and complicated App (so I'd like to have app.js and controllers.js files).
Any suggestion?