2

这是我的 requirejs 配置文件。我在基于角度的项目中使用 require js。如果我可以加载 css,requirejs我也可以组织我的 css 文件!我是新requirejs概念。任何帮助表示赞赏

require.config({
    paths:{
        'angular'       : "agular",
        'app'           : 'app',
        'coreModel'     : 'coreModel',
        'test'          : 'controller/test'
    },
    shim: {
        'app' : {
            deps :['angular','coreModel',]
        },

        'coreModel' : {
            deps : ['angular','test']
        },
        'test' : {
            deps : ['angular',]
        }
    },
});

require(['app',],function(){
    angular.bootstrap(document,['app']);
});

这是我的主控制器

define(function(){

    var coreModel = angular.module('coreModel',['test']);

    coreModel.controller('mainController',function($scope){
        $scope.test = "Hello World";
    });
});

如何使用 requirejs 加载 css?

4

2 回答 2

4

我宁愿建议你使用 ocLazyLoad 来做一些不同的事情。

在这里参考我的回答

按照上面链接的初始步骤进行配置

我建议您在控制器文件中使用这种方式,如下所示

(function () {
    angular.module('myApp').controller("homeCtrl", function ($ocLazyLoad,$scope) {

          //this line loads your styles and apply it 
          $ocLazyLoad.load('style.css');

});
})();

现场演示

注意:在demo中点击menu->点击home

于 2017-03-01T18:43:03.013 回答
1

取自requirejs 文档

由于知道文件何时加载是不可靠的,因此在 RequireJS 加载中显式支持 CSS 文件是没有意义的,因为它会由于浏览器行为而导致错误报告。如果您不关心文件何时加载,您可以通过执行以下操作轻松编写自己的函数来按需加载 CSS:

function loadCss(url) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

但是你可以使用requirecss让它工作起来很简单requirejs

  • 安装require-cssbower install require-css
  • 配置您的应用程序

    map: {
      '*': {
        'css': 'require-css/css' // or whatever the path to require-css is
      }
    }
    
  • 像在 requirejs 中那样为 requirecss 添加文件

    define(['css!styles/main'], function() {
       //code that requires the stylesheet: styles/main.css
    });
    
于 2017-03-01T13:36:35.443 回答