Discussions
rerun contents of lazylaoded file
Hi,
I have breakpoints in my lazyload file. It only gets hit on first load of the page. However, i have the lazyload directive set to run when certain buttons are clicked and its not happening. I need the contents to reload as the DOM has changed. Lazyload looks like this:
(function () {
'use strict';
angular.module('lazyloadCtrl', ['filesService'])
.controller('lazyloadCtrl', ['Files', '$ocLazyLoad', '$scope', '$rootScope', '$compile',
function (Files, $ocLazyLoad, $scope, $rootScope,$compile) {
$rootScope.$emit('initLazyLoad');
$rootScope.$on('initLazyLoad',function(event,args){
$ocLazyLoad.load(
[{
name: 'Callout_Email',
files: ['/scripts/services/lazyload.js'],
rerun: true
}
])
.then(function success(args) {
$ocLazyLoad.load(
[{
name: 'Callout_PeoplePicker',
files: ['/scripts/services/sp.email.js']
}
])
.then(function success(args){
var temp = document.getElementsByClassName('scEmailLink');
angular.forEach(temp, function(value,key){
value.onclick = function(e){
angular.element('#peoplepickerElm' + key).toggle();
//console.log("Hooked into element: peoplepickerElm" + key);
};
}, this);
console.log("Callout_PeoplePicker success: " + args);
},
function error(err){
console.log("Callout_PeoplePicker fail: " + err);
});
return args;
},
function error(err) {
console.log("Callout_Email fail: " + err);
console.log(err);
return err;
});
});
}]);
}());
The contents of the files are not angular. They are SharePoint. And because the DOM has changed, i need them reloaded/reran, but when i run $rootScope.$emit('initLazyLoad'); from another part of my application, these files are not getting reloaded.
Any suggestions?
Thanks
Posted by Andy over 5 years ago
Loading a file with chunkhash with webpack (dynamic name)
How can I implement of loading a file that has a changing chunkhash in it's name?Using webpack 3 and the new ui router.
For example loading a user_management.84bd6a8d34d479d388a8.js.
Posted by Slava Roikhel over 5 years ago
Need to load templatecache JS file before hitting the routes so they load from templateCache
So I am using ng-templates to create a $templateCache so that I can server my html partials from the templateCache instead of making XHR requests for them. It will also allow us to browser cache the HTML partials.
Basically, ng-templates create a module for me like the one below;
angular.module('AngTemplates', []).run(['$templateCache', function($templateCache) {
'use strict';
$templateCache.put('/App/Anon/Test/LoginPartial.html',
"<div class=\"hero hero--xl fadeIn\"><div class=\"hero__inner\"></div>"
);
}
In my apps main module within its config block I am using the following to lazyload my templates module above
$ocLazyLoadProvider.config({
//debug: true,
modules: [{
events: true,
name: 'AngTemplates',
files: ['App/ang.templates.js']
}]
});
Now my issue is that within my $routeProvider, I am trying to do a resolve to load the module, so that that when the code hits my routes because my templateUrl's match those in the templateCache within my module it should load them from the templateCache as opposed to making an XHR request.
I can see the ang.templates.js file being loaded, however it seems like its either not being picked up or its too late in the process.
Is what I am trying to do possible with oclazyload?
Many thanks
Posted by Brian McG over 5 years ago
Dependecy Injection from module directory
Is there a way I can use DI paths from the directory that the module is in instead of having to specify the path from the root of the domain?
Posted by Lukus Reindl almost 6 years ago
Empty Dependency module with dinamic loaded services and factories
HI.
I have some application that is module based and I have sahred module that includes the functionality not only for one module.
So it is very big module and I don't want to give it's all functionality to client I want to lazy load it's functionality
But after bootstraping main app The other modules I think remember shared module as empty and don't see it's services.
Can some one help me? Am I doing something wrong??
Posted by Artur Gevorgyan almost 6 years ago
How to load a controller on demand ?
Posted by Ramesh almost 6 years ago
access to downloaded code as a text
I have an idea to make i18n of JavaScript code on the fly. So I'd like to get source code of a file then to make substitution of words (phrases) and only after that to "make eval" of that code. Is it possible?
Posted by Alexander Levakov almost 6 years ago
oclazyload + angularjs + ngroute + asp.net mvc
I´m developing an application in asp.net mvc with angularjs and I need to lazy load some of my controllers, directives, services and so on. I´ve searched deeply on web and I found this js library to work with.
so let see how my code are:
1 - LayoutPage (ASP.NET MVC)
<html>
<head> </head>
<body ng-app="myAppUAI">
/*all my imports scripts are at the bottom of the page*/
<script type="text/javascript" src="..."></script>
</body>
</html>
2 - app.js
var MyApp = angular.module("myAppUAI", ["ngProgress", "ngMaterial", "ngRoute", "oc.lazyLoad"]);
MyApp.config(["$routeProvider", "$ocLazyLoadProvider"
, function ($routeProvider, $ocLazyLoadProvider) {
$routeProvider
.when("/", {
templateUrl: "/Main/Index",
controller: "progressCircularController",
resolve: {
home: function ($ocLazyLoad) {
return $ocLazyLoad.load(["/Scripts/AngularJS/Controllers/progressCircularController.js"]);
}
}
})
.otherwise({
redirectTo: "/"
});
$ocLazyLoadProvider.config({
debug: true,
events: true
});
}]);
3 - progressCircularController.js
angular.module("myAppUAI").controller("progressCircularController", ["$rootScope", "$scope", function ($rootScope, $scope) {
$scope.key = "Marcelo Bertinatto D´ Onofrio";
}]);
4 - in my view
<div ng-controller="progressCircularController">
{{key}}
</div>
And finally, I´m getting a error in console like this:
http://errors.angularjs.org/1.6.2/$controller/ctrlreg?p0=progressCircularController
ocLazyLoad.fileLoaded scripts/AngularJS/Controllers/progressCircularController.js
angular.js:14362 ocLazyLoad.componentLoaded ["myAppUAI", "register", "progressCircularController"]
angular.js:14362 ocLazyLoad.moduleReloaded myAppUAI
I've exhausted all my possibilities. Can you tell me what I´m doing wrong?
Thanks in advance.
Posted by marcelo bertinatto almost 6 years ago
All partials in app.js loading initially
All partials in app.js loading initially time of page loading
Posted by Akash Edakkalathur almost 6 years ago
Wait loading 1st file for loadgin second file with a router ?
Hello,
I want load file whan i call my state
like this
[code]
.state('myState', {
url: "/myUrl",
templateUrl: "views/myView.html",
controller: "myController",
resolve: {
deps: ['$ocLazyLoad', function($ocLazyLoad) {
return $ocLazyLoad.load({
name: 'myRoute',
insertBefore: '#ng_load_plugins_before',
files: [
'provider/provider1.js',
'provider/provider2.js',
'provider/provider3.js',
'controler/mycontroller.js'
]
// here todo Callback files for loader the second controller
}
//, Or here ? todo Callback files for loader the second controller
);
}]
}
})
[/code]
Posted by W-prog almost 6 years ago