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