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


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