Skip to content

Instantly share code, notes, and snippets.

@techieBrandon

techieBrandon/AngularJS-Lazy-Bootstrap-Example.markdown

Created February 5, 2015 07:13
Show Gist options
  • Save techieBrandon/a0e385016744bca69f15 to your computer and use it in GitHub Desktop.
Save techieBrandon/a0e385016744bca69f15 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS Lazy Bootstrap Example
Raw
AngularJS-Lazy-Bootstrap-Example.markdown

AngularJS Lazy Bootstrap Example

This example shows how to use AngularJS modules to load restful configurations prior to main application bootstrap and sharing a resource across initializer and main application.

A Pen by Brandon Wilburn on CodePen.

License.

Raw
index.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Consumer App</title>
</head>
<body>
<hyla-consumer></hyla-consumer>
</body>
</html>
Raw
script.js
angular.module('hyla-shared', ['ngResource']);
var sharedModule = angular.module('hyla-shared');
angular.module('hyla-initializer', ['hyla-shared']);
var initializerModule = angular.module('hyla-initializer');
sharedModule.provider('i18n', [function(){
var initInjector = angular.injector(["ng"]);
var $http = initInjector.get("$http");
this.$get = function(){
return $http.get("http://consumer-v2-dev.hylatest.com:1234/consumer/v1/init/i18n").then(function(response) {
sharedModule.constant('I18N', response.data);
}, function(errorResponse) {
// Handle error case
console.log(errorResponse);
});
}
}])
initializerModule.config(['i18nProvider', function(i18nProvider){
i18nProvider.$get().then(function(){
angular.element(document).ready(function() {
angular.bootstrap(angular.element(document.body), ['hyla-consumer']);
});
});
}]);
/*initializerModule.factory('i18n',['I18NResource', '$log', function(I18NResource, $log){
$log.debug("Requesting 2I18N from resource");
I18NResource.query().$promise.then(function(i18n){
$log.debug("I18N returned from resource", arguments);
return i18n;
},function(){
$log.error(arguments);
}).finally(function(){
$log.debug("Closing request");
});
return I18NResource.query();
}]);*/
// Declare app level module which depends on filters, and services
angular.module('hyla-consumer', ['hyla-shared']);
/* Controllers */
var module = angular.module('hyla-consumer');
module.run(function($templateCache){
$templateCache.put('templates/com/hyla/consumer/consumer.html', '<div class="container"><hyla-header></hyla-header><div id="page"><hyla-banner></hyla-banner><hyla-footer></hyla-footer></div></div></div>');
$templateCache.put('templates/com/hyla/consumer/header.html','<div id="header"><div class="logo"><img class="responsive" ng-src="http://lorempixel.com/g/400/200/" /></div> <!-- logo --><span class="title">{{i18n.header.section1}}</span></div> <!-- header -->');
$templateCache.put('templates/com/hyla/consumer/banner.html','<div class="col-group"><div class="col col-7-12 no-padding"><div class="col-block no-margin"><div class="col-content"><p class="text-blue no-margin">{{i18n.statementHeader}}</p><ul class="text-blue"><li>{{i18n.bullet1}}</li><li>{{i18n.bullet2}}</li><li>{{i18n.bullet3}}</li></ul><p class="text-blue">It\'s a feel-good, win-win way to get some gear, upgrade or pay your bill!</p></div> <!-- col-content --></div> <!-- col-block --></div> <!-- col --><div class="col col-5-12 large-screen"><div class="col-block no-margin"><div class="col-content no-horizontal-padding"><img class="responsive" src="http://lorempixel.com/g/100/200/" alt="{{i18n.altText}}" title="{{i18n.banner.title}}" /></div> <!-- col-content --></div> <!-- col-block --></div> <!-- col --></div> <!-- col-group -->');
$templateCache.put('templates/com/hyla/consumer/footer.html','<div class="col-group"><div class="col"><div class="col-block"><div class="col-content"><p class="small"><a href="http://about.att.com/content/csr/home/people/serving-our-communities/supporting-our-troops.html" target="_blank">{{i18n.section1}}</a><br /><br /><a href="javascript:void(0)" ng-click="toggleModal()">Terms & Conditions</a></p></div> <!-- col-content --></div> <!-- col-block --></div> <!-- col --></div> <!-- col-group -->');
});
module.controller('ConsumerController', [ '$scope', '$log', 'I18N', function($scope, $log, I18N){
$scope.i18n = I18N.i18n;
}]);
module.controller('HeaderController', [ '$scope', '$log', function($scope, $log){
$log.debug('HeaderController $scope', $scope);
$scope.i18n = $scope.$parent.i18n.header;
}]);
module.controller('BannerController', [ '$scope', '$log', function($scope, $log){
$scope.i18n = $scope.$parent.i18n.banner;
$log.debug('BannerController $scope', $scope);
var Controller = function (configIn) {
var instance = {
_getBannerModel: function(){
return {};
}
};
return{
getBannerModel: instance._getBannerModel
};
};
angular.extend($scope, new Controller());
}]);
module.controller('FooterController', [ '$scope', '$log', function($scope, $log){
$log.debug('FooterController $scope', $scope);
$scope.i18n = $scope.$parent.i18n.footer;
}]);
/* Directives */
module.directive('hylaHeader', [
function(){
return {
link: function ($scope, element, attrs){
console.log('hylaHeader $scope', $scope);
},
scope: {},
restrict: 'E',
replace: false,
controller: 'HeaderController',
templateUrl: 'templates/com/hyla/consumer/header.html'
};
}
]);
module.directive('hylaBanner', [
function(){
return {
link: function ($scope, element, attrs){
console.log('hylaBanner $scope ', $scope);
},
scope: {},
restrict: 'E',
replace: false,
controller: 'BannerController',
templateUrl: 'templates/com/hyla/consumer/banner.html'
};
}
]);
module.directive('hylaFooter', [
function(){
return {
link: function ($scope, element, attrs){
console.log('hylaFooter', $scope);
},
scope: {},
restrict: 'E',
replace: false,
controller: 'FooterController',
templateUrl: 'templates/com/hyla/consumer/footer.html'
};
}
]);
module.directive('hylaConsumer', [
function(){
return {
link: function ($scope, element, attrs){
console.log('hylaConsumer $scope ', $scope);
},
restrict: 'E',
replace: false,
controller: 'ConsumerController',
templateUrl: 'templates/com/hyla/consumer/consumer.html'
};
}
]);
angular.bootstrap(angular.element(document.head), ['hyla-initializer']);
Raw
style.css
body {
background:White;
}
.ng-invalid {
border: 1px solid red;
}
#main {
cursor:default;
margin:0 auto 100px;
padding:10px 25px;
width:580px;
}
#main h1 {
font-size:24px;
padding-left:10px;
}
#main .sCart {
float:right;
padding-right:25px;
}
.sCart .quantity {
font-size:32px;
vertical-align:8px;
}
#items {
clear:both;
}
#main .item {
border:1px solid #999999;
display:inline-block;
margin:0 8px 15px;
width: 170px;
}
.item-int {
margin:0 auto;
padding:10px 0 30px;
}
.item-int h3 {
margin:0;
padding-left:10px;
}
.item-int img {
width:160px;
}
.item-int .data {
margin:5px 0;
text-align:center;
}
.data span {
font-size:12px;
padding:0 10px;
}
.right {
float:right;
}
.left {
float:left;
}
.note {
color:#444444;
font-size:13px;
text-align:right;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment