How to set reusable code in AngularJS and Ionic Auth? - javascript

So I am using Ionic and the Ionic Authentication with this code:
.controller('newEntryCtrl', ['$scope', '$stateParams', '$ionicAuth', '$state',
function ($scope, $stateParams, $ionicAuth, $state) {
if ($ionicAuth.isAuthenticated()) {
$state.go('login');
}
}])
That code works and I have lots of controllers. Is there a way to just inject a factory and never do if else in my controller already?

Write Authentication in run.
.run(['$rootScope', '$ionicAuth', '$state',
function ($rootScope, $ionicAuth, $state) {
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if ($ionicAuth.isAuthenticated()) {
$state.go('login');
}
});
}
]);

Related

Reusing of functions which is defined between controllers

i would like to reuse the code defined between the controllers
.controller('GenericController', ['$scope', '$controller', '$rootScope', '$dialogs', '$state', '$http', '$modal', '$q', '$timeout', 'projectFactory', 'projectPromise', 'phaseFactory', 'buFactory', 'stakeholderGroupFactory', 'ldapFactory', 'genericFactory', 'User',
function ($scope, $controller, $rootScope, $dialogs, $state, $http, $modal, $q, $timeout, projectFactory, projectPromise, phaseFactory, buFactory, stakeholderGroupFactory, ldapFactory, genericFactory, User) {
$scope.testing = function() {
console.log("Hello");
};
}]);
You can use the factory and create the object for the function to reuse it.
app.factory("sample",function(){
return function() {
console.log("Hello");
};
})
else collating multiple common functions
app.factory("commonFunctions",function(){
commonFunction1(){
console.log("common func1")
}
commonFunction2(){
console.log("common func2")
}
return {
commonFunction1: commonFunction1,
commonFunction1: commonFunction2
};
})
Used the $controller for the importing this fixed my issue

Ionic factory undefined

Newbie in Ionic and Angular.
I am trying to develop a test app and trying to use the factory function.
I did the design from Ionic Creator and trying to add my coding in to it.
Below is my controller file.
angular.module('app.controllers', [])
.controller('loadingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
.controller('mainPageCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('historyCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('firstrunCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('resultsCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('doctorCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('bookingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
.controller('appointmentCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams) {
}])
Below is my file that has the factory.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.service('BlankService', [function(){
}]
.factory('awesomeFactory', function($http) {
return {
GetUser: function() {
return $http.get("http addy return json object").then(function(response) {
//Process Stuff Here
return response;
});
},
}
})
);
I am getting 2 errors.
1. Error: awesomeFactory is undefined.
2. TypeError: (intermediate value).factory is not a function[Learn More]
I just don't know what I am doing wrong. Probably something small.
But any help is greatly appreciated.
Thank you in advance.
This is because here in this code
.controller('loadingCtrl', ['$scope', '$stateParams',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])
First you will have to do factory injection then try to create its instance
Try this
.controller('loadingCtrl', ['$scope', '$stateParams','awesomeFactory',
function ($scope, $stateParams, awesomeFactory) {
$scope.aa = awesomeFactory.GetUser();
}])

load page from controller in electron js

I'm new in electron and trying to load new page from controller on button click but it does not load page neither gives any error.
this is my controller code
(function () {
'use strict';
angular.module('app')
.controller('appCtrl', [
'$scope',
'$location',
'$window',
'$http',
'$rootScope',
function ($scope, $location, $window, $http, $rootScope) {
$scope.fun = function () {
$location.url('./admin/Logout.html');
};
}
])
}
)();
I don't what I'm doing wrong but I'm totally stuck over here. So any kind of help will be appreciated.

AngularJS accessing $stateParams in run function

I would like to be able to access the url parameters in my run function and make actions based on those params. However, I was pretty surprised to see that ui.router's $stateParams object is empty in my run function.
angular.module('app', ['ui.router'])
.run(['$rootScope', '$state', '$stateParams', '$location', function($rootScope, $state, $stateParams, $location) {
$rootScope.$state = $state;
$rootScope.location = $location;
$rootScope.$stateParams = $stateParams;
$rootScope.$on('$stateChangeStart', function(event, toState) {
if (toState.name === 'main') {
event.preventDefault();
$state.go('main.child', {
param: 1
})
}
});
console.log('$stateParams is empty!');
console.log($stateParams);
console.log($rootScope.$stateParams);
}])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('main', {
url: '',
template: '<div>hey</div><div ui-view></div>'
})
.state('main.child', {
url: '/:param',
template: 'child state template'
});
}]);
Is it possible to access the params accessed from $stateParams in the run function? Or are they only available in the config function? Why are they not accessible in the run function?
Plnkr: http://plnkr.co/edit/1YXKRmR48LyxbGXWq66Y?p=preview
Thanks for any help.
It looks like you are using StateChangeStart event and you can access parameters in this event:
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
//you code goes here
console.log(toParams);
}
I am using it to add some custom logic to parametrs (authentication redirects)

Using Angular services to hold commonly required data

I am currently writing my first application in Angular and have been very much enjoying all the framework has to offer so far. Like most newbies I set off building everything into a main controller, copying the tutorials. I am now seeing the error of my ways and refactoring.
My question is about services holding data that is commonly required among controllers.
I've now taken the data out of the 'main controller' and placed it into a service that I have injected into both controllers requiring access. Now though neither controller sees the functionality I've defined in the new service:
varianceService is not defined
Being new to this approach i welcome all and any help, aswell as help with my current problem, any comments on the best way to apply this approach would also be highly appreciated.
Thanks in advance.
Here is an example of the code:
var app = angular.module(
'VarianceAnalysis', ['ngRoute', 'ngAnimate', 'mgcrea.ngStrap', 'mgcrea.ngStrap.tooltip', 'mgcrea.ngStrap.helpers.dateParser', 'SharedServices']
)
.service('varianceService', function () {
var variances = {};
return {
redirect: function (path) {
$location.path(path);
},
getHttpVariances: function (month1, month2) {
var url = "/Home/GetVariances?month_1=";
url += month1;
url += "&month_2="
url += month2;
url += "&forwardBilling=true"
$http.get(url).success(function (data) {
variances = data;
return data;
});
return {};
},
getVariances: function () {
return variances;
}
};
})
.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/MainPage', {
templateUrl: 'mainpage.html',
controller: 'MainPageCtrl'
}).
when('/Variance/:type', {
templateUrl: 'variance.html',
controller: 'VarianceCtrl'
}).
otherwise({
redirectTo: '/MainPage'
});
}])
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', 'varianceService', function ($scope, $http, $location) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
The problems lies in the bracket notation of injecting services in your function..
What you inject in the bracket notation must also be present in the function definition..
e.g.
controller('MyCtrl', ['$scope', '$http', 'varianceService', function($scope, $http, varianceService) {
}]);
so in relation to your code above.. it should be like this..
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])
.controller('MainPageCtrl', ['$scope', '$http', '$location', 'varianceService', function ($scope, $http, $location, varianceService) {
$scope.go = function (month1, month 2) {
$scope.variances = varianceService.getHttpVariances(month1, month2);
}]);
just as how you have ordered the injected services in your bracket notation, it must also pertain the same order in your function definition.
Change this
.controller('VarianceCtrl', ['$scope', 'varianceService', function ($scope, $http, $location, $routeParams) {
$scope.variance_type = varianceService.getVariances();
}])
to
.controller('VarianceCtrl', ['$scope', '$http', '$location', '$routeParams', 'varianceService', function ($scope, $http, $location, $routeParams, varianceService) {
$scope.variance_type = varianceService.getVariances();
}])

Categories