Maven and Angular - minify routes - angularjs

I have a project in Maven with angularJS routes; login.routes.js appears like this:
(function() {
"use strict";
angular
.module("app")
.config(['$stateProvider', loginConfig]);
function loginConfig($stateProvider) {
$stateProvider
.state("login", {
url: "/login",
templateUrl: "app/login/login.html",
controller: "LoginController",
controllerAs: "vm",
})
.state("logged", {
[...]
resolve: {
checkLogged: function($log, $timeout, $state, $cookies, $rootScope) {
$timeout(function() {
if ($cookies.get('user')) {
[...]
} else {
[...]
$state.go('login');
}
}, 0)
}
}
})
.state("logout", {
[...]
resolve: {
checkLogged: function($log, $timeout, $state, $cookies, $rootScope, $location) {
[...]
}
}
})
}
})();
I'm minifing all the angularJS files; actually, everything works minified but the routes.
Is there a way to make the code minifiable? I minified with success controllers using
angular
.module("app")
.controller("Controller", Controller);
Controller.$inject = ['$log',...];
Is there something like that, but for routes?

One way to do it is in the below example:
checkLogged: ['$log', '$timeout', '$state', '$cookies', '$rootScope',
function($log, $timeout, $state, $cookies, $rootScope) {
//code
}
] //<-- array
Wrap your function in an array and inject each AngularJs provider as a string. This should solve your minification issues.
Also this is an AngularJs question not Angular. You may want to update your tag.
Hope that helps.

Related

Why does not wotk routeProvider in Angular JS?

I use routeProvider in Angular JS:
.when('/chat/dialog/:id', {
controller: 'ChatController'
});
In controller I have:
if($routeParams.id) {
alert('ok');
}
And my URL looks like as:
http://site-dev.com/chat/dialog/1
Link is:
Why does not work routing in Angular JS?
Controller:
.controller('ChatController', ['$scope', '$sce', '$http', '$location', '$anchorScroll', '$timeout', '$routeParams', function ($scope, $sce, $http, $location, $anchorScroll, $timeout, $routeParams, ) {
if($routeParams.id) {
alert('ok');
}
}])
Routing:
.config(function ($locationProvider, $routeProvider) {
$routeProvider
.when('/profile/personal/:type', {
templateUrl: '/public/html/personal.html',
controller: 'EditProfileController'
})
/* Chat */
.when('/chat/dialog/:id', {
controller: 'ChatController'
});
})
Try to add into head tag <base href="/">, like this:
<head>
<base href="/">
</head>

In angular js, how do I show angular-loading bar with ui-router and ocLazyLoad

Problem : I am not able to load the angular-loading-bar using lazy load and ui.route.
Am I missing something ?
This is how my config.lazlyload.js file looks like :
// lazyload config
angular.module('app')
// oclazyload config
.config(['$ocLazyLoadProvider',
function($ocLazyLoadProvider) {
// We configure ocLazyLoad to use the lib script.js as the async loader
$ocLazyLoadProvider.config({
debug: false,
events: true,
modules: [{
name: 'ngGrid',
files: [
'vendor/modules/ng-grid/ng-grid.min.js',
'vendor/modules/ng-grid/ng-grid.min.css',
'vendor/modules/ng-grid/theme.css'
]
}, {
name: 'angular-loading-bar',
files: [
'vendor/modules/angular-loading-bar/loading-bar.min.js',
'vendor/modules/angular-loading-bar/loading-bar.min.css'
]
}]
});
}
]);
This is my config.router.js :
'use strict';
/**
* Config for the router
*/
angular.module('app')
.run(
['$rootScope', '$state', '$stateParams',
function($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}
]
)
.config(
['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider
.otherwise('/access/signin');
$stateProvider
.state('access.test', {
url: '/test/me',
templateUrl: 'tpl/test.html',
controller: 'testController',
resolve: {
deps: ['$ocLazyLoad',
function($ocLazyLoad) {
return $ocLazyLoad.load('ui.select', 'angular-loading-bar').then(
function() {
return $ocLazyLoad.load('js/controllers/test.js');
}
);
}
]
}
})
}
]
);
My controller is :
'use strict';
/* Controllers */
app.controller('testController', ['$scope', '$http', '$state', '$stateParams',
function($scope, $http, $state, $stateParams) {
//assuming this should start the loader
$scope.start();
var path = 'js/app/largeJson.json';
var mails = $http.get(path).then(function(resp) {
return resp;
//this shall end the loader
$scope.complete()
});
}
]);
You complete function will never get called because you returned a data then you wrote $scope.complete(), you should write that $scope.complete() function before returning data.
CODE
app.controller('testController', ['$scope', '$http', '$state', '$stateParams',
function($scope, $http, $state, $stateParams) {
//assuming this should start the loader
$scope.start();
var path = 'js/app/largeJson.json';
var mails = $http.get(path).then(function(resp) {
//this shall end the loader
$scope.complete();
return resp;
});
}
]);
Update
if you wish to use the loading bar without the interceptor, you can do that as well. Simply include the loading bar service as a dependency instead of the main angular-loading-bar module:
angular.module('myApp', ['cfp.loadingBar'])
Then your controller will have the start & complete methods which will internally call cfpLoadingBar methods
Controller
app.controller('testController', ['$scope', '$http', '$state', '$stateParams', cfpLoadingBar,
function($scope, $http, $state, $stateParams, cfpLoadingBar) {
$scope.start = function() {
cfpLoadingBar.start();
};
$scope.complete = function () {
cfpLoadingBar.complete();
};
//assuming this should start the loader
$scope.start();
var path = 'js/app/largeJson.json';
var mails = $http.get(path).then(function(resp) {
//this shall end the loader
$scope.complete();
return resp;
});
}
]);
For more info take a look at Github page
Hope this could help you, Thanks.

