Yeoman and Angular with Gulp

Posted by {"display_name"=>"greg", "login"=>"greg", "email"=>"", "url"=>""} on May 13, 2015 · 2 mins read

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:


jQuery 2.x


UI Router


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>
<a class="navbar-brand visible-xs" href="#">UI Bootstrap</a>
<nav class="hidden-xs">
<ul class="nav navbar-nav">
<a href="#top" role="button" class="navbar-brand">
<li class="dropdown" dropdown="">
<a role="button" class="dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
Directives <b class="caret"></b>
<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>
<li><a href="#getting_started">Getting started</a></li>
<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>


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">
<input type="checkbox" value="remember-me"> Remember me
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>


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;