Basic setup of Yeoman for use with Angular and Gulp
Use Yeoman and the gulp-angular generator to start the project. Installation instructions can be found here.
For the yo gulp-angular <appname> command I chose these options:
angular-cookies angular-touch jQuery 2.x Restangular UI Router Bootstrap official jQuery version of Bootstrap Sass (Node.js)
Test out the sample Yeoman app by running
gulp server
Bootstrap has a number of example templates and I'd like to use the Navbar Fixed Top template as a starting point for my project.
Copy the <nav> block into src/app/components/navbar/navbar.html replacing the <div> blocks between the navbar and the footer.
[html linenumbers=false]
<nav class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
<header class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-3" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="#">UI Bootstrap</a>
</div>
<nav class="hidden-xs">
<ul class="nav navbar-nav">
<a href="#top" role="button" class="navbar-brand">
TeeSheet
</a>
<li class="dropdown" dropdown="">
<a role="button" class="dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
Directives <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#accordion">Accordion</a></li><li><a href="#alert">Alert</a></li><li><a href="#buttons">Buttons</a></li><li><a href="#carousel">Carousel</a></li><li><a href="#collapse">Collapse</a></li><li><a href="#datepicker">Datepicker</a></li><li><a href="#dropdown">Dropdown</a></li><li><a href="#modal">Modal</a></li><li><a href="#pagination">Pagination</a></li><li><a href="#popover">Popover</a></li><li><a href="#progressbar">Progressbar</a></li><li><a href="#rating">Rating</a></li><li><a href="#tabs">Tabs</a></li><li><a href="#timepicker">Timepicker</a></li><li><a href="#tooltip">Tooltip</a></li><li><a href="#typeahead">Typeahead</a></li>
</ul>
</li>
<li><a href="#getting_started">Getting started</a></li>
</ul>
</nav>
<nav class="visible-xs in" collapse="!isCollapsed" style="height: auto;">
<ul class="nav navbar-nav">
<li><a href="#getting_started" ng-click="isCollapsed = !isCollapsed">Getting started</a></li>
<li><a href="#directives_small" ng-click="isCollapsed = !isCollapsed">Directives</a></li>
</ul>
</nav>
</div>
</div>
</header>
</nav>
[/html]
I'd like to present the login screen first, so I'll copy the contents of the <body> block from the Bootstrap example template and replace the contents of src/app/main/main.html with this.
[html linenumbers=false]
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
[/html]
You should see the main.html updated
Add the following to the index.scss file insert padding at the top of the body:
body {
padding-top: 60px;
}