$ionicModal.fromTemplateUrl undefined is not a function

I want to make an ionicModal form in my app but it always say's:
TypeError: undefined is not a function
at new AppController (http://127.0.0.1:58710/www/js/home/AppController.js:15:17)
at invoke (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:11591:17)
at Object.instantiate (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:11602:23)
at http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:14906:28
at http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2797:28
at nodeLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:14336:13)
at compositeLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:13730:13)
at publicLinkFn (http://127.0.0.1:58710/www/lib/ionic/js/ionic.bundle.js:13626:30)
at updateView (http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2733:23)
at http://127.0.0.1:58710/www/lib/ionic/js/angular-ui/angular-ui-router.js:2697:11 <div ui-view="">
My code is:
function AppController($scope, $log, $state, $ionicModal) {
'use strict';
$scope.days = [];
var column = [];
// Load the modal from the given template URL
console.log(JSON.stringify($ionicModal) + "lalala");
$ionicModal.fromTemplateUrl('templates/home/selectedDay.html', function ($ionicModal) {
$scope.modal = $ionicModal;
$scope.modalRightButtons = [
{
type: 'button-clear',
content: 'Close',
tap: function (e) {
$scope.modal.hide();
}
}];
}, {
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
$scope.openModal = function () {
$scope.modal.show();
};
This is exactly the same as in the example i just don't know what am I doing wrong...
my app.js is:
var App = angular.module('App', ['ionic', 'ngResource', 'ui.router']);
App.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
views: {
'Header': {
templateUrl: 'templates/home/homeHeader.html',
controller: 'homeHeaderController'
},
'': {
templateUrl: 'templates/home/calendar.html',
controller: 'AppController'
}
}
})
$urlRouterProvider
.otherwise('/home');
});
App.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
App
.controller('AppController', ['$scope', '$log', '$state', '$localstorage', AppController])
I have an other app where everything is working. I don't see what could be wrong here....
EDIT
I changed the first row of AppController and now I am getting an other error.
The new first row:
function AppController($scope, $log, $state, Api, $localstorage, $ionicSideMenuDelegate, $ionicPopup, $ionicModal) {
The new error:
"Cannot read property 'fromTemplateUrl' of undefined"
The problem is with dependency injection (DI). The syntax you are using is good if you plan to minify your code, but you have to declare the exact same dependencies in the exact same order in both places. Your AppController object has more dependencies than you declare in the angular.controller() method.
Controller function
function AppController ($scope, $log, $state, Api, $localstorage, $ionicSideMenuDelegate, $ionicPopup, $ionicModal) {
...
}
Angular Controller declaration
App.controller('AppController', ['$scope', '$log', '$state', 'Api', '$localstorage', '$ionicSideMenuDelegate', '$ionicPopup', '$ionicModal', AppController]);

Error on angular state

This is the code I have:
angular.module("App").config(function($stateProvider, $locationProvider, $injector) {
$stateProvider
.state("member", {
url: "/member",
views: {
"" : {
templateUrl: "/js/angular/partials/member/index.html",
controller: 'MemberController'
}
}
});
}).controller(
"MemberController",
["$rootScope", "$scope", "$ocLazyLoad", "$location"],
function ($rootScope, $scope, $ocLazyLoad, $location) {
log("Members controller initialized.");
}
);
I don't like to define the controller directly in the view, because that will make me create a lot of different functions, so I want define the controller once. However it says:
Error: [ng:areq] Argument 'MemberController' is not a function, got string
I've tried change the controller to the very top, in another angular.module("App").controller definition but nothing works. What am I doing wrong?
try changing the location of the closing square bracket ]
.controller(
"MemberController",
["$rootScope", "$scope", "$ocLazyLoad", "$location",
function ($rootScope, $scope, $ocLazyLoad, $location) {
log("Members controller initialized.");
}
]);

Access Angular Factory through Injection

I cannot get access to methods in my Angular Factory? I get "TypeError: Object # has no method 'method1'" error. My angular app looks like this...
myApp.js
var myApp = angular.module('myAngApp', [])
myApp.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/list',
{
controller: 'ListController',
templateUrl: 'partials/list.html'
})
.when('/reports/:reportId',
{
controller: 'DetailController',
templateUrl: 'partials/report.html'
})
})
factory.js
myApp.factory('factory1', function(){
var factory = {};
factory.method1 = function() {
console.log('method1');
}
factory.method2 = function() {
console.log('method2');
}
return factory;
});
ListController.js
function ListController($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}
ListController.$inject = ['$scope', '$location', '$http', '$route', '$rootScope', 'factory1'];
try this...
myApp.controller('ListController', [
'$scope',
'$location',
'$http',
'$route',
'$rootScope',
'factory1',
function ($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}]);
instead of your current function ListController and the $inject statement
jsfiddle http://jsfiddle.net/NuCZz/

Resources