AngularJS support


Folder structure

Use Pages AngularJS boilerplate code to kickstart your project in no time. In your downloaded bundle locate to getting_started/angular. You will find a folder structure similar to the following.


index.html

It is recommended that you keep the default JS/CSS file loading order intact. If you want to load page specific JS/CSS files you can use ocLazyLoad module to do so (read below). You must NOT remove/change the location of 

<link id="lazyload_placeholder">
found inside <head> tag. It acts as a placeholder for all the lazy loaded files (they are added above this line)


Lazy loading

Use assets/js/config.js to define your routes. For each route you can set which libraries, controllers or directives that need to be loaded on demand, using ocLazyLoad

.state('app.dashboard', {
    url: "/home",
    templateUrl: "tpl/home.html",
    controller: 'HomeCtrl',
    resolve: {
        deps: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load([
                    /* 
                        Load any ocLazyLoad module here
                        ex: 'wysihtml5'
                        Open config.lazyload.js for available modules
                    */
                ], {
                    insertBefore: '#lazyload_placeholder'
                })
                .then(function() {
                    return $ocLazyLoad.load([
                        'assets/js/controllers/home.js'
                    ]);
                });
        }]
    }
})