Skip to content

css-modules-with-angular.md

Latest commit

 

History

History
73 lines (56 loc) · 1.59 KB

css-modules-with-angular.md

File metadata and controls

73 lines (56 loc) · 1.59 KB
Raw

CSS Modules with Angular

.bacon { /* ... */ }
.pancakes { /* ... */ }
import styles from "./component.css"

angular.module('myApp').controller('MyController', ($scope) => {
  $scope.styles = styles
})
<div ng-app="myApp">
  <div ng-controller="MyController">
    <header class="{{::styles.bacon + ' ' + styles.pancakes}}">
      <h1 class="{{styles.pancakes}}">pancakes (2-way binding)</h1>
      <h1 ng-class="styles.bacon">bacon</h1>
        <!-- ... --->
    </header>
  </div>
</div>

CSS Modules with angular 1.5 component

Demo

.content { /* ... */ }
.bacon { /* ... */ }
.pancakes { /* ... */ }
import angular from 'angular'
import styles from './index.css'

var template = `
        <div class="{{::$ctrl.styles.content}}">                   
            <div class="{{$ctrl.styles.pancakes}}">pancakes</div>
            <div ng-class="$ctrl.styles.bacon">bacon</div>
        </div>`;

angular
    .module('app', [])
    .component('myComponent', {
        template: template,
        controller: Controller
    });


function Controller() {
    var vm = this;
    
    vm.$onInit = function() {
        vm.styles = styles;
    }
}

This needs expansion/revision by someone who really knows angular. Maybe that's you!

  • Controller vs Directive examples/rationale
  • Angular 2.0 syntax
  • Is that even how people are doing Angular 1 these days? It's been so long.