如何在 angularjs 单页应用程序中组织样式？答案

【问题标题】：How to organise styles in angularjs singlepage application?如何在 angularjs 单页应用程序中组织样式？
【发布时间】：2013-10-28 04:47:33
【问题描述】：

我正在尝试创建一个单页角度应用程序，但我不知道如何为特定控制器视图加载样式，如果控制器范围只能应用于正文元素。

这是整个 Angular 应用程序的基本布局：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <link href="/styles/some-basic-styles.css" rel="stylesheet" />

    <script src="/scripts/angular.min.js"></script>
    <script src="/script/custom/app.js"></script>
</head>
<ng-view></ng-view>
</html>

那个 app.js 路由：

app.config(function ($routeProvider) {
  $routeProvider
    .when('/somepage', {templateUrl: 'views/someView.html', controller: 'someController'});
 $routeProvider
    .when('/anotherpage', {templateUrl: 'views/anotherView.html', controller: 'anotherController'});
});

示例视图：

<body ng-controller="someController">
    <!--some html code here-->
<script src="/scripts/someController.js"></script>
</body>

那么，如果只能从全局模板访问，我该如何更改页面标题或在视图中添加样式/脚本？

我认为我误解了某些内容，或者我必须学习有关 Angular 的其他内容，但那是什么？感谢您的帮助！

【问题讨论】：

这里有好的解决方案stackoverflow.com/questions/18490882/…

标签： javascript angularjs model-view-controller single-page-application singlepage

【解决方案1】：

我不确定，但是您可以在 html 上定义一个 ng-controller，例如 RootController，然后使用标准角度绑定实现您想要的任何内容。

如果这不起作用，那么总是有$rootScope。在$rootScope 上定义的属性\方法可以在ng-app 内的任何地方访问。

【讨论】：

我认为第二个选项更好，它可以帮助我获得标题。但我不明白，它如何帮助我在 maintemplate 的头部注入样式？
您希望如何注入样式。举个例子？
像这样：
ng-style 不能这样工作，但是你总是可以动态选择样式表，比如<link href="/styles/{{stylesheetname}}.css" rel="stylesheet" />。或者在单个元素上设置ng-style。

【解决方案2】：

对于你可以在控制器中做的标题喜欢

$window.document.title = 'My title';

或者更好地设置类似的服务

app.factory('WindowUtils', function($window) {
        return {
           setTitle:function(str){
              $window.document.title = str;
           }
        }
    })

对于风格我不明白的麻烦，因为你可以把您的 style.css 中的所有样式都适用于整个应用程序。

【讨论】：