Importing a different css stylesheet for each page of my website...

[David Sorrentino]

Hello everyvody,

I'm writing a website in Angular and everything seems to be going smoothly.

I've got just one doubt. Is there any possibility to import a different css stylesheet for each page of my website?

I mean, let's assume that I have the following views: main.html, about.html, contact.html.
What I would like to do is to import main.css when I load the view main.html, about.css when I load the view about.html, and so on.

Thanks in advance for your help. ;)

Best,
David

[Peter Bacon Darwin]

http://plnkr.co/edit/oWw3QUc9P4leo0gO5EzL?p=preview

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[David Sorrentino]

Hello Peter,

Thank you very much for your reply.
I'm more and more impressed from angular's power.
The method you showed me works fine, but I get this error in console, and I can't understand why.

TypeError: Cannot read property 'css' of undefined at Object.$scope.$watch.$scope.css

As I told you, despite this everything seems to work.
Any ideas?

Best,
David

[Dave Merrill]

Try this: http://plnkr.co/edit/lEErLbr3SvQ9Ye75G13l?p=preview

$route.current is undefined when the page first loads. This version guards against that in the watch, and also provides a home.css sheet to use then.

It's interesting that though $route.otherwise runs in that case, giving it a .css property doesn't help, because $route.current is still undefined, so that property can't be read. I wonder if there's a construct that gives it an actual default value, rather than armoring every piece of $route.current-dependent code.

Dave Merrill

[David Sorrentino]

Hi Dave,

Thanks a lot. Your solution fixed the problem. ;)
At this stage I'm also wondering if there is a less hacky approach to it.

Thanks one more time mate.
Have a good Sunday!

Best,
David

[Peter Bacon Darwin]

Marginally cleaner...

http://plnkr.co/edit/Nrey7EqD3sPMOVkLeXQV?p=preview

[Andy Joslin]

I would do it using an event: http://plnkr.co/edit/FAlITvhcqWVn6LKFRzRH?p=preview

[Peter Bacon Darwin]

Yeah, I like that.  Saves yet another watch

On 24 February 2013 22:40, Andy Joslin <andyt...@gmail.com> wrote:

I would do it using an event: http://plnkr.co/edit/FAlITvhcqWVn6LKFRzRH?p=preview

--

[Dave Merrill]

How much thrash do you think there is to the messaging strategy? The $routeChangeSuccess event is broadcasted automatically, so however expensive it is, that's a given. Do $on listeners incur much overhead?

Besides adding to my general understanding, I have yet to code some user actions that where this could apply. They're 'select' actions that can be initiated at any level of a nested set of arrays several levels deep, causing items below there to be selected or not according to various criteria 

The originating method needs to explicitly iterate through all the lowest-level objects in that nested collection, or broadcast an event that those object listen $on. 

Which would you think is the better strategy?

[Alex Castillo]

Hi David,

Check out AngularCSS. 

It extends Angular to do exactly what you are looking for. No need to have that logic in controllers.

https://github.com/door3/angular-css

 $routeProvider
    .when('/page1', {
      templateUrl: 'page1/page1.html',
      controller: 'page1Ctrl',
      css: 'page1/page1.css'
    })

It also works for directives.

myApp.directive('myDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'my-directive/my-directive.html',
    css: 'my-directive/my-directive.css'
  }
});

Best,

Alex