We Keep Coding

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

Unable to fetch value from angular app.factory

I am trying to share variable among the controller so I am using angular's Factory. I have following code for the same:
var app = angular.module('chartApp', ['ngRoute']);
app.factory('UserVerified', function() {
return {bool: false};
});
app.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl: 'pages/home.html',
controller: 'PredictionController'
})
});
app.controller('PredictionController', ['$scope', '$http', '$interval', function($scope, $http, $interval){
$scope.hasPermission = UserVerified;
}]);
and on HTML i am just using hasPermission.bool to set visibility of a <div>.
But the issue is angularjs is unable to identify UserVerified defined in "app.factory".
I am getting following error:
ReferenceError: UserVerified is not defined
I referred following : Share data between AngularJS controllers
Only difference I can find is, I am using dependencies which is not used in the example in the above link.

you need to inject your custom service in your controller
app.controller('PredictionController', ['$scope', '$http', '$interval','UserVerified',function($scope,$http,$interval,UserVerified) {
$scope. hasPermission = UserVerified.bool; //true
}]);
inorder to avoid breaking of your application after minification of code you can also use $inject in angularjs to inject dependecies.
app.controller("PredictionController",PredictionController);
PredictionController.$inject = [$scope','$http','$interval','UserVerified']//dependencies
function PredictionController($scope,http,interval,UserVerified){
$scope. hasPermission = UserVerified.bool; //true
}
Note: Services names will be renamed after the minification and can indulge in breaking your application

You need to do this,
app.controller('PredictionController', ['$scope', '$http', '$interval', 'UserVerified', function($scope, $http, $interval, UserVerified){
$scope.hasPermission = UserVerified.bool;
}]);
You need to pass the service as a parameter to controller

You need to inject UserVerified into your controller.
app.controller('PredictionController', ['$scope', '$http', '$interval', 'UserVerified', function($scope, $http, $interval, UserVerified){
$scope.hasPermission = UserVerifiedvalue.;
}]);
Plus, in UserVerified you are returning a key which is a reserved word. It will work but will create unnecessary confusion.
app.factory('UserVerified', function() {
return {value: false};
});
Here is a plunker as a demo.

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

.ns() undefined in google angular maps directive

I am trying to use the angular google maps directive with my app, but I keep getting an "undefined error"
This is my app.js
angular.module('app', ['cs'])
.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) {
GoogleMapApi.configure({
// key: 'your api key',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//routes
}])
and my controller
angular.module('cs.Controllers')
.controller('MapController', ['$rootScope', '$scope', '$window', '$document', 'MenuService', 'GoogleMapApi'.ns(),
function($rootScope, $scope, $window, $document, menuService, GoogleMapApi) {
$rootScope.menuList = menuService.all();
}]);
What could be the problem

For others that got here that had added the missing dependency declaration, see: angular-google-maps , undefined is not a function
It looks like they've gotten rid of the ns() function, but haven't updated the documentation yet:
https://github.com/angular-ui/angular-google-maps/pull/872/
https://github.com/angular-ui/angular-google-maps/issues/821
Update all instances of 'string'.ns() to 'uiGmapstring' in your code and you should be good.

You're missing the dependency declaration in your app.
angular.module('app', ['google-maps'.ns(),'cs.Controllers']
Here's a plunker using one of the project's demo pages. I changed it to use the new provider.
http://plnkr.co/edit/eUbkv2qKu92T9iUp7yAF?p=preview