MEAN.js Injecting Module throws Unknown provider - javascript

I am building an app with MEAN.js and I am trying to add https://github.com/oitozero/ngSweetAlert
The first thing I did was to edit the config/env/all.js file to include the javascript files for SweetAlert
I then edited the public/dist/application.js file to add the "oitozero.ngSweetAlert" module as follows:
var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ngTouch', 'ngSanitize', 'ui.router', 'ui.bootstrap', 'ui.utils', 'oitozero.ngSweetAlert'];
Now in my controller I try to add the module, and once I do this I get the Unknown Provider error:
angular.module('stock').controller('myController', ['$rootScope', '$scope', '$stateParams', '$location', '$http', '$modal', 'Authentication', 'Stock', 'Users', 'SweetAlert',
function($rootScope, $scope, $stateParams, $location, $http, $modal, Authentication, Stock, Users, SweetAlert) {
I would really appreciate any suggestions as to what I am doing wrong. TIA!

Related

using uibModal in angularJS v1.48 applcation

I am trying to use uibModal (from angular-ui-bootstrap v0.12.1) in an angularJS application (v.148). I am aware of the current angular versions. When I am trying to use the modal using example code below, I am seeing the error:
TypeError: $uibModal.open is not a function
I have added the following to the application:
angular.module('someApp', ['ui.bootstrap']);
In the controller file, I am using the following:
angular.module('someAppController')
.controller('someController', ['$scope', '$http', $'location', '$modal', 'someService',
function($scope, $http, $locaton, $uibModal, someService) {
On an event:
$uibModal.open({
templateUrl: 'some.html',
windowClass: 'modal-danger'
});
I have tried replacing $uibModal to $modal (both in the module call and where I am trying to create the modal). However, I get the same error complaining about $uibModal.open or $modal.open is not a fucntion. Any thoughts on what I am doing wrong? I cannot find any issues with the versions or other dependencies causing issues.
You have some typos in your code and are not properly injecting the $uibModal provider
change
.controller('someController', ['$scope', '$http', $'location', '$modal', 'someService'
to
.controller('someController', ['$scope', '$http', '$location', '$uibModal', 'someService'
also change
templateUrk: 'some.html',
to
templateUrl: 'some.html',

Angularjs toaster not showing up

I am using this library for angularjs toaster:
https://github.com/jirikavi/AngularJS-Toaster
and added the following references:
<link rel="stylesheet" href="bower_components/AngularJS-Toaster/toaster.min.css" type="text/css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular-animate.min.js"></script>
<script src="/bower_components/AngularJS-Toaster/toaster.min.js"></script>
I also added angular-animate as it seems using it, and added dependency injection on app module as:
.module('venture', [
'oc.lazyLoad',
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
'satellizer',
'angularPayments',
'angularFileUpload',
'ngBootbox',
'ui.tinymce',
'ngSanitize',
'pikaday',
'ngAnimate',
'toaster',
])
My controller parametes looks as:
.controller("ClassController", ['$scope', '$location', '$rootScope', '$timeout', '$state', 'ClassService', 'ERROR_MSG', 'SUCCESS_MSG', 'FileUploader', 'REST_END_POINT', '$stateParams', 'UserService', 'toaster',
function ($scope, $location, $rootScope, $timeout, $state, ClassService, ERROR_MSG, SUCCESS_MSG, FileUploader, REST_END_POINT, $stateParams, UserService, toaster) {
and somewhere on the code I am using:
toaster.pop('success', "title", "text");
I know it comes here the execution but the toaster never shows up, nor the error comes...
Just so you know I am using angualarjs 1.2.16
I donw know what I am missing out here?
You didn't mention that you added
<toaster-container></toaster-container>
to index.html
Maybe that's it?
From the documentation of the toaster plugin your using:
AngularJS-Toaster requires AngularJS v1.2.6 or higher and specifically
targets AngularJS, not Angular 2, although it could be used via
ngUpgrade.

routeParams are Empty

I am trying to get URL parameters using $routeParams:
var myApp = angular.module('myApp', [
'ngRoute',
'appControllers',
'appFilters',
'appServices'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/admin/organisations/:organisation_id', {
controller: 'UpdateOrganisationCtrl'
});
}]);
and in my Controller:
appControllers.controller('UpdateOrganisationCtrl', ['$rootScope', '$scope', '$http', '$window', '$routeParams',
function($rootScope, $scope, $http, $window, $routeParams) {
console.log($routeParams.organisation_id);
}]);
However I am printing undefined as $routeParams is {} Any thoughts?
The url you tried to access should be
localhost:3000/#/admin/organisations/56cde4bf911747ea200d5a63
ngRoute will make your application a Single Page Application, where the relevant part of the url for the router will be after # (beautifully called the hashbang).
Look at the example:
// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}
However, the url you give could work if you use HTML5Mode for $location service of angular.
See those links for more information:
AngularJS routing without the hash '#'
Using $location

Angular ng-view with sticky headers not working

I'm trying to use the sticky headers directive from: http://ngmodules.org/modules/sticky-headers
but it doesn't seem to work with the combination of using ng-view.
When using the fsm directive as required, I'm getting an empty view:
angular.module('dashboard', ['fsm']).controller('installerController',
[ '$scope', '$filter','$http','$log', '$location','$compile',
'$routeParams',
function($scope, $filter, $http, $log, $location, $compile, $routeParams)
When not including the fsm directive, everything works fine:
angular.module('dashboard').controller('installerController',
[ '$scope', '$filter','$http','$log', '$location','$compile',
'$routeParams',
function($scope, $filter, $http, $log, $location, $compile, $routeParams)
Your help is much appreciated.
Thanks.
The difference between the method angular.module(string) and angular.module(string, array[]) is that the first one loads a specific module and the second one creates a new angular module
Make sure that you only create your module once

Firebase .constant Not Working Correctly

I've got a constant set up in my app.js file, and I've injected it into my controller (main.js), but it doesn't seem to want to work:
app.js
angular.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
])
.constant('FBURL', 'https://outcomes.firebaseio.com/')
...
main.js
var app = angular.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
]);
app.controller('MainCtrl', function ($scope, $filter, $timeout, $firebase, FBURL) {
...
}
Now I do question why I've got two modules set up. Is there a way around this? I'd like to keep my module, config and constant in my (app.js) file. How can I inject that .constant('FBURL') from my (app.js) file to my (main.js) file?
Any help is appreciated. Thanks in advance
Of course, there are different ways of doing this but I tend to structure my Angularjs app like so:
In the app.js file
angular
.module('fireApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'firebase'
])
.constant('FBURL', 'https://outcomes.firebaseio.com/')
and in the /controllers/main.js I have:
angular.module('fireApp')
.controller('myController', ['$scope','FBURL', function($scope,FBURL) {
}])
This should solve your problem. Note that I have't injected all the same things as you so you will need to add these.

Categories