Web Development with AngularJS and Bootstrap

Use dynamic AngularJS code and Bootstrap styling to create effective web applications
3.8 (8 ratings)
Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
91 students enrolled
80% off
Take This Course
  • Lectures 20
  • Length 2 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 English

Course Description

AngularJS is an open source JavaScript library built by Google that allows you to extend and dynamically change HTML. Bootstrap is an open source set of styling rules and components built by Twitter to make building web pages quick and easy. With AngularJS and Bootstrap joining forces, we get tools to quickly and easily create interactive and dynamic websites that look and behave similar to popular websites.

This video course will take you through a journey of building your first web application with AngularJS and Bootstrap. Each video will build on the functionality already learned in the previous video, always leaving you with a new feature of the running application.

Starting with no knowledge of AngularJS or Bootstrap, you will build up your knowledge through practical examples covered throughout the course. You will cover topics including external libraries to improve the ease of use, dynamic data bindings, dynamic styling, multi-view pages, form feedback, and AJAX form submission.

By the end of the video course, you will be able to successfully build a fully functioning web application.

About the Author

Simeon Cheeseman is a JavaScript developer primarily focussed on AngularJS and NodeJS. He started off his career coding Coldfusion HTML pages before teaching himself AngularJS and later NodeJS as they started getting traction. He has been employed building a variety of web-based applications from content management systems, phone bill re-rating programs, customer resource management, and billings systems. He is currently heavily involved in several open source AngularJS projects and when he has the time, he helps out on StackOverflow and Wizperts.

What are the requirements?

  • No prior exposure to AngularJS, Bootstrap, or similar libraries is needed. Some CSS knowledge is useful but not essential.

What am I going to get from this course?

  • Explore the documentation for AngularJS and Bootstrap
  • Navigate through the basic steps to get going with AngularJS and Bootstrap
  • Use AngularJS and Bootstrap to validate and display feedback on forms
  • Display multiple views without needing to refresh the page
  • Implement AngularJS’ AJAX POST and GET functions to send and receive data
  • Excel at one way and two way bindings to display and store data from the user
  • Display repeating data dynamically
  • Create filters to format data according to your expectations
  • Utilize third-party modules to improve the look and feel of your application

Who is the target audience?

  • If you are a developer with an intermediate knowledge of JavaScript and HTML, this is the course for you.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Getting Started: Strapping Your Boots

An overview of the course will be presented, and the presenter will be introduced.


How Bootstrap and AngularJS improve the classic HTML Input field?

Set up a very basic AngularJS and Bootstrap web page as a basis for the rest of the course.
Section 2: Asking Users in a Good Way; Getting Inputs
Introduce the input as read by Bootstrap and AngularJS.
Use Bootstrap and AngularJS to show the user feedback on the input's validity.
What is ngModel and how can it be used?

Integrating open-source libraries into your application.

Section 3: You Shall Not Pass! Respecting Requirements

Use AngularJS and Bootstrap to prevent a user from clicking a button when the form is invalid.

Understanding form and ng-submit and how they relate relate to how the data is sent.

How to submit a form via Ajax over the $http service and how to simulate this for testing?

Use feedback to display the current state of the form and its submission process.
Section 4: Turning a New Leaf; Adding a Second Page

What is routing and why do we need it?


How to make a route change and react to it?


Use a service to share data between routes.


Use CSS animations to give nice transitions to route changes.

Section 5: I Can See!! Displaying Data
Use ng-repeat to display an array of objects.
Use the filters to display the data in a more user friendly way.
Using buttons and input inside ng-repeat to interact with the data.
Section 6: Shiny Trinkets! Adding Visual Spice
What is AngularStrap and how do we use it?

Using AngularStrap to create a better user interface for the user.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course