Question

这是我的requirejs配置文件。我在基于角度的项目中使用了必需的js。如果我可以使用requirejs加载css，我也可以组织我的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？

Answer 1

我宁愿使用ocLazyLoad建议您使用不同的东西。

参考我的回答 here

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

我建议您在Controller文件中使用这种方式，如下所示

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

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

});
})();

<强> LIVE DEMO

注意：在演示中点击菜单 - ＆gt;点击主页

Answer 2

取自requirejs documentation：

由于知道文件何时加载不可靠，因此不会有意义的是明确支持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一样简单：

使用bower install require-css

配置您的应用程序

map: {
  '*': {
    'css': 'require-css/css' // or whatever the path to require-css is
  }
}

为requirecss添加文件，就像在requirejs

中一样

define(['css!styles/main'], function() {
   //code that requires the stylesheet: styles/main.css
});

如何使用requirejs加载css？

2 个答案: