i', using angular ui routing with ocLazyLoad to load the appendices files according to the choosen stat as the following code shows
my problem is:
when i load a new state and click refresh sometime the factories is not initialized -i think it's because the files is not fully loaded before init the controller-
i also tried to merge all files in the same ocLazyLoad function and use serie : true but dosenot work
is it the right use of ocLazyLoad
i've the following modules
angular.module('app', [ "oc.lazyLoad"]);
angular.module("app.inventory", []);
angular.module("app.sales", []);
and here is the routing
.state("invoicesAddEdit", {
url: "/invoice/:invoiceId",
templateUrl: "app/components/sales/invoice/views/invoiceAddEdit.view.html",
controller: "InvoiceAddEditController",
resolve: {
invoiceId: ['$stateParams', function ($stateParams) {
return $stateParams.invoiceId;
}],
settings: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.settings",
files: [
"app/components/settings/settings.module.js",
"app/components/settings/currency/services/currency.factory.js",
"app/components/settings/deliveryMan/services/deliveryMan.factory.js",
]
})
}],
inventory: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.inventory",
files: [
"app/components/inventory/inventory.module.js",
"app/components/inventory/customer/services/customer.factory.js",
"app/components/inventory/store/services/store.factory.js",
"app/components/inventory/product/services/product.factory.js",
]
})
}],
purchasing: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.purchasing",
files: [
"app/components/purchasing/purchasing.module.js",
"app/components/purchasing/purchaseOrder/services/purchaseOrder.factory.js",
]
})
}],
sales: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.sales",
files: [
"app/components/sales/sales.module.js",
"app/components/sales/representative/services/representative.factory.js",
"app/components/sales/invoice/services/invoice.factory.js",
"app/components/sales/invoice/controllers/invoiceAddEdit.controller.js",
]
})
}],
}
})
Try to inject the oCLazy Load as deps and insert the required files before specific tag in the html like the following :
resolve: {
invoiceId: ['$stateParams', function ($stateParams) {
return $stateParams.invoiceId;
}],
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load({
name: "app.settings",
insertBefore: '#ng_load_plugins_before',
files: [
"app/components/settings/settings.module.js",
"app/components/settings/currency/services/currency.factory.js",
"app/components/settings/deliveryMan/services/deliveryMan.factory.js",
]
})
}],
Add the following link to the header of the html page or the View:
<link id="ng_load_plugins_before"/>
Related
Can someone help me with this routing? It always gives the following error:
Uncaught Error: [$injector:modulerr]
The code in question:
var app = angular.module('mainApp', ['ui.router', 'oc.lazyLoad','ngRoute', 'commonApp', 'adminApp', 'ui.bootstrap', 'gm', 'ngMessages', 'daterangepicker','customDirectives', 'mw-datepicker-range','uiGmapgoogle-maps','ngAutocomplete','ngImageCompress']);
app.config(['$ocLazyLoadProvider', '$stateProvider', '$urlRouterProvider','uiGmapGoogleMapApiProvider' , function($ocLazyLoadProvider, $stateProvider, $urlRouterProvider,uiGmapGoogleMapApiProvider) {
$urlRouterProvider.otherwise("/home");
//Config For ocLazyLoading
$ocLazyLoadProvider.config({
'debug': true, // For debugging 'true/false'
'events': true, // For Event 'true/false'
'modules': [{ // Set modules initially
name : 'home', // State1 module
files: ['home/home.controller.js',
'home/home.service.js',
'home/homeMapper.service.js',
]
},{
name : 'about', // State2 module
files: ['about/about.controller.js']
}]
});
//Config/states of UI Router
$stateProvider
.state('home', {
url: "/home",
views : {
"" : {
templateUrl:"/home/home.html"
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('home'); // Resolve promise and load before view
}]
}
})
.state('about', {
url: "/about",
views : {
"" : {
templateUrl:"/about/about.html"
}
},
resolve: {
loadMyCtrl: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load('about'); // Resolve promise and load before view
}]
}
});
}]);
Here is my route config file
$stateProvider.state('process', {
url: '/process',
params: {
title: 'Process Name'
},
views: {
'processDemo': {
component: 'process'
}
},
resolve: {
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('demo');
return $translate.refresh();
}]
}
});
Here is my demo.json file
{
"name": "Process"
}
I want to use demo.json name in my config file. Anybody can help for this?
I have a problem with my code... i'm trying to do a table by json from a API.
But the table does not work, if you put static values on html, it works. But by json no.
.state('nimbus.produtos', {
url: "/Produto",
templateUrl: "/ProdutoContext/Produto/Index",
controller: function ($scope, $http) {
$http.get('//localhost:61115/api/produtoapi')
.success(function (data) {
$scope.Produtos = data;
console.log("carregou API");
})
.error(function (data) {
console.log("Erro ao acessar URL de produtos");
});
},
resolve: {
loadPlugin: function ($ocLazyLoad) {
return $ocLazyLoad.load([
console.log("OCLazy carregou"),
{
serie: true,
files: ['/Scripts/plugins/dataTables/datatables.min.js', '/Content/css/plugins/dataTables/datatables.min.css']
},
{
serie: true,
name: 'datatables',
files: ['/Scripts/plugins/dataTables/angular-datatables.min.js']
},
{
serie: true,
name: 'datatables.buttons',
files: ['/Scripts/plugins/dataTables/angular-datatables.buttons.min.js']
},
]);
}
}
})
I think the datatable has to load after JSON File, but it loads before JSON file.
how can i solve this?
Thanks a lot!
I want to summarize all module configurations within a block and it doesn't work and I don't get any error message.
The following works:
angular.module('myApp', [
'ngRoute',
'oc.lazyLoad',
'myApp.login',
]).
config(
[
'$routeProvider', function($routeProvider) {
$routeProvider
.otherwise({redirectTo: '/login'});
}
]
);
angular.module('myApp').config(
function($ocLazyLoadProvider) {
$ocLazyLoadProvider.config(
{
modules: [{
name: 'icons_and_fonts',
files: [
'components/font-awesome/css/font-awesome.min.css',
'components/weather-icons/css/weather-icons.min.css'
]
}],
debug: true,
events: true
});
}
);
But if I want to integrate $ocLazyProvider into the configuration block above, it doesn't work, the following code does not work:
config(
[
'$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/login'});
}
],
[
'$ocLazyLoadProvider', function($ocLazyLoadProvider) {
$ocLazyLoadProvider.config(
{
modules: [{
name: 'icons_and_fonts',
files: [
'components/font-awesome/css/font-awesome.min.css',
'components/weather-icons/css/weather-icons.min.css'
]
}],
debug: true,
events: true
}
)
}
]
);
What could be the problem?
You should pass a single array/function into the config block, instead of multiple. you can perform both configurations in a single function, that would look something like:
config(['$routeProvider','$ocLazyLoadProvider',function($routeProvider,$ocLazyLoadProvider) {
$routeProvider.otherwise({redirectTo: '/login'});
$ocLazyLoadProvider.config(
{
modules: [{
name: 'icons_and_fonts',
files: [
'components/font-awesome/css/font-awesome.min.css',
'components/weather-icons/css/weather-icons.min.css'
]
}],
debug: true,
events: true
}
)
}
]
);
I've been working on some boilerplate stuff and ran into something peculiar.
I have a module and it works fine:
define([
'angular',
'angular-couch-potato',
'angular-sanitize',
'angular-ui-router',
], function (ng, couchPotato) {
"use strict";
var module = ng.module('app.home', [
'ngSanitize',
'ui.router'
]);
module.config(function ($stateProvider, $couchPotatoProvider) {
$stateProvider
.state('app.home', {
url: '/',
views: {
"content#app": {
controller: 'HomeCtrl',
templateUrl: 'app/components/home/views/home.html',
resolve: {
deps: $couchPotatoProvider.resolveDependencies([
'components/home/controllers/HomeController'
])
}
}
},
data:{
title: 'Home'
}
});
});
couchPotato.configureApp(module);
module.run(function($couchPotato){
module.lazy = $couchPotato;
});
return module;
});
Now if I remove angular-sanitize from define like so:
define([
'angular',
'angular-couch-potato',
'angular-ui-router',
], function (ng, couchPotato) {
"use strict";
var module = ng.module('app.home', [
'ui.router'
]);
module.config(function ($stateProvider, $couchPotatoProvider) {
$stateProvider
.state('app.home', {
url: '/',
views: {
"content#app": {
controller: 'HomeCtrl',
templateUrl: 'app/components/home/views/home.html',
resolve: {
deps: $couchPotatoProvider.resolveDependencies([
'components/home/controllers/HomeController'
])
}
}
},
data:{
title: 'Home'
}
});
});
couchPotato.configureApp(module);
module.run(function($couchPotato){
module.lazy = $couchPotato;
});
return module;
});
It no longer works. Chrome throws this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=app&p1=Error%3A%20…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A170)
My controller is empty with it's only dependency $scope and the view file just has hello world around p tags.
Can someone please explain to me what I am missing or why this is happening?