标签: oclazyload

我正在寻找一个从服务器动态加载我的应用程序内容的解决方案.

我的场景:

让我们说我们有2个用户(A和B),我的应用程序包含不同的模块,比如说一个shoppingList和一个计算器,现在我的目标是用户从数据库登录我的应用程序我获得用户权限并取决于什么权利他有,我会从服务器加载视图的html和逻辑部分的控制器文件,同时这样做我将创建html和ctrl所需的状态.因此,基本上我的应用程序与Login的一致性非常小,其他所有内容都取决于Userrights从服务器中提取.

我用的是什么:

1. 科尔多瓦
2. AngularJs
3. 离子框架

为什么我需要它全部动态:

1)拥有一个仅包含登录逻辑的应用程序的可能性,因此在修复错误或添加模块时,我只需要将文件添加到服务器,即可为用户提供权利,而无需更新应用程序.

2)用户只有他需要的功能,当他只有1个模块的权利时,他不需要拥有一切.

3)应用程序的增长在此刻非常大的,这意味着每个模块有一个像5-10状态,用自己的HTML和控制器.目前有50个不同的模块计划,所以你可以做数学.

我看了这个以获得一些灵感:

AngularJS,ocLazyLoad和加载动态状态

到目前为止我尝试了什么:

我创建了1个包含整个模块的Html文件,因此我只有1个http请求:

让我们说这是用户登录后来自服务器的响应

HTML部分:

var rights= [A,B,C,D]

angular.forEach(rights, function (value, key) {
     $http.get('http://myServer.com/templates/' + value + '.html').then(function (response) {
        //HTML file for the whole module
        splits = response.data.split('#');
        //Array off HTMl strings
        for (var l = 1; l <= splits.length; l++) {  
          //Putting all Html strings into templateCache                              
          $templateCache.put('templates/' + value +'.html', splits[l - 1]);

          }
        }
     });

控制器部分:

var rights= [A,B,C,D]

angular.forEach(rights, function (value, key) { …

现在在我的index.html页面中,我有两个CDN文件的链接,一个是JS,另一个是CSS文件.

即在我身体的底部

https://somedomain.com/files/js/js.min.js

并在头部

https://somedomain.com/files/css/css.min.css

但是现在我们的主页上不需要它们,只是在一条特定的路线上.所以我正在研究如何在路由被攻击时延迟加载这些CDN资源,即/profile只有这样？

这些不是通过bower或npm安装的,而是通过CDN url加载的,例如jquery.如何在Angular 1和Webpack中根据路由延迟加载？

从快速入门sb-admin-angular,我正在尝试运行测试,但是我得到了错误unable to init ocLazyLoad.(这是一台Windows7机器.)

我用来运行测试的命令是:

$ grunt test --force

我从这个帖子中了解到,我必须确保添加了ocLazyLoad脚本的路径karma.conf.js.

files: [
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  ...
  'bower_components/oclazyload/dist/ocLazyLoad.min.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],

我也尝试使用Bower重新安装ocLacyLoad,如前面提到的线程所示.我得到了版本选择并选择了第一个选项:

Unable to find a suitable version for oclazyload, please choose one:
    1) oclazyload#~0.5.2 which resolved to 0.5.2 and is required by sb-admin
    2) oclazyload#^1.0.9 which resolved to 1.0.9

我在这里失踪或腐败的那一步,拜托？

webpack的第一个参数有什么用途require.ensure第一个参数？

https://webpack.github.io/docs/code-splitting.html

require.ensure(dependencies, callback)

我尝试让第一个参数填充或清空,如:

require.ensure(['./module'], function() {  //filled first param

require.ensure([], function() {  //empty first param
  let module = require('./module');
  $ocLazyLoad.load([{
    name: module.default,
  }]);
});

两者都有效.那么第一个参数的用途是什么？

require.include文档中还有一个函数,我不理解这个函数的用例.任何人都可以解释一下吗？

我使用角度1.6作为我的项目和angular-ui-routing用于路由PugJs用于HTML模板.我试图在我的应用程序中实现Lazyload,但不知何故它不起作用可能是由于玉.代码:

var app = angular.module('myApp',['ui.router','oc.lazyLoad']);
app.config(['$ocLazyLoadProvider', function($ocLazyLoadProvider
 {
   $ocLazyLoadProvider.config({
   debug: true,
   modules: [{
   name: 'js',
   files: ['js/*']
 }]
});
}]);

.state("exampleState", {
        url: '/example',
        templateUrl: '/example',
        controller:'exampleCtrl',

        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    files: ['/js/exampleCtrl.js']
                })
            }]
        }
    })

