Question

我已经开始使用angularjs开发一个应用程序，它可以有不同的UI主题。

的index.html

<html lang="en" data-ng-app="appConfigurator">
    <head>
        <title>The title</title>
    </head>
    <body data-ng-controller="appCtrl">
        <div data-ng-view></div>
    </body>
    <script type="text/javascript" src="libs/angular.js"></script>
    <script type="text/javascript" src="libs/angular-route.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/services/webservice.js"></script>
    <script type="text/javascript" src="js/controllers/appCtrl.js"></script>
    <script type="text/javascript" src="js/router.js"></script>
</html>

app.js - 这里我初始化我的模块并声明一个全局变量'theme'。

var appConfigurator = angular.module("appConfigurator", ['ngRoute']);
var theme = "";

webservice.js - 此服务使Web服务调用后端并获取数据作为响应。

appConfigurator.factory('webService', function($http) {
    return {
        callService : function(method, fileType, rowId, data, message, type) {

            return $http({
                method : method,
                url : url,
                data : "Message=" + message + "&XMLData=" + data + "&Type=" + type,
                headers : {
                    'Content-Type' : 'application/x-www-form-urlencoded'
                }
            });

        }
    };

});

appCtrl.js - 这是主要的app控制器。在这里，我正在进行webservice调用以获取数据，然后使用这些数据，我将不得不再打一次电话来获取我需要使用的“主题”的名称。所以基本上是两个电话。

appConfigurator.controller("appCtrl", function($scope, webService) {

    $scope.succ = function(res) {
        //alert("success" + res.name);
    };

    $scope.err = function(res) {
        alert("error");
    }

    webService.callService('POST', 'data', 'ID', '', 'Message','XML').success($scope.succ).error($scope.err);
});

router.js - 根据theme的值，路由将路由到特定的文件夹结构，该结构将包含特定于主题的HTML，CSS和JS文件。

appConfigurator.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/Config', {
        templateUrl: 'themes/'+theme+'/views/a.tmpl.html',
        controller: ''
    }).otherwise({
        redirectTo: '/Config'
    });
}
]);

显而易见的问题是，当路由器设置tempelateUrl的路径时，我没有主题的名称。

解决方案 - 1）一个解决方案（这个工作）是将URL中的主题名称作为参数获取，但不能在后端端完成。所以这个解决方案没有意义。 2）有没有办法可以延迟路由过程，以便在角度尝试路由时我有主题名称。

发展处于初级阶段。改变方法的评论也会有所帮助。是的Angularjs对我和我的同龄人来说都是新手。

Answer 1

appConfigurator.config(['$routeProvider', function($routeProvider) {    
// set theme name

var theme = 'theme_name';

$routeProvider.when('/Config', {
    templateUrl: 'themes/'+theme+'/views/a.tmpl.html',
    controller: ''
}).otherwise({
    redirectTo: '/Config'
});
}
]);

为角度应用设置不同的UI主题

1 个答案: