LoganArnett/index.html

## index.html
<!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>


## index.js
'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('/');
  })
;

## main.controller.js
'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!'
    };
    }

  });

## main.html
<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>&nbsp;&nbsp;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>
	<!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>
	'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('/');
	})
	;
	'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!'
	};
	}

	});
	<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>