elsangedy/app.js

## app.js
var app = (function() {
  var App = function() {
    var _modules = {
      controllers: {},
      directives: {},
      constants: {},
      services: {},
      routes: {}
    };

    this.add = addFn;
    this.get = getFn;
    this.has = hasFn;
    this.onRouteChange = onRouteChangeFn;
    this.buildTemplate = buildTemplateFn;

    //---

    function addFn(module, obj) {
      return _modules[module][obj.name] = obj;
    }

    //---

    function getFn(module, name) {
      return _modules[module][name];
    }

    //---

    function hasFn(module) {
      return function(name) {
        return (_modules[module][name] == name);
      }
    }

    //---

    // TODO: review
    function onRouteChangeFn() {
      if(window.location.hash === '') {
        window.location.hash = '/';
        return;
      }

      var hash = window.location.hash.substring(1),
          hashSplit = hash.split('/'),
          rota;

      console.log(hash, hashSplit);

      for(var index in _modules.routes) {
        if(_modules.routes.hasOwnProperty(index)) {
          if(_modules.routes[index].url == hash) {
            rota = _modules.routes[index];
          }
        }
      }


      if(rota) {
        var routeParams = {},
            params = (this.get('controllers', rota.controller)) ?
              this.get('controllers', rota.controller).func(routeParams) :
              routeParams;

        this.buildTemplate(rota.template, params, rota.view);
      } else {
        this.buildTemplate('<div style="text-align:center"><h1>Error 404!</h1><h3>Route Not Foud.</h3></div>');
      }
    }

    //---

    function buildTemplateFn(template, params, view) {
      var matches = template.match(/{{\s*([a-zA-Z0-9_]+)\s*}}/g);

      params = params || {};
      view = document.querySelector('[view="' + view + '"]') || document.body

      if(matches !== null) {
        for(var i = 0, len = matches.length; i < len; ++i) {
          var key = matches[i].replace(/{{/g, ''),
              key = key.replace(/}}/g, ''),
              key = key.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g, '');

          template = template.replace(matches[i], params[key] || '');
        }
      }

      view.innerHTML = template;
    }

  };

  var app = new App();

  // public methods
  App.prototype.controller = addControllerFn;
  //App.prototype.directive = addDirectiveFn;
  //App.prototype.constant = addConstantFn;
  //App.prototype.service = addServiceFn;
  App.prototype.route = addRouteFn;

  App.prototype.hasController = app.has('controllers');
  App.prototype.hasDirective = app.has('directives');
  App.prototype.hasConstant = app.has('constants');
  App.prototype.hasService = app.has('services');
  App.prototype.hasRoute = app.has('routes');
  App.prototype.has = hasFn;

  App.prototype.noop = function(){};

  App.prototype.run = runFn;

  return app;

  //---

  function hasFn(module) {
    return this.has(module);
  }

  //---

  function addControllerFn(name, ctrl) {
    if(app.hasController(name)) return;

    return this.add('controllers', {
      name: name,
      func: ctrl
    });
  }

  //---

  function addRouteFn(name, url, view, tpl, ctrl) {
    if(app.hasRoute(name)) return;

    return this.add('routes', {
      name: name,
      url: url,
      view: view,
      template: tpl || '',
      controller: ctrl || ''
    });
  }

  //---

  function runFn() {
    this.onRouteChange();
    window.addEventListener('hashchange', this.onRouteChange.bind(this), false);
  }
})();

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SPA</title>
</head>
<body>
  <div view="main"></div>

  <script src="app.js"></script>
  <script src="script.js"></script>
</body>
</html>

## script.js
var ctrl = app.controller('MainCtrl', function() {
  var vm = {};

  vm.firstName = 'Munir';
  vm.lastName = 'Ahmed';

  return vm;
});

app.route('home', '/', 'main', '<h1>Home</h1>');
app.route('main', '/alunos/ativos', 'main', '<h1>Hellow World! {{ firstName }} {{ lastName }}</h1>', 'MainCtrl');

app.run();
	var app = (function() {
	var App = function() {
	var _modules = {
	controllers: {},
	directives: {},
	constants: {},
	services: {},
	routes: {}
	};

	this.add = addFn;
	this.get = getFn;
	this.has = hasFn;
	this.onRouteChange = onRouteChangeFn;
	this.buildTemplate = buildTemplateFn;

	//---

	function addFn(module, obj) {
	return _modules[module][obj.name] = obj;
	}

	//---

	function getFn(module, name) {
	return _modules[module][name];
	}

	//---

	function hasFn(module) {
	return function(name) {
	return (_modules[module][name] == name);
	}
	}

	//---

	// TODO: review
	function onRouteChangeFn() {
	if(window.location.hash === '') {
	window.location.hash = '/';
	return;
	}

	var hash = window.location.hash.substring(1),
	hashSplit = hash.split('/'),
	rota;

	console.log(hash, hashSplit);

	for(var index in _modules.routes) {
	if(_modules.routes.hasOwnProperty(index)) {
	if(_modules.routes[index].url == hash) {
	rota = _modules.routes[index];
	}
	}
	}


	if(rota) {
	var routeParams = {},
	params = (this.get('controllers', rota.controller)) ?
	this.get('controllers', rota.controller).func(routeParams) :
	routeParams;

	this.buildTemplate(rota.template, params, rota.view);
	} else {
	this.buildTemplate('<div style="text-align:center"><h1>Error 404!</h1><h3>Route Not Foud.</h3></div>');
	}
	}

	//---

	function buildTemplateFn(template, params, view) {
	var matches = template.match(/{{\s([a-zA-Z0-9_]+)\s}}/g);

	params = params \|\| {};
	view = document.querySelector('[view="' + view + '"]') \|\| document.body

	if(matches !== null) {
	for(var i = 0, len = matches.length; i < len; ++i) {
	var key = matches[i].replace(/{{/g, ''),
	key = key.replace(/}}/g, ''),
	key = key.replace(/(?:(?:^\|\n)\s+\|\s+(?:$\|\n))/g, '');

	template = template.replace(matches[i], params[key] \|\| '');
	}
	}

	view.innerHTML = template;
	}

	};

	var app = new App();

	// public methods
	App.prototype.controller = addControllerFn;
	//App.prototype.directive = addDirectiveFn;
	//App.prototype.constant = addConstantFn;
	//App.prototype.service = addServiceFn;
	App.prototype.route = addRouteFn;

	App.prototype.hasController = app.has('controllers');
	App.prototype.hasDirective = app.has('directives');
	App.prototype.hasConstant = app.has('constants');
	App.prototype.hasService = app.has('services');
	App.prototype.hasRoute = app.has('routes');
	App.prototype.has = hasFn;

	App.prototype.noop = function(){};

	App.prototype.run = runFn;

	return app;

	//---

	function hasFn(module) {
	return this.has(module);
	}

	//---

	function addControllerFn(name, ctrl) {
	if(app.hasController(name)) return;

	return this.add('controllers', {
	name: name,
	func: ctrl
	});
	}

	//---

	function addRouteFn(name, url, view, tpl, ctrl) {
	if(app.hasRoute(name)) return;

	return this.add('routes', {
	name: name,
	url: url,
	view: view,
	template: tpl \|\| '',
	controller: ctrl \|\| ''
	});
	}

	//---

	function runFn() {
	this.onRouteChange();
	window.addEventListener('hashchange', this.onRouteChange.bind(this), false);
	}
	})();
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>SPA</title>
	</head>
	<body>
	<div view="main"></div>

	<script src="app.js"></script>
	<script src="script.js"></script>
	</body>
	</html>
	var ctrl = app.controller('MainCtrl', function() {
	var vm = {};

	vm.firstName = 'Munir';
	vm.lastName = 'Ahmed';

	return vm;
	});

	app.route('home', '/', 'main', '<h1>Home</h1>');
	app.route('main', '/alunos/ativos', 'main', '<h1>Hellow World! {{ firstName }} {{ lastName }}</h1>', 'MainCtrl');

	app.run();