Question

我正在编写一个AngularJS应用程序而且我正在尝试实现某些功能，但由于我对Angular很新，我希望得到一些AngularJS专家的意见。

我正在AngularJS中创建一个控件套件，它由两部分组成，一个加载屏幕和一个显示屏幕，两者都是用HTML定义的。

我需要操作的数据存储在JSon文件中。为了给你一个想法，这是第一个JSon文件：

{
  "Styles": [
    { "name": "Blue", "stylesheet": "/Resources/Stylesheets/Styles/Blue/OfficeUI.Style.Blue.min.css" },
    { "name": "Green", "stylesheet": "/Resources/Stylesheets/Styles/Green/OfficeUI.Style.Green.min.css" },
    { "name": "LightBlue", "stylesheet": "/Resources/Stylesheets/Styles/LightBlue/OfficeUI.Style.LightBlue.min.css" },
    { "name": "Orange", "stylesheet": "/Resources/Stylesheets/Styles/Orange/OfficeUI.Style.Orange.min.css" },
    { "name": "Purple", "stylesheet": "/Resources/Stylesheets/Styles/Purple/OfficeUI.Style.Purple.min.css" },
    { "name": "Red", "stylesheet": "/Resources/Stylesheets/Styles/Red/OfficeUI.Style.Red.min.css" },
    { "name": "Turquoise", "stylesheet": "/Resources/Stylesheets/Styles/Turquoise/OfficeUI.Style.Turquoise.min.css" }
  ],
  "DefaultStyle": "LightBlue",

  "Themes": [
    { "name": "No Background", "stylesheet": "/Resources/Stylesheets/Themes/No Background/OfficeUI.Themes.No-Background.min.css" },
    { "name": "Calligraphy", "stylesheet": "/Resources/Stylesheets/Themes/Calligraphy/OfficeUI.Themes.Calligraphy.min.css" },
    { "name": "Circles And Stripes", "stylesheet": "/Resources/Stylesheets/Themes/Circles-And-Stripes/OfficeUI.Themes.Circles-And-Stripes.min.css" },
    { "name": "Circuit", "stylesheet": "/Resources/Stylesheets/Themes/Circuit/OfficeUI.Themes.Circuit.min.css" },
    { "name": "Clouds", "stylesheet": "/Resources/Stylesheets/Themes/Clouds/OfficeUI.Themes.Clouds.min.css" },
    { "name": "Doodle Circles", "stylesheet": "/Resources/Stylesheets/Themes/Doodle-Circles/OfficeUI.Themes.Doodle-Circles.min.css" },
    { "name": "Doodle Diamonds", "stylesheet": "/Resources/Stylesheets/Themes/Doodle-Diamonds/OfficeUI.Themes.Doodle-Diamonds.min.css" },
    { "name": "Geometry", "stylesheet": "/Resources/Stylesheets/Themes/Geometry/OfficeUI.Themes.Geometry.min.css" },
    { "name": "Lunchbox", "stylesheet": "/Resources/Stylesheets/Themes/Lunchbox/OfficeUI.Themes.Lunchbox.min.css" },
    { "name": "School Supplies", "stylesheet": "/Resources/Stylesheets/Themes/School-Supplies/OfficeUI.Themes.School-Supplies.min.css" },
    { "name": "Spring", "stylesheet": "/Resources/Stylesheets/Themes/Spring/OfficeUI.Themes.Spring.min.css" },
    { "name": "Stars", "stylesheet": "/Resources/Stylesheets/Themes/Stars/OfficeUI.Themes.Stars.min.css" },
    { "name": "Straws", "stylesheet": "/Resources/Stylesheets/Themes/Straws/OfficeUI.Themes.Straws.min.css" },
    { "name": "Tree Rings", "stylesheet": "/Resources/Stylesheets/Themes/Tree-Rings/OfficeUI.Themes.Tree-Rings.min.css" },
    { "name": "Underwater", "stylesheet": "/Resources/Stylesheets/Themes/Underwater/OfficeUI.Themes.Underwater.min.css" }
  ],
  "DefaultTheme": "Geometry",
  "Configuration": "/Resources/Data/Application.json",
  "Controls": [
    { "Name": "Ribbon", "ConfigurationFile": "/Configuration/Application/OfficeUI.Ribbon.config.json" }
  ]
}

如您所见，该文件确实包含对样式表的一些引用，这些引用需要嵌入页面dynamiccaly中。

现在，让我们转到AngularJS部分。

首先，我有我的模块的定义：

var OfficeUI = angular.module('OfficeUIApplication', ['ngSanitize']);

然后，我有一个加载上面定义的JSon文件的服务：

