We Keep Coding

Unknown provider: $stateProvider

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"
});
});

UI router - Set up outside login page

I am trying to modify the blur-admin project adding a login page with its own controller.
So I created a controller folder inside the pages folder called demoadmin.login.
The login is working well, but now, I want to show it outside the dashboard, I mean as standalone page.
Currently it is showing the following:
But I want to show it outside:
This is my app.js file:
'use strict';
angular.module('bluradmin', [
'ngAnimate',
'ui.bootstrap',
'ui.sortable',
'ui.router',
'ngTouch',
'toastr',
'ui.slimscroll',
'angular-progress-button-styles',
'ngStorage',
//'smart-table',
//"xeditable",
//'ngJsTree',
'bluradmin.theme',
'bluradmin.pages',
'bluradmin.login'
]).run(function ($localStorage) {
console.log($localStorage);
});
And my pages.module.js was modified:
(function () {
'use strict';
angular.module('bluradmin.pages', [
'ui.router',
'bluradmin.pages.dashboard'
])
.config(routeConfig);
/** #ngInject */
function routeConfig($urlRouterProvider, baSidebarServiceProvider) {
$urlRouterProvider.otherwise('/login');
}
})();
How can I set up the ui-router to obtain this behaviour?

At your index.html:
<div ui-view>
</div>
At your app.html
<div class="row main" ui-view>
</div>
Then your config:
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
})
.state('app', {
url: '/app',
templateUrl: 'templates/app.html'
})
.state('someOtherState', {
parent: 'app',
url: '/someUrl',
templateUrl: 'templates/someTemplate.html'
})
$urlRouterProvider.otherwise('/login');

Define an abstract view/state for the App, and define another one separated view with the login. Something like this:
$stateProvider
.state('app', {
url: '/',
abstract: true,
templateUrl: 'menu.html'
})
.state('app.home', {
url: 'home',
views: {
'page-view': {
templateUrl: 'home.html',
}
}
})
.state('login', {
url: '/login',
templateUrl: 'login.html',
}
})
Inside the menu.html yo should have something like this:
<div ui-view="page-view"></div>

Using ui-router - is there a way to provide a path to controller file ?

I am making a very basic angular app using ui-router, and I have 3 "modules" right now, which are home, login, and register. Here is how I have defined them:
'use strict';
var app = angular.module('exampleApp', [
'ui.router',
'ngAnimate',
'ui.bootstrap'
]);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templateUrl: './main/home/home.html',
controller: './main/home/home-controller.js'
})
.state('login', {
url: '/login',
templateUrl: './main/login/login.html',
controller: './main/login/login-controller.js'
})
.state('register', {
url: '/register',
templateUrl: './main/register/register.html',
controller: './main/register/register-controller.js'
})
})
However, I think I am doing the controller: portion wrong. I want to define each controller for each "module", and I'm not sure how to go about doing that.
Here's my file structure -

First define your controller.
angular.module('exampleApp').controller('loginCtrl', function () {
// ctrl task goes here.
});
Mapping controller to a route.
$stateProvider.state('login', {
url: '/login',
templateUrl: 'path/to/login.html',
controller: 'loginCtrl'
})

AngularJS and RequireJS add controller to view

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.

add class if its home page in angularJS

If its index then add else remove class in body tag
app.js
angular.module('app', [
'ui.router',
'ngAnimate'
])
.config(
[ '$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/');
$stateProvider
.state("app", {
url: "",
templateUrl: 'tmpl/app.html'
})
.state('app.about', {
url: '/about',
templateUrl: 'tmpl/aboutus.html'
})
.state('app.result', {
url: '/result',
templateUrl: 'tmpl/search_result.html'
})
}
]
);
index.html
<body class="home" ng-class="" >
Add class if its Home page abc.com/ else remove the added class, ex: abc.com/#/about
Thanks in advance
Kanagan

There are many options could create a controller for the body to handle this or do this with a directive or service. The easiest option would be to use $rootScope.
angular.module('app', [
'ui.router',
'ngAnimate'
])
.run(['$rootScope',function($rootScope){
$rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
//console.log(toState);
$rootScope.home = (toState.name == 'app');
});
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/');
$stateProvider
.state("app", {
url: "",
templateUrl: 'tmpl/app.html'
})
.state('app.about', {
url: '/about',
templateUrl: 'tmpl/aboutus.html'
})
.state('app.result', {
url: '/result',
templateUrl: 'tmpl/search_result.html'
})
}]);
then in the html...
<body class="home" ng-class="{'my-home-class':$root.home}">
I didn't test this. If it doesn't work do a console.log on toState and see what the value is on different pages and adjust the code as needed.
UPDATE
I created a plunker with a functional example. I'm not sure what is in your app.html, but the way you have this set up I'd advise adding another state for app.home which I created in my example.