====== AngularJS Template GeoDirectory ======
* https://github.com/johnpapa/angular-styleguide
* https://scotch.io/tutorials/angularjs-best-practices-directory-structure
===== App Structure =====
app/
----- shared/ // acts as reusable components or partials of our site
---------- sidebar/
--------------- sidebarDirective.js
--------------- sidebarView.html
---------- article/
--------------- articleDirective.js
--------------- articleView.html
----- components/ // each component is treated as a mini Angular app
---------- home/
--------------- homeController.js
--------------- homeService.js
--------------- homeView.html
---------- blog/
--------------- blogController.js
--------------- blogService.js
--------------- blogView.html
---------- core/ // for very huge projects, shared components here.
--------------- header
--------------- footer
----- app.module.js
----- app.routes.js
assets/
----- img/ // Images and icons for your app
----- css/ // All styles and style related files (SCSS or LESS files)
----- js/ // JavaScript files written for your app that are not for angular
----- libs/ // Third-party libraries such as jQuery, Moment, Underscore, etc.
index.html
====== Start Template Project ======
* download and extract angular-seed project. Rename it to maxo36_template
/home/dang/data/workspace/73_maxo36/my_template/maxo36-template
===== Project Structure =====
Restructure project folder to include modules like above.
Configure bower to download js to the libs folder:
vim $WEBAPP_DIR/.bowerrc
1 {
2 "directory": "app/assets/libs"
3 }
npm install
npm start
In Ubuntu node command is named nodejs if installed from package so:
sudo ln -s /usr/bin/nodejs /usr/bin/node
===== RequireJs =====
==== bower.json ====
Add RequireJs dependency:
9 "angular": "~1.4.0",
10 "angular-route": "~1.4.0",
11 "angular-loader": "~1.4.0",
12 "angular-mocks": "~1.4.0",
13 "angular-ui-router": "latest",
14 "html5-boilerplate": "~5.2.0",
15 "font-awesome": "4.3.0",
16 "requirejs": "latest",
17 "requirejs-domready": "latest"
==== index.html ====
MaXo36.com
Angular seed app: v
===== angular-ui-router =====
* https://jaxenter.com/building-modular-applications-with-angularjs-115590.html
==== Issiue ====
Description: navigation to child state not auto loading parent state. This seems to be default behaviour so redesign url navigation?
https://bitbucket.org/thuydang/maxo36_template/issues/1/url-design-with-ui-router
**Future issues on git remote**
===== ocLazyload =====
==== Add dependency ====
bower.json
resolve to 1.0.6
"oclazyload": "~1.0.0",
main.js
paths: {
'ocLazyLoad': './oclazyload/dist/ocLazyLoad.min',
},
shim: {
'ocLazyLoad': {
deps: ['angular']
},
app.js
define([
//'jquery',
'angular',
'angular-loading-bar',
'angular-bootstrap', // ui.bootstrap module
'angular-ui-router',
'ocLazyLoad',
//'chart',
//'NeXt',
//'angular-route', --> disabled for the sake of ui-router
//'./components/directives/index',
//'./components/filters/index',
//'./components/services/index',
//'./components/controllers/index'
], function (/*$, jquery*/ ng /*angular*/) {
'use strict';
// return angular module named 'app' in angular way. The dependency
// list is in [].
return ng.module('maxo36App', [
'ui.router',
'ui.bootstrap',
'angular-loading-bar',
'oc.lazyLoad',
// 'ngRoute' --> disabled for the sake of ui-router
//'app.services',
//'app.filters',
//'app.directives',
//'app.controllers',
]);
});
==== Us ocLazyload to resolve modules in ui-router ====
routes.js