Building LARGE apps with Angular.js

@DobryJason

On GitHub:  jmdobry

www.pseudobry.com

New to AngularJS?

Confused by?

Loving the magic and 

your new productivity?

Jaded by gotchas?

Enjoying the zen of Angular?

A word of caution

If you've needed to...

But there will come a day 

when it saves your life

Survival Kit:

Building LARGE apps with Angular.js

Convention vs Configuration

Convention vs Configuration

Convention Example

app.controller('MyCtrl', function ($scope, MyService) {
    var _count = 0;
    
    function _privateUtil() { // function decomposition
        _count += _count + 1;
    }
    
    function _handleClick(data) {
        _privateUtil();
        $scope.answer = MyService.doSomething({
            data: data,
            count: _count
        });
    }
    
    function _init() {
        // expose "data" to the view
        $scope.data = 10; 
        
        // expose _handleClick as a "public" method on the $scope
        $scope.handleClick = _handleClick; 
    }
    
    _init();
}

Convention vs Configuration

Model Layer

"Angular makes no restrictions or requirements on the model"

Model Layer

app.service('MyService', function ($http, $q, $angularCacheFactory) {
    var _dataCache = $angularCacheFactory('dataCache', { 
        maxAge: 3600000 // items expire after an hour
    });
    /**
     * @class MyService
     */
    return {
        manipulateData: function (input) {
            var output;
            // do something with the data
            return output;
        },
            
        getDataById: function (id) {
            var deferred = $q.defer();
            if (_dataCache.get(id)) {
                deferred.resolve(_dataCache.get(id));
            } else {
                // Get the data from the server and populate cache
            }
            return deferred.promise;
        }
    };
});

Model Layer

$scope.$watch(function () {
    return MyService.getDataById($scope.selectedId);
}, function () {
    $scope.currentData = MyService.getDataById($scope.currentData.id);
});

<h3p>{{ currentData.name }}</h3>

Model Layer

File Organization

File Organization

partials/
    home.html
    login.html
    users.html
    orders.html
js/
    controllers.js
    directives.js
    filters.js
    services.js
    app.js

File Organization

js/
    controllers/
        homeController.js
        loginController.js
    directives/
        usersDirective.js
        ordersDirective.js
    filters/
    services/
        userService.js
        orderService.js
        loginService.js
partials/
    home.html
    login.html
    users.html
    orders.html
app.js

File Organization

orders/
    directives/
        orders.html
        ordersDirective.js
    services/
        orderService.js
users/
    directives/
        users.html
        usersDirective.js
    services/
        userService.js
home/
    controllers/
        home.html
        homeController.js
        login.html
        loginController.js
shared/
    services/
        i18nService.js
    filters/
        i18nFilter.js
app.js

Modules

"[you] should group by view since views will be lazy loaded in near future"

Lazy Loading Now

var app = angular.module('app', []);

app.config(function ($controllerProvider, $compileProvider, $filterProvider, $provide, $animationProvider) {
    
    // save references to the providers
    app.lazy = {
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service,
        animation: $animationProvider.register
    };
    
    // define routes, etc.
});

Lazy Loading Now

$routeProvider.when('/items', {
    templateUrl: 'partials/items.html',
    resolve: {
        load: ['$q', '$rootScope', function ($q, $rootScope) {
            var deferred = $q.defer();
            // At this point, use whatever mechanism you want 
            // in order to lazy load dependencies. e.g. require.js
            // In this case, "itemsController" won't be loaded
            // until the user hits the '/items' route
            require(['itemsController'], function () {
                $rootScope.$apply(function () {
                    deferred.resolve();
                });
            });
            return deferred.promise;
        }]
    }
});

Lazy Loading Now

// reference the saved controller provider
app.lazy.controller('ItemsController', function ($scope) {
    // define ItemsController like normal
});

<section data-ng-controller="ItemsController">
    <!-- a bunch of awesome html here -->
</section>

Understand the $scope 

life-cycle

Understand the $scope 

life-cycle

$scope.fruit = 'banana';
var $newScope = $scope.$new();

$scope.fruit; // 'banana'
$newScope.fruit; // 'banana'

$newScope.fruit = 'apple';
$newScope.fruit; // 'apple'

$scope.fruit; // 'banana' // Did you think it would be 'apple'?

3rd-party integration with Angular.js

3rd-party integration with Angular.js

$scope.$apply(function () {
    $scope.result = thirdPartyLib.goDoSomething();
});

The end

@DobryJason

On GitHub:  jmdobry

www.pseudobry.com

/building-large-apps-with-angularjs.html

also /designing-for-testability.html