My First AngularJS App

Started on 7th Feb 2016 @ 17:00

by Farzad Cyrus

HTML

<html ng-app="stylishWeb">
<head>
<title>Fleet App</title>
<body ng-controller="StylishWebController as stylishWeb">
<div id="header">
  <h1 class="logo">Stylish Web</h1>
</div>
<div id="content">
    <div class="sidebar sidebar-left">
      <h3 class="sidebar-title"></h3>
      <div class="sidebar-section">
      <ul>
      <li></li>
      </ul>
      </div>
    </div>
    <div class="main">Main Content</div>
    <div class="sidebar sidebar-right">Right Sidebar</div>
</div>
<div id="footer">
  <p>Copyright <a href="{{stylishWeb.app.url}}">{{stylishWeb.app.name}}.</a></p>
</div>
</body>
</head>
</html>

CSS

body {
    background:#eeeeee;
    padding:20px;
    margin:0;
    font-family:sans-serif, arial;
    font-size:14px;
    position:relative;
    width:100%;
}
* {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    
    -webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}
.button-group {
    float:right;
    width:auto;
    clear:none;
    display: inline-block;
}
.button-group:first-child {
    float:left;
}
.notification {
    border:1px solid #E67;
    background: #E78;
    padding:20px;
    width:80%;
    height:auto;
    line-height:24px;
    margin:20px auto;
    color:#ffffff;
    float: none;
    clear: both;
}

#content {
    width: 100%;
    height:300px;
    position:relative;
    background:#ffffff;
    border:1px solid #cccccc;
    overflow:hidden;
}
.main,
.sidebar {
    position:relative;
    float:left;
    height:100%;
    padding:40px;
    text-align:center;
    text-transform:uppercase;
}
.main {
    width:100%;
    padding:40px 30%;
}
.sidebar {
    width:30%;
    border-width:0;
    border-color:#cccccc;
    border-style:solid;
    position:absolute;
    top:0;
}
.sidebar-left {
    border-width: 0 1px 0 0;
    left: 0;
}
.sidebar-right {
    border-width: 0 0 0 1px;
    right: 0;
}

.sidebar-left.active {left:0;}
.sidebar-right.active {right:0;}

JavaScript

//(function(){
	var stylishWeb = {
  	name: 'The Fleet App',
    url: 'http://www.fleetapp.com',
    description: 'An app that does everything for you! From management to generating and sharing reports.',
    author: 'Farzad'
  };

	var app = angular.module('stylishWeb', []);
  
  app.controller('stylishWebController', function(){
  	this.app = stylishWeb;
  });
//})();