Correct!
False!
model service code
<html ng-app="noteriousApp">
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="style.css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl" class="bg-blue">
<header class="navbar-clear" role="banner">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="http://noterio.us/assets/img/logo.png" alt="noterio.us"/>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="blue" href="http://angularjs.org/" target="_blank">AngularJS</a>
</li>
<li>
<a class="blue" href="https://github.com/simpulton/noterious" target="_blank">GITHUB</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</header>
<div id="content-container">
<div class="edit board" ng-repeat="board in boards">
<div class="caption">
<button type="button" class="top-right-corner" ng-click="deleteBoard(board.id)">
<span class="glyphicon glyphicon-remove"></span>
</button>
<div><input type="text" class="medium" ng-model="board.title" placeholder="Board Title"></div>
<div><input type="text" ng-model="board.description" placeholder="Board description."></div>
<div class="bottom x-small"><input type="checkbox" ng-model="board.isPublic"> Board is Public</div>
<a href="#/{{boardId}}" type="button" class="view bottom-right-corner">
<span class="glyphicon glyphicon-arrow-right"></span>
</a>
</div>
</div>
</div>
</body>
</html>
html, body {
height: 100%;
min-height: 100%;
}
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
padding: 10px;
border: 10px solid #f5ead9;
}
.bg-blue {
background: url(http://noterio.us/assets/img//bg-blue.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.navbar-clear a:hover.blue {
color: #4f92a8;
}
.navbar-clear a:hover.green {
color: #87a961;
}
.navbar-clear a:hover.orange {
color: #f6512d;
}
.navbar-clear a:hover.red {
color: #a93d41;
}
.navbar-clear a:hover.yellow {
color: #f4cb48;
}
input:focus, textarea { outline: none !important; }
*, *:before, *:after {box-sizing: border-box !important;}
.navbar-clear {
background: rgb(255, 255, 255); /* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0);
}
.navbar-clear a {
color: #f5ead9;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
.navbar-clear .icon-bar {
background-color: #f5ead9;
}
.navbar-clear .nav>li>a:hover, .navbar-clear .nav>li>a:focus {
text-decoration: none;
background: rgba(245, 234, 217, .6);
}
#content-container {
margin-left: 10px;
}
a.view {
color: #333;
}
a.view:hover, a.view:focus {
color: #333;
}
.x-small {
color: #333333;
font-size: 11px;
}
.medium {
font-size: 18px;
font-weight: bold;
}
.large {
color: #f5ead9;
font-size: 24px;
font-weight: bold;
}
.edit .bottom {
position: absolute;
bottom: 40px;
}
.create .bottom {
position: absolute;
bottom: 56px;
}
.edit .top-right-corner {
cursor: pointer;
position: absolute;
right: 8px;
top: 2px;
background:none;
border:none;
box-shadow:none;
}
.edit .bottom-right-corner {
cursor: pointer;
position: absolute;
right: 14px;
bottom: 22px;
background:none;
border:none;
box-shadow:none;
}
.create .bottom-right-corner {
cursor: pointer;
position: absolute;
right: 8px;
bottom: 38px;
background:none;
border:none;
box-shadow:none;
}
#content-container .board {
display: inline-block;
min-height: 200px;
max-width: 100%;
line-height: 1.428571429;
background-image: url(http://noterio.us/assets/img/note-view.png);
width: 360px;
height: 220px;
padding: 20px;
margin: 0px 15px 0px 0px;
background-repeat: no-repeat;
background-position: top left;
position: relative;
padding-top: 34px;
}
#content-container .note {
display: inline-block;
min-height: 200px;
max-width: 100%;
line-height: 1.428571429;
background-image: url(http://noterio.us/assets/img/note.png);
width: 360px;
height: 220px;
padding: 20px;
margin: 0px 15px 0px 0px;
background-repeat: no-repeat;
background-position: top left;
position: relative;
padding-top: 34px;
}
#content-container .board.create, #content-container .note.create {
background-image: url(http://noterio.us/assets/img/note-create.png);
height: 240px;
}
.edit input[type=text], .edit textarea {
color: #333333;
border: 1px solid #f5ead9;
width: 100%;
resize: none;
background-color: #f5ead9;
}
.create input[type=text], .create textarea {
color: #a69f95;
border: 1px solid #d7cebf;
width: 100%;
resize: none;
background-color: #f5ead9;
}
.edit input[type=text]:hover, .edit textarea:hover,
.edit input[type=text]:focus, .edit textarea:focus {
border: 1px solid #d7cebf;
}
.create fieldset > * {
margin: 2px 0;
}
.create form {
margin: 0px;
}
angular.module('noteriousApp', [])
.controller('MainCtrl', function ($scope, BoardService) {
$scope.boards = BoardService.getBoards();
})
.factory('BoardService', function () {
var boards = [
{"id": "0", "title": "Board 00", "content": "Content pending."},
{"id": "1", "title": "Board 01", "content": "Content pending."},
{"id": "2", "title": "Board 02", "content": "Content pending."},
{"id": "3", "title": "Board 03", "content": "Content pending."},
{"id": "4", "title": "Board 04", "content": "Content pending."}
];
var getBoards = function () {
return boards;
};
return {
getBoards: getBoards
}
});