13 May 2015

Yeoman and Angular with Gulp

Basic setup of Yeoman for use with Angular and Gulp

Install Yeoman and the Gulp Angular Generator

Use Yeoman and the gulp-angular generator to start the project. Installation instructions can be found here.

Create a Sample Angular Bootstrap Project

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

Copy an Example Bootstrap Template

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

Update index.scss

Add the following to the index.scss file insert padding at the top of the body:

body {
  padding-top: 60px;
}

Tags:
0 comments