Table of Contents
AngularJS Template GeoDirectory
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 maxo36template /home/dang/data/workspace/73maxo36/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
<!--[if requirejs]>--> <html lang="en" class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MaXo36.com</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/libs/html5-boilerplate/dist/css/normalize.css"> <link rel="stylesheet" href="assets/libs/html5-boilerplate/dist/css/main.css"> <link rel="stylesheet" href="app.css"> </head> <body> <div>Angular seed app: v<span app-version></span></div> <!-- In production use: <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> --> <div "Maxo36App"> <div ui-view></div> </div> <script src="assets/libs/requirejs/require.js" data-main="main.js"></script> </body> </html>
angular-ui-router
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
