延迟加载基于控制器命名空间约定的外部 JS/CSS 文件？

Posted 2023-05-09

【中文标题】延迟加载基于控制器命名空间约定的外部 JS/CSS 文件？

【英文标题】：Lazyload external JS/CSS files based on controller namespace convention?

【发布时间】：2012-04-19 10:46:21

【问题描述】：

angularJS 是否有任何东西可以基于 ng-controller 命名空间延迟加载外部 JS/CSS 文件？这样以下内容会将 com.myApp.SomeClass.js 和 com.myApp.SomeClass.css 附加到文档头部？

<div ng-controller="com.myApp.SomeClass"></div>

【参考方案1】：

还没有，但它正在 v1.0 之后的作品中。

您的应用程序是否大到需要它？我们有一些令人印象深刻的大型应用程序，但还没有遇到这种需求，因为控制器比在没有 Angular 的情况下编写相同的行为时要密集得多。

【参考方案2】：

使用慢脚本怎么样？在 angularjs 上懒加载真的很容易

示例： https://github.com/flrngel/slowscript-angular-require-lazyload

慢速脚本： https://github.com/flrngel/slowscript

来自网站的核心代码

app.js

app = angular.module("mainApp", ["ui.router"]).run(function($rootScope)
    $rootScope.$on('$viewContentLoaded',function()
        slowscript.execute();
    );
);

app.config(function($stateProvider, $urlRouterProvider) 
    $stateProvider.state("sexy", 
        url: "/sexy",
        views: 
            "contents": 
                templateUrl: "/views/test.html",
                controller: "Sexy",
                reloadOnSearch: true
            
        
    );
);

app.controller("Sexy", function($scope) 
    slowscript.queue(function()
        slowscript.$global.sexy($scope);
    );
);

test.html（角度视图模板）

<div ng-controller="Sexy">
    <input list="univ">
        <datalist id="univ">
            <option ng-repeat="univ in univs" value="univ.name"></option>
        </datalist>
    </input>
    <input type="submit"></input>
    <noscript src="test.js" type="text/slowscript"></noscript>
</div>

test.js

require(['angular','slowscript'],function(angular,slowscript)
    slowscript.$global.sexy=(function($scope)
        console.log("tada~");
        $scope.univs = ["idx": 1,"name": "asdf", "idx": 2,"name": "bsdf"];
        $scope.$apply();
    );
    slowscript.queue_execute();
);

【参考方案3】：

使用原生 AngularJS 1.x 是不可能的

但是，您可以使用$oclazyload 来延迟加载代码文件（js、HTML、CSS）

$ocLazyLoad 与UI-Router 等路由器完美配合。它返回一个承诺并使用resolve 属性来确保在解析视图之前加载文件。

angular.module('myApp', ['ui.router', 'oc.lazyLoad'])
     .config(function($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) 
      $stateProvider
          .state('stateA', 
              url: '/stateA',
              controller: 'StateACtrl',
              templateUrl: 'stateA.html',
              resolve: 
                  load: [ '$ocLazyLoad', function($ocLazyLoad) 
                          return $ocLazyLoad.load([
                              
                                  name: 'stateA',
                                  files: [
                                      'stateA.css',
                                      'stateA.js',
                                  ],
                              ,
                          ]);
                      ,
                  ],
              ,
          )

          .state('stateB', 
              url: '/stateB',
              controller: 'StateBCtrl',
              templateUrl: 'stateB.html',
              resolve: 
                  load: [ '$ocLazyLoad', function($ocLazyLoad) 
                          return $ocLazyLoad.load([
                              
                                  name: 'stateB',
                                  files: [
                                      'stateB.css',
                                      'stateB.js',
                                  ],
                              ,
                          ]);
                      ,
                  ],
              ,
          );
  );

我还创建了一个plunkr 来演示一个工作模型。

Documentation 了解更多可能的配置选项。

希望对你有帮助！