How to organise styles in angularjs singlepage application?

Question

I'm trying to create a singlepage angular application, but I don't know, how to load styles for particular controller view, if controller scope can only be applied in body element.

Here is the base layout of whole angular application:

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

That app.js routing:

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

An example view:

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

So, how can I change page title or add styles/scripts in my views if it's only accessible from global tamplate?

I think that I misunderstood something or I have to learn something else about angular, but what is that? Thanks for any help!

good solution here http://stackoverflow.com/questions/18490882/how-to-append-a-stylesheet-to-head-in-angularjs-routeprovider — charlietfl, Oct 19 '13 at 15:49

score 0 · Answer 1 · answered Oct 19 '13 at 10:33

0

I am not sure but, you can define a ng-controller over the html like RootController and then achieve whatever you want using the standard angular binding.

If that does not work, then there is always $rootScope. Properties\methods defined on $rootScope are accessible anywhere inside ng-app.

answered Oct 19 '13 at 10:33

Chandermani

42,589
12
85
88

I think the second option is better and it can help me with titles. But I don't see, how can it help me with styles injection in head of maintemplate? – Eriendel Oct 19 '13 at 11:42
How do you want style to get injected. Give an example? – Chandermani Oct 19 '13 at 14:00
Like that: – Eriendel Oct 19 '13 at 17:22
`ng-style` does not work this way, but you can always select style sheet dynamically, such as ``. Or set `ng-style` on individual elements. – Chandermani Oct 20 '13 at 09:54

score 0 · Answer 2 · answered Oct 19 '13 at 13:49

For the title you can do in the controller like

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

or better set up a service like

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

for the style I don't understand the trouble because of you can put all the styles in your styles.css globaly for the whole application.

How to organise styles in angularjs singlepage application?

2 Answers2