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'
]);
});
}]
}
})