각도 앱에 대해 다른 UI 테마 설정

나는 다양한 UI 테마를 가질 수있는 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는 - 여기 내 모듈을 초기화하고 또한 전역 변수 '테마'를 선언합니다.

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

webservice.js -이 서비스는 웹 서비스 호출을 백엔드에 보내고 응답으로 데이터를 가져옵니다.

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 - 이것은 주 앱 컨트롤러입니다. 여기서 저는 데이터를 얻기 위해 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 - 테마의 값을 기준으로 테마 특정 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는 나와 내 동료에게 새로운 것입니다.

출처

2014-05-15 Atul Gupta

서버 측에서 사용하는 언어는 무엇입니까? –

@Andrew Church 그렇다면 실제 백엔드는 Sieble 시스템입니다. 우리는 자바에있는 우리 자신의 미들웨어를 가지고 있으며, 프론트 엔드는 JSP를 호출하여 그것과 통신 할 수 있습니다. –

내가 한 말은 한 페이지 응용 프로그램을 어떻게 호스팅하고 있습니까? .php 또는 .aspx와 같은 서버 쪽 페이지를 사용하는 경우 요청이 해당 페이지의 서버에 도달 할 때 템플릿을로드 할 수 있으며 응답이 돌아 오기 전에 전역 적으로 var를 주입 할 수 있습니다. 당신이 사용하고있는 것을 알려주고 나는 바이올린으로 대답 할 수 있습니다 ... –

-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' 
}); 
} 
]);

출처

2016-08-10 09:15:24 hkj

각도 앱에 대해 다른 UI 테마 설정

답변

관련 문제