控制器:

app.controller('exampleCtrl',function($scope){
  console.log('controller loaded');
});

在前端我使用节点将这些玉转换为HTML,因此当路由服务访问'templateUrl'时,它将被重定向到此代码:

app.get('/example', function(req, res) {
    res.render('/example');
});

这会在视图中加载example.jade.我在控制台得到这个

[$ controller:ctrlreg]未注册名为"exampleCtrl"的控制器.

即使在DOM中加载控制器文件并且视图也没有渲染之后.欢迎任何有关问题的帮助.谢谢

我正在使用ocLazyLoad库来实现项目中所有依赖项的延迟加载.我知道默认情况下文件并行加载并按顺序加载我应该使用serie:true https://github.com/ocombe/ocLazyLoad/issues/47

从这个线程我明白我可以串行加载模块:

是的,文件是并行加载的,如果你想同时使用多个模块并且它们需要彼此,你需要在不同的对象参数中定义它们:

$ocLazyLoad.load([{
    name: 'TestModule',
    files: ['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']
},{
    name: 'AnotherModule',
    files: ['anotherModule.js']
}]);

现在我尝试在我的应用程序中加载FullCalendar所需的所有依赖项,这是我的ocLazyLoad配置文件:

$ocLazyLoadProvider.config({
         debug: true,
         modules: [{
                name: 'ngCkeditor',
                files: [
                            'resources/bower_components/ng-ckeditor/libs/ckeditor/ckeditor.js',
                            'resources/bower_components/ng-ckeditor/ng-ckeditor.min.js',
                            'resources/bower_components/ng-ckeditor/ng-ckeditor.css'
                        ],
                serie: true
         },{
                name: 'ui.calendar',
                files: [
                        'resources/bower_components/fullcalendar/dist/fullcalendar.min.js',
                        'resources/bower_components/fullcalendar/dist/lang/he.js',
                        'resources/bower_components/fullcalendar/dist/gcal.js',
                        'resources/bower_components/angular-ui-calendar/src/calendar.js',
                        'resources/bower_components/fullcalendar/dist/fullcalendar.min.css'
                        ],
                serie: true
         },{
                name: 'ngFileUpload',
                files: [
                            'resources/bower_components/ng-file-upload/ng-file-upload.min.js'
                        ]
         },{
                name: 'momentjs',
                files: [
                            'resources/bower_components/moment/min/moment.min.js'
                        ]
         }]
    });

这是我的路由器的一部分:

.state('schedule',{
            url: '/schedule',
            controller:     'ScheduleController',
            templateUrl:    'schedule.html',
            resolve: {
                  loginRequired: loginRequired,
                  loadMyCtrl: …

目前，我在发布新版本的 SPA 时遇到了麻烦，因为 html 模板已被浏览器缓存。

我的 SPA 使用 Angular 1.5、ocLazyload 和 ui-router。我已经将 gulp 任务配置为使用缓存清除技术（使用gulp-rev），并且它运行得很好，至少对于脚本和 css 文件来说是这样。然而，当我们对 html 文件进行更改时，浏览器会继续加载旧版本。有时即使使用Ctrl+F5刷新页面也无法解决问题，并且一直显示旧版本的html。

此外，将浏览器配置为不缓存 html 文件是不可取的（特别是对于移动设备），因为 html 更改可能不会经常发生。

有没有什么好的解决方案可以解决这个问题，仅当有新版本时才获取 html 文件？

提前致谢！

在HTML中我在app.js之前加载oclazyload -

<!-- inject:js -->
        <script src="/packages/libs/jquery/dist/jquery.js"></script>
        <script src="/packages/libs/angular/angular.js"></script>
        <script src="/packages/libs/oclazyload/dist/ocLazyLoad.js"></script>
        <script src="/packages/libs/angular-ui-router/release/angular-ui-router.js"></script>
        <!-- endinject -->

        <script src="app/app.js" ></script>
        <script src="app/common/app.config.js" charset="utf-8"></script>

我的app.js -

(function () {
    angular.module('app', ['ui.router', 'oc.lazyload']);

    angular.element(document).ready(function () {
        angular.bootstrap(document, ["app"]);
    });
})();

但由于某种原因,它根本不加载oc.lazyload模块.可能是什么问题？我错过了什么吗？

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module oc.lazyload due to:
Error: [$injector:nomod] Module 'oc.lazyload' is not available! You either misspelled the module name or forgot to load it. If registering a …