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

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'?