New Patterns in Angular

Ian McNally

ianmcnally@gmail.com             ia-n.com            @_ianmcnally

Kill $scope

Explicitly attaching to scope is being removed in 2.0

 

Inheritance and source aren't obvious

Kill $scope

Why'd we use it before?

  • Reusability
    • e.g., Parent Controller -> Child controller functions
  • Bindings in templates

Kill $scope

Why'd we use it before?

  • Reusability
    • e.g., Parent Controller -> Child controller functions
    • Just use services! Inject them anywhere.
  • Bindings in templates

Kill $scope

Why'd we use it before?

  • Reusability
    • e.g., Parent Controller -> Child controller functions
    • Just use services! Inject them anywhere.
  • Bindings in templates
    • use named controllers

Kill $scope

  • Bindings in templates
    • use named controllers
  $stateProvider
    .state States.NOTEBOOK,
      url : '/notebook/:sectionId'
      controller : 'Notebook'
      controllerAs : 'NotebookController'
      templateUrl : 'notebook/views/index.html'
      resolve :
        playlists : ['userService', '$stateParams',
          (userService, $stateParams) ->
            userService.getPlaylists $stateParams.sectionId
        ]
<div class="student-grid-1">
  <ul>
    <li class="section-name" ng-bind="NotebookController.section.sectionName"></li>
  </ul>
</div>

Kill controllers

  • Don't use ng-controller="..."
  • Pass controllers into directives
  • Pass controllers into modals
  • You still need route controllers

Kill controllers

Don't use ng-controller

 

  • Poor inheritance, children become dependent on timing and setup of parents
  • View relationships
  • Semi-global data

Further reading

http://teropa.info/blog/2014/10/24/how-ive-improved-my-angular-apps-by-banning-ng-controller.html

Kill controllers

Pass controllers into directives

angular.module 'app.currentlyReading', []
.directive 'currentlyReading', ->
  templateUrl : 'currently_reading/currently_reading.html'
  controller : 'CurrentlyReading'
  controllerAs : 'currentlyReading'
.controller 'CurrentlyReading', ->
  @title = 'Collected Fictions by Borges'
  this
You are currently reading <span ng-bind="currentlyReading.title"></span>.

Kill controllers

Pass controllers into modals (UI Bootstrap)

$modal.open 'path/to/template.html',
  controller : 'TeacherQuickPoll as TeacherQuickPollController'
  resolve :
    data : @data

Note: newer versions use controllerAs syntax

Coffeescript class Controllers

Angular won't change the context your class functions are called in.

 

Concise syntax.

 

Works nicely with named controllers.

Coffeescript class Controllers

@app.controller 'Header',
class Header

  @$inject : ['User', '$rootScope']

  constructor : (@User, @rootScope) ->

  userSelected : ->
    @rootScope.$broadcast 'Header:userSelected', @User

Coffeescript class Controllers

@app.controller 'Header',
class Header

  @$inject : ['User', '$rootScope']

  constructor : (@User, @rootScope) ->

  userSelected : ->
    @rootScope.$broadcast 'Header:userSelected', @User
describe 'userSelected', ->
  it 'broadcasts the event', ->
    spyOn HeaderController.rootScope, '$broadcast'
      .andCallThrough()
    HeaderController.userSelected()
    expect HeaderController.rootScope.$broadcast
      .toHaveBeenCalledWith 'Header:userSelected', HeaderController.User

Modularize everything

Angular applications are a composition of modules.

Further reading

​https://egghead.io/lessons/angularjs-angularjs-architecture-file-structure

Modularize everything

# app.coffee

angular.module 'app', [
  'ui.router', 'app.updates'
]
# updates.coffee

angular.module 'app.updates', [
  'ui.router', 'app.currentlyReading', 'app.templates'
]

.config ['$stateProvider', '$urlRouterProvider',
($stateProvider, $urlRouterProvider) ->

  $stateProvider.state 'updates',
    url : '/'
    templateUrl : 'updates/updates.html'
    controller : 'Updates'
    controllerAs : 'UpdatesController'

]

New Patterns in Angular

By Ian McNally

New Patterns in Angular

A collection of patterns and practices, in anticipation of Angular 2.0.

  • 667