如何在angularjs单页面应用程序中组织样式?

时间:2013-10-19 10:20:53

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

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

以下是整个角度应用的基本布局:

<!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>

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

我认为我误解了某些东西,或者我必须学习有关角度的其他内容,但那是什么?谢谢你的帮助!

2 个答案:

答案 0 :(得分:0)

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

如果这不起作用,那么总是$rootScope$rootScope中定义的属性\方法可在ng-app内的任何位置访问。

答案 1 :(得分:0)

您可以在控制器中执行标题 像

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

或更好地设置像

这样的服务
app.factory('WindowUtils', function($window) {
        return {
           setTitle:function(str){
              $window.document.title = str;
           }
        }
    })
对于风格我不明白的麻烦,因为你可以把 style.css中的所有样式都是整个应用程序的全局样式。