I'm using ui-router for Angular routing - and the states and the $stateProvider are all working without a hitch.
However, the $urlRouterProvider is causing an error - specifically:
Failed to instantiate module MyApp due to:
TypeError: Cannot read property 'otherwise' of undefined
Here is my config:
angular.module('MyApp', ['ngResource', 'mgcrea.ngStrap', 'stripe', 'ui.router', 'ui.bootstrap', 'ui.bootstrap.datepicker', 'ui.bootstrap.datetimepicker', 'ngAnimate'])
.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
//This console log is undefined
console.log($urlRouterProvider);
// catch all route
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
$stateProvider
// route to show our basic form (/form)
.state('form', {
url: '/',
templateUrl: 'views/home.html',
controller: 'formController'
})
// nested states
// each of these sections will have their own view
// url will be nested (/form/profile)
.state('form.date', {
url: 'date',
templateUrl: 'views/form-date.html'
})
// url will be /form/interests
.state('form.address', {
url: 'address',
templateUrl: 'views/form-interests.html'
})
// url will be /form/payment
.state('form.payment', {
url: 'payment',
templateUrl: 'views/form-payment.html'
});
}]);
What am i missing?
This is wrong
.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider)
It shoud be:
.config(['$locationProvider', '$stateProvider', 'stripeProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider)
Problem is Here
.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
Solution 1
.config(['$locationProvider', '$stateProvider', ', stripeProvider' '$urlRouterProvider', function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
// do stuff here
}]);
Solution 2
.config(function($locationProvider, $stateProvider, stripeProvider, $urlRouterProvider){
// do stuff here
}]);
Happy Helping!
Related
I've a file of index.html that has
<ui-view></ui-view>
in the body and below is my route.js :
var app = angular.module('dashboard', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider
.state("home", {
url: "/",
template:"<h1>home</h1>"
})
.state("dashboard", {
url: "/dashboard",
templateUrl: "templates/dashboard.html",
controller: "controllers/dashboardCtrl"
})
}]);
but I get error of Cannot GET /dashboard I wonder why. I did have a folder called templates and has a dashboard.html in it.
Here i have created an external module "lang-change" in which i created one service and one directive.
bower_components/lang-change/lang-change.js
angular.module('langChange', [
'angular-translate'
])
.service('MyService', function ($translate, $rootScope, tmhDynamicLocale) {
.............
.............
.............
})
.directive('LanguageChangeSelect', function (MyService) {
'use strict';
return {
.............
.............
.............
};
});
I created this module seperately and link this to bower_components, but when I am using this in my app.js, I am getting error.
error
angular.js:12783 Error: [$injector:unpr] Unknown provider: langChangeProvider <- langChange
app.js
(function() {
'use strict';
angular.module('myApp', [
'ngSanitize',
'ui.router',
'ui.bootstrap',
'pascalprecht.translate',// angular-translate
'tmh.dynamicLocale'// angular-dynamic-locale
])
.config([
'$stateProvider',
'$urlRouterProvider',
'$injector',
'$translateProvider',
'tmhDynamicLocaleProvider',
function(
$stateProvider,
$urlRouterProvider,
$injector,
$translateProvider,
tmhDynamicLocaleProvider
) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'views/home.html'
})
.state('myapp', {
url: '/myapp',
templateUrl: 'views/myapp.html',
controller: ['$scope', '$state', '$rootScope', '$translate', 'langChange',
function($scope, $state, $rootScope, $translate, langChange) {
// Code goes here
}]
});
}
]);
I have define the config of my module:
angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/models', {
templateUrl: 'views/models.html',
controller: 'ModelsCtrl',
controllerAs: 'models'
})
.when('/contacts', {
templateUrl: 'views/contacts.html',
controller: 'ContactsCtrl',
controllerAs: 'contacts'
})
.when('/constructor', {
templateUrl: 'views/constructor.html',
controller: 'ConstructorCtrl',
controllerAs: 'constructor'
})
.otherwise({
redirectTo: '/constructor'
});
});
Is it possible to get information about current user state without using angular-ui-router ?
You can inject the $location service and make use of its path() function.
Here is a link to the docs for location $location
angular.module('app')
.run(['$rootScope','$location',
function($rootScope, $location) {
$rootScope.$on('$routeChangeSuccess', function(e, current) {
console.log('Current route name: ' + $location.path());
}
}]);
I am using angular to provide the link for my page.
I have something like
//main app configuration
app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(['$routeProvider', function($routeProvider) {
}]);
//test page configuration
test-controller.js
angular.module('myApp', []).
config(function ($routeProvider) {
$routeProvider.
when('/test/:link', {
templateUrl: 'test/:link.html',
constroller: 'Ctrl'
}).
when('/test2/:link', {
templateUrl: 'test2/:link.html',
constroller: 'Ctrl'
})
}).
controller('Ctrl', ['$scope', function ($scope) {
//scope data
}])
for some reason, the $routeprovide in my test-controller.js doesn't work and output module injection error.
Can anyone help me about it? Thanks a lot!
At first glance, it is because you didn't add 'ngRoute' as dependency in the second definition
I have a $routeProvider in my Angular JS application which won't load the template in the ng-view.
I've set up <html data-ng-app="myApp"> and <section data-ng-view></section.
It does neither load the template (doesn't even make an XHR), nor does it redirect on other paths (like /#/foo/bar/foo/ and it doesn't throw an error.
This is my configuration:
angular.module('myApp', ['myAppFilters'])
.config [
'$routeProvider',
($routeProvider) ->
$routeProvider
.when '/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.when '/:user/:year/:month',
templateUrl: 'partials/detail.html'
controller: DetailCntl
.otherwise
redirectTo: '/'
]
Edit: Here's the compiled JS:
angular.module('myApp', ['myAppFilters']).config([
'$routeProvider', function($routeProvider) {
return $routeProvider.when('/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).when('/:user/:year/:month', {
templateUrl: 'partials/detail.html',
controller: DetailCntl
}).otherwise({
redirectTo: '/'
});
}
]);
Edit #2: I found the solution by myself:
I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
I found the solution by myself: I had this line in my factories.coffee which overwrote the config:
angular.module('myApp', []).factory 'api', ($http, $q, $cacheFactory) ->
...
Now I have the config assigned to #myApp and am using #myApp.factory 'api', ... and it's working.
Thanks for your support.