Last active
August 29, 2015 14:16
-
-
Save LoganArnett/cccd395307837d6e4801 to your computer and use it in GitHub Desktop.
Basic Firebase Demo with '1.0.0' update
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html class="no-js" ng-app="randomInfo"> | |
<head> | |
<meta charset="utf-8"> | |
<title>randomInfo</title> | |
<meta name="description" content=""> | |
<meta name="viewport" content="width=device-width"> | |
<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> | |
<!-- build:css({.tmp/serve,src}) styles/vendor.css --> | |
<link rel="stylesheet" href="app/vendor.css"> | |
<!-- bower:css --> | |
<!-- run `gulp wiredep` to automaticaly populate bower styles dependencies --> | |
<!-- endbower --> | |
<!-- endbuild --> | |
<!-- build:css({.tmp/serve,src}) styles/app.css --> | |
<!-- inject:css --> | |
<!-- css files will be automaticaly insert here --> | |
<!-- endinject --> | |
<!-- endbuild --> | |
</head> | |
<body> | |
<!--[if lt IE 10]> | |
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> | |
<![endif]--> | |
<div ui-view></div> | |
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> | |
<script> | |
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= | |
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; | |
e=o.createElement(i);r=o.getElementsByTagName(i)[0]; | |
e.src='//www.google-analytics.com/analytics.js'; | |
r.parentNode.insertBefore(e,r)}(window,document,'script','ga')); | |
ga('create','UA-XXXXX-X');ga('send','pageview'); | |
</script> | |
<!-- build:js(src) scripts/vendor.js --> | |
<!-- bower:js --> | |
<script src="../bower_components/jquery/dist/jquery.js"></script> | |
<script src="../bower_components/lodash/dist/lodash.compat.js"></script> | |
<script src="../bower_components/angular/angular.js"></script> | |
<script src="../bower_components/restangular/dist/restangular.js"></script> | |
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script> | |
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> | |
<script src="../bower_components/firebase/firebase.js"></script> | |
<!-- endbower --> | |
<!-- endbuild --> | |
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script> | |
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js --> | |
<!-- inject:js --> | |
<script src="app/index.js"></script> | |
<script src="app/main/main.controller.js"></script> | |
<!-- endinject --> | |
<!-- inject:partials --> | |
<!-- angular templates will be automatically converted in js and inserted here --> | |
<!-- endinject --> | |
<!-- endbuild --> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
angular.module('randomInfo', ['restangular', 'ui.router', 'ui.bootstrap', 'firebase']) | |
.config(function ($stateProvider, $urlRouterProvider) { | |
$stateProvider | |
.state('home', { | |
url: '/', | |
templateUrl: 'app/main/main.html', | |
controller: 'MainCtrl', | |
controllerAs: 'app' | |
}); | |
$urlRouterProvider.otherwise('/'); | |
}) | |
; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
angular.module('randomInfo') | |
.controller('MainCtrl', function ($firebaseArray, $firebaseObject) { | |
var self = this; | |
var userInfo = new Firebase('https://randominfo.firebaseio.com/Users/Owners'); | |
this.obj = $firebaseArray(userInfo); | |
console.log(this.obj) | |
this.userArray = {}; | |
this.newUser = { | |
name: '', | |
email: '', | |
age: '', | |
color: '', | |
framework: 'AngularJS YO!', | |
jQuery: 'NO!' | |
}; | |
this.addUser = function(user){ | |
this.obj.$add(user); | |
return this.newUser = { | |
name: '', | |
email: '', | |
age: '', | |
color: '', | |
framework: 'AngularJS YO!', | |
jQuery: 'NO!' | |
}; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<div ng-include="'components/navbar/navbar.html'"></div> | |
<div class="jumbotron text-center"> | |
<h1>Random Info</h1> | |
<form ng-submit="app.addUser(app.newUser)" class="random" > | |
<div class="col-xs-12 col-md-6"> | |
<label>Name:</label> | |
<input type="text" value="name" placeholder="Name" ng-model="app.newUser.name" required> | |
</div> | |
<div class="col-xs-12 col-md-6"> | |
<label>Email:</label> | |
<input type="email" value="email" placeholder="Email" ng-model="app.newUser.email" required> | |
</div> | |
<div class="col-xs-12 col-md-6"> | |
<label>Age:</label> | |
<input type="number" value="age" placeholder="Age" ng-model="app.newUser.age" required> | |
</div> | |
<div class="col-xs-12 col-md-6"> | |
<label>Favorite Color:</label> | |
<input type="text" value="color" placeholder="Favorite Color" ng-model="app.newUser.color" required> | |
</div> | |
<div class="col-xs-12 col-md-6"> | |
<label>Favorite Framework:</label> | |
<input type="text" value="framework" placeholder="AngularJS?" ng-model="app.newUser.framework" required> | |
</div> | |
<div class="col-xs-12 col-md-6"> | |
<label>jQuery?:</label> | |
<input type="text" value="jQuery" placeholder="jQuery?" ng-model="app.newUser.jQuery" required> | |
</div> | |
<div> | |
<button class="btn btn-success">Submit</button> | |
</div> | |
</form> | |
</div> | |
<div class="main-content"> | |
<div class="row"> | |
<h2> Users</h2> | |
<div class="col-sm-6 col-md-4" ng-repeat="user in app.obj"> | |
<div class="thumbnail"> | |
<div class="caption"> | |
<h3>{{user.name}}</h3> | |
<p><a ng-href="mailto:{{user.email}}">{{user.email}}</a></p> | |
<p>{{user.age}}</p> | |
<p>{{user.color}}</p> | |
<p>{{user.framework}}</p> | |
<p>{{user.jQuery}}</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment