ng-frame

Readme.md

This is the gist file for ng-frame

ng-frame-a.js

//definition for ng-a
angular.module('ngFrame')
.directive('ngA', function($log, $window){
	return {		
		restrict: 'A',		
		controller: function($scope) {
			$scope.goto = function(page) {
				$scope.$parent.loadPage(page);
			}			
		},
		link: function(scope, el, attrs) {
			var page = attrs.ngA;
			$log.info(el[0].innerHTML);
			if(el[0].tagName.toLowerCase() === 'a') {
				el.bind('click', function(e){
					$log.info('clicked');
					scope.goto(page);
				})
				//.attr('href', 'javascript:void(0)');

			}
			else{
				throw new Error('ngA can only be applied to anchor elements');
			}
		}
	}
})

ng-frame-directive.js

angular.module('ngFrame')
.directive('ngFrame', function($frame, $compile, $controller, $templateRequest) {

	var changeView = function(url, el, scope, ctrl) {
		$templateRequest(url)
			.then(function(tmpl){
				var _scope = scope.$new();
				$controller(ctrl, {'$scope' : _scope});
  			var elem = $compile(tmpl)(_scope);
  			el.empty().append(elem);
			});
	};

	return {
	    scope: {},
	    template: '<div></div>',
	    controller: function($scope) {
	    	var el;
	    	var _frame;

	    	$scope.setFrame = function(frame) {
	    		_frame = frame;
	    	};

	    	$scope.setElement = function(elem) {
	    		el = elem;
	    	};

	    	$scope.changeView = function(url, ctrl) {
	    		changeView(url, el, $scope, ctrl);
	    	};

	    	$scope.loadRoute = function(route) {
	    		if (route.templateUrl) {
	    			$scope.changeView(route.templateUrl, route.controller);
	    		}
	    		else {
	    			//tbd
	    		};
	    	};

	    	$scope.loadPage = function(page) {
	    		var route = _frame.getPageRoute(page);
	    		$scope.loadRoute(route);
	    	}

	    },

	    link: function(scope, el, attrs) {
	    	scope.setElement(el);
	    	var _frame;
	      if ('id' in attrs) {
	        if ($frame.$$exists(attrs.id)) {
	          _frame = $frame.$$get(attrs.id);
	          scope.setFrame(_frame);
	          var route = _frame.getDefaultRoute();

						var change = {
							current: null,
							next: route,
							cancel: false,
						};
						$frame.$$raiseEvent('$frameContentChanging', change);
	          scope.loadRoute(route);
	        }
	        else {
	          throw new Error('Frame definition doesn\'t exist for: ' + attrs.id );
	        }
	      }
	      else {
	        throw new Error('id attribute should be added to ng-frame element');
	      }
	    }
  	};
})

ng-frame-provider.js

angular.module('ngFrame')
.provider('$frame', function(){
  var frames = {};


  var FRAME_TYPE = {
    WIZARD: 0,
    PAGE: 1
  };

  var Frame = function (name){
    this.routes = {};
    frames[name] = this;
    this.frameType = FRAME_TYPE.WIZARD;
    this.name = name;
  };

  this.FRAME_TYPE = FRAME_TYPE;

  Frame.prototype.when = function(routeName, routeDef) {
    this.routes[routeName] = routeDef;

    return this;
  };

  Frame.prototype.setType = function(typeid) {
    this.frameType = typeid;
  };

  Frame.prototype.getDefaultRoute = function() {
    var routes = this.routes;
    var once = false;
    var result;
    for(var x in routes) {
      var route = routes[x];
      if(route.default) {
        result = route;
        break;
      }
      if (!once) {
        once = true;
        result = route;
      };
    }

    return result;
  };

  Frame.prototype.getPageRoute = function(page) {
    var route = this.routes[page];
    if (!!route) {
      return route;
    }
    else {
      throw new Error('Route is undefined: ' + page);
    };
  };

  this.$get = function($rootScope) {
    var factory = {
      $$exists: function(id) {
        return !!this.$$get(id);
      },
      $$get: function(id) {
        return frames[id];
      },
      $$raiseEvent : function(evt, data) {
        $rootScope.$broadcast(evt, data);
      }
    };
    return factory;
  };

  this.create = function(name) {
    return new Frame(name);
  };

});

ng-frame.concat.js

angular.module('ngFrame',[]);
//definition for ng-a
angular.module('ngFrame')
.directive('ngA', function($log, $window){
	return {		
		restrict: 'A',		
		controller: function($scope) {
			$scope.goto = function(page) {
				$scope.$parent.loadPage(page);
			}			
		},
		link: function(scope, el, attrs) {
			var page = attrs.ngA;
			$log.info(el[0].innerHTML);
			if(el[0].tagName.toLowerCase() === 'a') {
				el.bind('click', function(e){
					$log.info('clicked');
					scope.goto(page);
				})
				//.attr('href', 'javascript:void(0)');

			}
			else{
				throw new Error('ngA can only be applied to anchor elements');
			}
		}
	}
})
angular.module('ngFrame')
.directive('ngFrame', function($frame, $compile, $controller, $templateRequest) {

	var changeView = function(url, el, scope, ctrl) {
		$templateRequest(url)
			.then(function(tmpl){
				var _scope = scope.$new();
				$controller(ctrl, {'$scope' : _scope});
  			var elem = $compile(tmpl)(_scope);
  			el.empty().append(elem);
			});
	};

	return {
	    scope: {},
	    template: '<div></div>',
	    controller: function($scope) {
	    	var el;
	    	var _frame;

	    	$scope.setFrame = function(frame) {
	    		_frame = frame;
	    	};

	    	$scope.setElement = function(elem) {
	    		el = elem;
	    	};

	    	$scope.changeView = function(url, ctrl) {
	    		changeView(url, el, $scope, ctrl);
	    	};

	    	$scope.loadRoute = function(route) {
	    		if (route.templateUrl) {
	    			$scope.changeView(route.templateUrl, route.controller);
	    		}
	    		else {
	    			//tbd
	    		};
	    	};

	    	$scope.loadPage = function(page) {
	    		var route = _frame.getPageRoute(page);
	    		$scope.loadRoute(route);
	    	}

	    },

	    link: function(scope, el, attrs) {
	    	scope.setElement(el);
	    	var _frame;
	      if ('id' in attrs) {
	        if ($frame.$$exists(attrs.id)) {
	          _frame = $frame.$$get(attrs.id);
	          scope.setFrame(_frame);
	          var route = _frame.getDefaultRoute();

						var change = {
							current: null,
							next: route,
							cancel: false,
						};
						$frame.$$raiseEvent('$frameContentChanging', change);
	          scope.loadRoute(route);
	        }
	        else {
	          throw new Error('Frame definition doesn\'t exist for: ' + attrs.id );
	        }
	      }
	      else {
	        throw new Error('id attribute should be added to ng-frame element');
	      }
	    }
  	};
})

angular.module('ngFrame')
.provider('$frame', function(){
  var frames = {};


  var FRAME_TYPE = {
    WIZARD: 0,
    PAGE: 1
  };

  var Frame = function (name){
    this.routes = {};
    frames[name] = this;
    this.frameType = FRAME_TYPE.WIZARD;
    this.name = name;
  };

  this.FRAME_TYPE = FRAME_TYPE;

  Frame.prototype.when = function(routeName, routeDef) {
    this.routes[routeName] = routeDef;

    return this;
  };

  Frame.prototype.setType = function(typeid) {
    this.frameType = typeid;
  };

  Frame.prototype.getDefaultRoute = function() {
    var routes = this.routes;
    var once = false;
    var result;
    for(var x in routes) {
      var route = routes[x];
      if(route.default) {
        result = route;
        break;
      }
      if (!once) {
        once = true;
        result = route;
      };
    }

    return result;
  };

  Frame.prototype.getPageRoute = function(page) {
    var route = this.routes[page];
    if (!!route) {
      return route;
    }
    else {
      throw new Error('Route is undefined: ' + page);
    };
  };

  this.$get = function($rootScope) {
    var factory = {
      $$exists: function(id) {
        return !!this.$$get(id);
      },
      $$get: function(id) {
        return frames[id];
      },
      $$raiseEvent : function(evt, data) {
        $rootScope.$broadcast(evt, data);
      }
    };
    return factory;
  };

  this.create = function(name) {
    return new Frame(name);
  };

});

ng-frame.js

angular.module('ngFrame',[]);