I'm trying to add the bootstrap-ui module to my angular.js project. The documentation states that I simply have to add
angular.module('myModule', ['ui.bootstrap']);
to get this working. But I can't find out how I would add this in any way. I've read the whole chapter of https://docs.angularjs.org/guide/module and read lots of threads about it, but everything I tested didn't work so far.
my app.js:
angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
// followed by my routing
myCtrl
angular.module('MyApp')
.controller('MyCtrl', ['$scope', '$location', '$rootScope', '$routeParams', '$resource', '$alert', 'MyService',
function ($scope, $location, $rootScope, $routeParams, $resource, $alert, MyService) {
what I tried:
adding 'ui.bootstrap' after 'mgcrea.ngStrap' in app.js
adding 'ui.bootstrap' after *'MyService' in myCtrl
many more similar variations
The error messages I get depend on what I did. Since I'm probably completely on the wrong path at the moment I was hoping someone could tell me how I can add a module in angular.js correctly?
edit some error messages I encountered:
When I start my Crtl code with:
angular.module('MyApp', ['ui.bootstrap'])
I get
[ng:areq] Argument 'NavbarCtrl' is not a function, got undefined
(navbarctrl is a completely different ctrl)
when I start my app.js with
angular.module('MyApp', ['ngCookies', 'ngResource', 'ngMessages', 'ngRoute', 'mgcrea.ngStrap', 'ui.bootstrap'])
I get
TypeError: object is not a function
In my AuthService I try to use $alert (this works without bootstrap-ui) like
$alert({
title: 'Success!', //...
**edit 2: ** the problem seems to be that I can only use ngStrp OR ui.bootstrap (both use bootstrap underneath)
Are you ensuring that Angular UI specific JS Files are sent from server to client through bundling or direct reference?
You have to inject dependency of module in your app: something like this angular.module('MyApp', ['ui.bootstrap']);
Related
Ok, first I install this from bower:
bower install angular-underscore-module
Then in modules/core/clients/app/config.js, in line 7 I added the injection:
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ngMessages', 'ui.router', 'ui.bootstrap', 'ui.utils', 'angularFileUpload', 'underscore'];
To inject it in my controller, in modules/articles/client/controllers/articles.client.controller.js
I've added it like this:
angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Articles', '_',
function ($scope, $stateParams, $location, Authentication, Articles, _) {
Then, I've got this error:
angular.js:13920 Error: [$injector:undef] Provider '_' must return a value from $get factory method.
Then in this article:
Provider 'xx' must return a value from $get factory method in AngularJs
It says, I should insert { in front of return and Not at the next line, however, I couldn't find that return. Am I doing something wrong here? Please suggest. Thanks.
underscore attaches itself to window object. you don't need to include the dependency in controller. however if you still want to use '_' you could do something like this:
app = angular.module('MyApp', ['underscore']);
app.factory('_', ['$window', function($window) {
return $window._;
});
then you can include '_' as a dependency in your controllers.
Found it!
In your config/assets/default.js, the client.lib.js, you have to include both underscore.min.js and angular-underscore-module.js as code below:
[...]
'public/lib/underscore/underscore-min.js',
'public/lib/angular-underscore-module/angular-underscore-module.js',
[...]
This is a very common problem apparently when declaring multiple controllers but every fix on this forum that I tried to follow or somewhere else, didn't seem to work (probably am missing something).
I have app.js file and 3 separate controller files and a services file.
I used one of the controllers and everything worked fine. Now I am trying to redirect to another view which handled by ProfileManagement controller, but it is showing the error:
Error: [ng:areq] Argument 'ProfileManagementController' is not a
function, got undefined
This is what I have in the beginning of each controller file and also app.js...
app.js:
var app = angular.module('starter', ['ionic', 'starter.controllers', 'starter.services']);
app.run(function($ionicPlatform) {...
and in app.js, I am using this route before the error shows:
.state('tab.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/tab-home.html',
controller: 'ProfileManagementController'
}
}
})
My controllers are here...
UserAccessController:
app.controller('UserAccessController', ['$scope', '$http', '$state', '$q', '$rootScope', 'CreateUserService', 'UserObjectService', function($scope, $http, $state, $q, $rootScope, CreateUserService, UserObjectService){
and ProfileManagementController:
app.controller('ProfileManagementController', ['$scope', '$http', function($scope, $http){
}]);
Also with tabs project template of ionic framework, I got the file controller.js by default where I commented all controllers but left the first line:
angular.module('starter.controllers', []);
//.controller('ProfileController', function($scope) {})
//
//.controller('OrdersController', function($scope) {
//
//})
//
//.controller('MoreOptionsController', function($scope, $stateParams) {
//
//})
//
//.controller('ConnectionsController', function($scope) {
//
//});
What am I doing wrong here that leads to the error message? (the view actually associated with the route tabs.home actually loads but the console shows the error.
Thanks,
You probably forgot to add the script tag to define your controller within the html.
for example:
<script src="yourController.js"></script>
I have a problem with Angular and injecting $cookies into a controller.
The $cookies is working fine in a service, but with this controller I'm getting an issue.
var app = angular.module('app', [
"ui.router",
"ngCookies",
'ui.bootstrap']);
angular
.module("app")
.controller("ListController", ListController);
ListController.$inject = ['$scope', 'DataService', '$state', "AuthenticationService", "$cookies"];
function ListController($scope, DataService, $state, AuthenticationService, $cookies) {
....
}
The $cookies object is coming through as undefined. The angular-cookies.js is included on the page, and is working inside the included AuthenticationService.
I found my problem:
Someone had cut and pasted the original controller code into a new controller, but neglected to rename the controller on the line:
ListController.$inject =[...];
So, when I came along and added the $cookies parameter, my version was being overridden.
Try this way
var app = angular.module('app', [
"ui.router",
"ngCookies",
'ui.bootstrap']);
angular
.module("app")
.controller("ListController",['$scope', 'DataService', '$state', "AuthenticationService", "$cookies", function ($scope, DataService, $state, AuthenticationService, $cookies) {
....
}]);
Did you include the file angular-cookies[.min].js ?
Also, as a good practice, don't use the same module for the app and the controllers. Have a
angular.module('app', [ 'app.controllers']);
angular.module('app.controllers', [
\\ define each controller here
]);
defined so that you can have clean separation of them.
Are $scope, DateService, $state available in your controller? I usually put this line of code after the declaration of controller
angular
.module("app")
.controller("ListController", ListController);
// <...loading all JS in one file by the Mincer library...>
angular
.module('firstapp', ['ngRoute', 'ngMaterial', 'ngMdIcons'])
.factory('MessagesService', ['$scope', '$filter', '$mdToast', '$animate', MessagesService])
.controller('MenuController', ['$scope', '$filter', '$location', 'MessagesService', MenuController]);
MessagesService is a function;
MenuController is a function;
I received a error: MessagesService is not exists.
If i remove MessagesService dependency from MenuController - it works good.
But i need create Message controller, what will add some toast about application, and dont know, how.
You could never inject $scope dependency inside angular factory
It should be without $scope dependency
.factory('MessagesService', ['$filter', '$mdToast', '$animate', MessagesService])
I'm fed up with running unit tests with my AngularJS application using Karma an Jasmine. I'm not using requireJS, but custom solution with dynamic loading controllers based on loading widgets segments. Is there any ways to perform a mock or injection of $controllerProvider in some pre-loaded test-helper.js?
My typically controller looks like:
'use strict';
Polygons.app.controllerProvider.register('MyController',
['$scope', '$rootScope', '$location', 'MyService'
function ($scope, $rootScope, $location, MyService) {
...
}
]
);
Polygons.app is concept wich is described in app.js:
Polygons.app = angular.module('app', ['ngRoute', 'ngSanitize', 'ngCookies'])
.config(['$routeProvider', '$httpProvider', '$compileProvider', '$routeSegmentProvider', '$locationProvider', '$controllerProvider', 'router', '$provide',
function ($routeProvider, $httpProvider, $compileProvider, $routeSegmentProvider, $locationProvider, $controllerProvider, router, $provide) {
Polygons.app.controllerProvider = $controllerProvider;
Polygons.app.compileProvider = $compileProvider;
...
Because module.config() doesn't execute during tests there is no way to obtain controllerProvider property of Polygons.app - I'm getting an error 'Cannot read property 'register' of undefined'.
So is there any ways to solve that problem?
Please, any help or conjecture, I'm totally lost.
Thanks a lot.