【问题标题】：Dynamic theme using url Param使用 url 参数的动态主题
【发布时间】：2016-03-27 06:33:25
【问题描述】：

我有一个要求。你能提出实现它的可能方法吗？

我想根据每个路由中传递的 URL 更改我的应用程序的主题。我正在使用以下技术。 - 前端：Angular JS - 后端：Node.js

例如：localhost/x/about 本地主机/y/关于

我通过 cookie 在登录时使用 localtion.search 传递参数来实现这些。但是我在所有路线中都需要该主题参数。基于该主题需要更改。任何人都可以提出可能的方法。

app.js

app = angular.module('themeApp', ['ngRoute'])  
app.config(function($routeProvider){
$routeProvider
 .when('/',{
    templateUrl: 'home.html'
 })
 .when('/:id/about',{
    templateUrl: 'about.html'
 })
.otherwise({
    redirectTo: '/'
});
});
app.controller('themeController', function ($scope, $routeParams) {  
 console.log($routeParams.id);
 // set the default theme   
 $scope.css = $routeParams.id;
});

menu.html（不完整，在此混淆，请指正，如何调用）

 <li>
   <a href="about">About</a>

 </li>
 <li>
     <a href="home">Home</a>

 </li>

index.html

 <html ng-app="themeApp" ng-controller="themeController">  
 <head>  
  <!-- pull in css based on angular -->  
 <link rel="stylesheet" ng-href="css/{{css}}.css">   
 </head>  
 <body>  
 <div ng-view></div>
    <!-- bring in JS and angular -->  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular.js">        </script>
    <script rc="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.14/angular-route.js"></script>

    <script src="app.js"> </script> 
  </body>  
  </html>

css/

it contains the three files,
- red.css

body{  
  background-color: red;
  color: #333;
  font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;  
  font-size: 15px; 
}

green.css 身体{
背景颜色：绿色；颜色：#333； font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
字体大小：15px； }
- blue.css 身体{
  背景颜色：蓝色；颜色：#333； font-family: "Source Sans Pro",Calibri,Candara,Arial,sans-serif;
  字体大小：15px； }

【问题讨论】：

标签： css angularjs node.js cookies themes

【解决方案1】：

快速而简单的答案是使用 $rootScope。 $rootScope 可用于所有控制器，但与所有全局变量一样，应谨慎使用。

这是解释 $rootScope 的好帖子。 http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS-$rootScope-and-$scope.html

基本上，如果您在页面 x 和 y 的两个控制器上使用它

app.controller('login',['$scope','$rootScope', function ($scope,$rootScope) {
    $rootScope.foo='bar';
}]);

app.controller('xCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.lorem=$rootScope.foo;
    console.log($scope.lorem); //bar
}]);

app.controller('yCtrl',['$scope','$rootScope', function ($scope,$rootScope) {
    $scope.ipsum=$rootScope.foo;
    console.log($scope.ipsum); //bar
}]);

然后可以像往常一样在 HTML 标记中使用它们。

使用$rootScope就简单多了，但是如果你想用router每次拉下id也是可以的。

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.foo=$routeParams.id;
}]);

如果你的页面比 /about 多得多，我可以想象路由会变得有点棘手。

您甚至可以将它与根范围耦合，然后将其传递给您的其他控制器。

app.controller('xCtrl',['$scope','$rootScope','$routeParams', function($scope,$rootScope,$routeParams){
    $rootScope.foo=$routeParams.id;
    $scope.lorem=$rootScope.foo;
}]);

--根据评论编辑-- 我可能需要一些代码来确定你在追求什么，但这也许可以澄清？

网址：mysite.com/blue/about

app.config(function($routeProvider){
    $routeProvider
     .when('/',{
        controller: 'indexController',
        templateUrl: 'view/index.html'
     })
     .when('/:id/about',{
        controller: 'xCtrl',
        templateUrl: 'view/x.html'
     })
    .otherwise({
        redirectTo: '/'
    });
});

app.controller('xCtrl',['$scope','$routeParams', function($scope,$routeParams){
    $scope.theme=$routeParams.id;
}]);

HTML

<div ng-controller="xCtrl">
    <div ng-class="{{theme}}">
        My theme is {{theme}}.
    </div>
</div>

CSS

.blue
{
    background-color: blue;
}
.green
{
    background-color: green;
}

【讨论】：

这是适合通过 rootscope 更改模板的答案。因为我的要求是用户必须查看 url 中的主题信息以及相应的 css 文件更改。
这只有一个有几个类的css。我想为每个主题管理多个 css 文件，并且应用程序中所有导航的 url 应该相同。例如：localhost/x/about、localhost/x/contact 和 localhost/y/about、localhost/y/contact。如果用户键入任何 url，我必须更改 css 文件 x / y
如果需要，请尝试在控制器中使用 if 语句为类设置其他变量。
查询参数如何在所有路由/页面中保持原样
如果您的所有路线都在 id 后面，它将继续工作。 /:id/about 或 /:id/lorem/ipsum 或 /:id/x/y/z 将能够从 $routeParams 获取 id 参数