OfficeUI.factory('OfficeUIConfigurationService', function($http) {
    // Defines the object that this service needs to return.
    return {
        getOfficeUIConfiguration: function() {
            // Check if the location of the file can be found somewhere. If it cannot be found, throw an error.
            if (typeof $.fn.OfficeUI.Settings.OfficeUIConfigurationFileLocation === 'undefined' || $.fn.OfficeUI.Settings.OfficeUIConfigurationFileLocation == '') {
                OfficeUICore.Exceptions.officeUIConfigurationException('The OfficeUI Configuration file is not defined.');
            }

            // Returns the 'httpPromise' which is required for further processing.
            return $http.get($.fn.OfficeUI.Settings.OfficeUIConfigurationFileLocation)
                .then(function (response) {
                    return {
                        Styles: response.data.Styles,
                        DefaultStyle: response.data.DefaultStyle,
                        Themes: response.data.Themes,
                        DefaultTheme: response.data.DefaultTheme,
                        Configuration: response.data.Configuration,
                        Controls: response.data.Controls
                    };
                }, function(error) { OfficeUICore.Exceptions.officeUILoadingException('The OfficeUI Configuration file: \'' + $.fn.OfficeUI.Settings.OfficeUIConfigurationFileLocation + '\' could not be loaded.'); }
            );
        }
    }
});

然后，我有我的控制器：

OfficeUI.controller('OfficeUIController', function(OfficeUIConfigurationService, $scope, $http) {
    $scope.isInitialized = false;           // Indicates that the entire OfficeUI application has been loaded.
    $scope.loadingScreenLoaded = false;     // Indicates that the data for the loading screen has been loaded.

    // Initialize all the required components for the website.
    Initialize();

    function Initialize() {
        OfficeUIConfigurationService.getOfficeUIConfiguration().then(function(data) {
            var foundStyles = JSPath.apply('.{.name == "' + data.DefaultStyle + '"}', data.Styles);
            var foundThemes = JSPath.apply('.{.name == "' + data.DefaultTheme + '"}', data.Themes);

            $scope.Style = foundStyles[0].stylesheet;
            $scope.Theme = foundThemes[0].stylesheet;

            // Set a value that indicates that the loading screen has been loaded. So, at this point, the loading screen
            // can be rendered.
            $scope.loadingScreenLoaded = true;

            // Returns the 'httpPromise' which is required for further processing.
            $http.get(data.Configuration)
                .then(function (response) {
                        $scope.Title = response.data.Title;
                        $scope.Icons = response.data.Icons;
                }, function(error) { OfficeUICore.Exceptions.officeUILoadingException('The OfficeUI application definition file: \'' + data.Configuration + '\' could not be loaded.'); }
            );
        });

        setTimeout(function() {
            $scope.isInitialized = true;
            $scope.$apply();
        }, 2000);
    }
});

注意：我在这里设置了超时，以确保加载屏幕显示2秒钟。

在此控制器中，您可以找到以下代码：

OfficeUIConfigurationService.getOfficeUIConfiguration().then(function(data) {
    var foundStyles = JSPath.apply('.{.name == "' + data.DefaultStyle + '"}', data.Styles);
    var foundThemes = JSPath.apply('.{.name == "' + data.DefaultTheme + '"}', data.Themes);
    $scope.Style = foundStyles[0].stylesheet;
    $scope.Theme = foundThemes[0].stylesheet;
    // Set a value that indicates that the loading screen has been loaded. So, at this point, the loading screen
    // can be rendered.
    $scope.loadingScreenLoaded = true;
    // Returns the 'httpPromise' which is required for further processing.
    $http.get(data.Configuration)
        .then(function (response) {
                $scope.Title = response.data.Title;
                $scope.Icons = response.data.Icons;
        }, function(error) { OfficeUICore.Exceptions.officeUILoadingException('The OfficeUI application definition file: \'' + data.Configuration + '\' could not be loaded.'); }
    );
});

这样做，从我的加载服务，检索和解析JSon文件，并根据此文件中的值，为Style和Theme分配一个值，这两个都是作用域对象

在我的HTML中，这个呈现方式（在文件的head部分中）：

<link rel="stylesheet" href="#" data-ng-href="{{Style}}" />
<link rel="stylesheet" href="#" data-ng-href="{{Theme}}" />

这允许我更改应用程序dynamiccaly的外观（通过调用更改范围值的方法）。

但是，可能存在闪烁问题。加载并解析Json文件时，我为loadingScreenLoaded分配一个值，以确保显示加载屏幕：

<div class="loading-area center-screen no-select" data-ng-if="loadingScreenLoaded && !isInitialized">

但是，在这种特殊情况下，可能是CSS文件仍在加载。

所以问题是，如何在页面上显示加载div，直到所有资源都被加载（CSS，...）

另外，如果可能的话，有没有办法对ng-include指令，图像......进行相同的操作。

亲切的问候，

Answer 1

不建议使用超时，我不能指望你的资源在2000年之后就可以准备好了

setTimeout(function() {
        $scope.isInitialized = true;
        $scope.$apply();
    }, 2000);

我建议你使用文件和模块加载器库。尝试使用角度requirejs

请参阅使用angularjs + requirejs

的此示例

Answer 2

标签有事件＆＃34; onload＆＃34;。详情here。但是，如果它满足您所需的所有浏览器，则应检查浏览器兼容性。

<link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">

在其他情况下，您可以考虑动态资源加载技术。例如this。此外，您可以使用实际实现动态资源加载的第三方库（angular-load，或者如@ran所说，requirejs）。

问题是如何等待资源准备好

您可以将事件处理程序附加到＆＃34; onload＆＃34;（或第三方库特定事件，它取决于您选择的内容），这些事件将在资源准备好后执行。

如何等待加载资源

2 个答案: