Question

angularJS是否有任何基于ng-controller名称空间延迟外部JS / CSS文件的内容？以便以下内容将com.myApp.SomeClass.js和com.myApp.SomeClass.css附加到文档头部？

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

Answer 1

尚未，但它在v1.0之后正在进行中。

你的应用程序是否太大而你需要它？我们有一些令人印象深刻的大型应用程序，并没有遇到这种需求，因为控制器比没有角度时写入相同的行为更密集。

Answer 2

如何使用slowscript？在angularjs

上很容易延迟加载

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

Slowscript： 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();
});

Answer 3

股票AngularJS 1.x无法实现

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

$ocLazyLoad与UI-Router之类的路由器完美配合。它返回一个Promise，并使用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进一步了解可能的配置选项。

希望有帮助！

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

3 个答案:

网站核心代码

app.js

test.html（角度视图模板）

test.js