I can't really get my head around why this markup doesn't recognize my $stateProvider?
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due
to: Error: [$injector:unpr] Unknown provider: $stateProvider
Simple module:
(function () {
'use strict';
// get modules we need for the app
angular.module('app', ['ngRoute'])
.config(config);
config.$inject = ['$stateProvider']
function config($stateProvider) {
console.log('works'); // actually doesn't
};
})();
I've tried various other styles
eg loading them straight in the config
.config(['$stateProvider'], function ($stateProvider) {
// not working this way either.
});
You are using ngRoute in that way you have to use the $routeProvider. The $stateProvider is based on ui-router. Please check this runnable fiddle and switch to $routeProver or use ui-router in combination with $stateProvier.
ngRoute configuration
This is a runnable fiddle of ngRoute implementation.
/* App Module */
angular.module('demoApp', ['ngRoute'])
.config(['$routeProvider', function( $routeProvider) {
// Define routes
$routeProvider.when('/homepage', {
templateUrl: 'partial/homepage.html',
controller: HomePageCtrl
}).when('/users', {
templateUrl: 'partial/users.html',
controller: UsersListCtrl
}).when('/contacts',{
templateUrl: 'partial/contacts.html',
controller: ContactPageCtrl
}).otherwise({
redirectTo: 'homepage'
});
}
]);
ui-router configuration
This is a runnable fiddle of ui-route implementation.
var myApp = angular.module("myApp",["ui.router"])
.config(function ($stateProvider, $urlRouterProvider){
$stateProvider.state("state1", {
url: "#",
template: "<p>State 1</p>",
controller: "Ctrl1"
}).state("state2", {
url: "#",
template: "<p>State 2</p>",
controller: "Ctrl2"
});
});
Related
I'm working on a POC for work and I can't find whatever stupid mistake is hiding here. I have a bare-bones/basic angular app, using ui-router. Plunker can be found here.
In the chrome console I can see my app.module is being created, however the login page never appears. This is a very, very basic app so I figure it must be something simple I'm missing. Any suggestions? Below is a quick sample:
config.js
(function() {
'use strict'
var app = angular.module('app.core');
app.config(AppRouter);
AppRouter.$inject = ['$stateProvider', '$urlRouterProvider'];
function AppRouter($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('login');
$stateProvider
.state('/', {
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
})
.state('login', {
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
});
}
})();
login.controller.js
(function() {
'use strict';
var app = angular.module('app.login');
app.controller('LoginController', LoginController);
LoginController.$inject = ['$location', '$filter', '$window', '$rootScope'];
function LoginController($location, $filter, $window, $rootScope) {
var init = function() {
console.log('here');
};
init();
}
})();
app.module.js
(function() {
var app = angular.module('app', ['app.core', 'app.login']);
})();
login.module.js
(function(){
'use strict'
var app = angular.module('app.login', ['app.core']);
})();
core.module.js
(function(){
'use strict'
var app = angular.module('app.core', ['ui.router']);
})();
After few changes it worked for me (see forked plunk: https://plnkr.co/edit/D5AL8DTnqYI2g23wjE7W?p=preview):
You forgot to load AngularJS (between <head></head).
You forgot to add ng-app, I add it on body.
And I made some changes in config.js:
function AppRouter($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('/', {
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController',
controllerAs: 'vm',
});
}
I add url to login state, and I made changes to otherwise function: I changed login to /login cause it needs URL, not state name.
I think you overconfigured you app a little bit (too much modules), and it makes it hard to read for me, but it's only my opinion and to be frankly, maybe it's only because I don't use modules very frequently. Try to add this changes to your Plunk and please write if it won't work, casue I could accidentally skip something.
I'm trying to inject ui.bootstrap into my module, called 'app'. I already included the ui-bootstrap javascript file into my html, but I get below error no matter what I do:
Uncaught Error: [$injector:modulerr]
If I remove any dependencies to ui.bootstrap, the error goes away.
Order of js imports in head tag, all of which load up fine. (checked in Chrome dev tools)
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Scripts/angular-animate.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.2.5.min.js"></script>
Current AngularJS version is 1.5.2
app.js
(function () {
'use strict';
var app = angular.module('app', [
// Angular modules
'ngRoute',
'ngAnimate',
'ui.bootstrap',
// Custom modules
// 3rd Party Modules
'ui.router'
]);
app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$modal', function ($locationProvider, $stateProvider, $urlRouterProvider, $modal) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
controller: 'frontpageController',
templateUrl: 'app/views/frontpage.html',
data: {
authorize: false
}
})
.state('login', {
url: '/login',
controller: 'loginController',
templateUrl: 'app/views/login.html',
data: {
authorize: false
}
})
.state('profile', {
url: '/profile/:userId',
controller: 'profileController',
templateUrl: 'app/views/profile.html',
data: {
authorize: true
}
})
.state('error', {
url: '/error',
controller: 'errorController',
templateUrl: 'app/views/404.html',
data: {
authorize: false
}
})
}]);
app.run(function ($rootScope, loginService) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
var authorize = toState.data.authorize;
if (authorize && typeof $rootScope.currentUser === 'undefined') {
event.preventDefault();
// get me a login modal!
loginService()
}
});
});
})();
You cannot inject services in module config, it only allow providers.
$modal is renamed as $uibModal in last ui-bootstrap too (to rename in your controllers).
So remove '$modal' from your .config inject it only when you use it.
Are you sure ui bootstrap has only one JS file ? Check all folders of ui bootstrap and add if you are missing any other JS files.
You have to add tpls and library for ui bootstrap. For example:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.js"></script>
and
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap.js"></script>
It may be the version of your angular. it says on the site requires AngularJS 1.4.x or higher.
I have a problem with adding a Angular controller to my HTML view. The angular way of doing this is: ng-controller="<controller>". But because I am using RequireJs I have to do this in a different way. I have to add a sub page to every controller and view:
define(['app', 'login/LoginController'], function (app, LoginController) {
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: "modules/" + 'login/login.html',
controller: LoginController
});
});
app.controller('LoginController', LoginController);
});
This way I can define my where my controller is and where my view is.
Problem
Now I have a header.html in which I want to include a menu.html. this can be done via: ng-include="'modules/menu/menu.html'". This works fine. But how can I add a controller to this menu.html?
I have tried: ng-controller="MenuController" but then I get the error: 'Error: [ng:areq] Argument 'MenuController' is not a function, got undefined'. So I do not know how I should add a controller to my menu.html with RequireJS.
MenuController
my MenuController looks as follows:
define(['$'], function ($) {
'use strict';
var MenuController = function ($location, menu, $scope) {
$scope.info="testing123";
};
return MenuController;
});
Anyone knows how I should do this?
You can for example use multiple views in the same controllerwith $stateProvider:
app.config(function ($stateProvider, $locationProvider) {
$stateProvider
.state('login', {
url: '/',
views: {
'menu': {
templateUrl: 'modules/menu/menu.html',
controller: MenuController
},
'login': {
templateUrl: 'modules/login/login.html'
controller: LoginController
}
}
});
});
Then in your template to call them you just need to do something like:
<div ui-view="menu"></div>
<div ui-view="login"></div>
You can see more info on github ui-router.
I'm trying to create so-called 'SEO-friendly' URLs in AngularJS.
In my script.js for the routing I have:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.html5Mode(true);
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
}]);
app.controller("BlogController", function($scope) {
$scope.title = 'Blog';
});
app.controller("IdeasController", function($scope) {
$scope.title = 'Ideas';
});
To remove the # from the URL, I am enabling the html5 mode with:
$routeProvider.html5Mode(true);
however, this results in the following error:
Failed to instantiate module exampleApp due to:
TypeError: $routeProvider.html5Mode is not a function
Does anyone have a solution for this issue? It means that the content will not display from the views because of it.
Edit: for anyone wondering, the working code is:
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/blog', {
templateUrl: 'blog.html',
controller: 'BlogController'
}).
when('/page/ideas', {
templateUrl: 'ideas.html',
controller: 'IdeasController'
}).
otherwise({
templateUrl: 'home.html'
});
$locationProvider.html5Mode(true);
}]);
html5mode method is available there on $locationProvider provider.
You should include $locationProvider in your config phase to make that dependency available in config block & then enable html5mode for # free URL.
Code
app.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
//$routerProvider code here
$locationProvider.html5Mode(true);
}]);
Additionally you have to add <base href="/"> tag on the index.html page
I am trying to load or open my first view using ui-view.I am not getting error but not able to show ciew here is my plunker
http://plnkr.co/edit/kXJV11B0Bi8XV2nwMXLt
(function() {
'use strict';
app.config(Routes);
Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
function Routes($stateProvider, $urlRouterProvider) {
// Default
$urlRouterProvider.otherwise('/');
// Application
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: 'partial/firstpage.html'
});
}
})();
You need to include ui.router dependency:
var app = angular.module('firstApp', ['ui.router']);
Plnkr you can load view in ui-router like this
angular.module('firstApp',['ui.router']);
angular.module('firstApp').config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url:'/app',
templateUrl: 'first.html',
})
$urlRouterProvider.otherwise('app')
});