AngularJs with Bootstrap in Action
4.6 (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.
322 students enrolled
Wishlisted Wishlist

Please confirm that you want to add AngularJs with Bootstrap in Action to your Wishlist.

Add to Wishlist

AngularJs with Bootstrap in Action

From beginners to expert level in 15 hours. Learn from a developer writing code and executing it.
4.6 (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.
322 students enrolled
Created by Marcos Costa
Last updated 6/2017
English
Current price: $12 Original price: $175 Discount: 93% off
3 days left at this price!
30-Day Money-Back Guarantee
Includes:
  • 15.5 hours on-demand video
  • 13 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Build websites from scratch using AngularJs
  • Use Browserify and import a single js into index html
  • Create Server using NodeJS
  • Applying Bootstrap styles into AngularJS applications
  • Develop complex applications from scratch using AngularJs
  • Learn the perks of AngularJS
  • Write a Blog from scratch using AngularJS, Bootstrap, Browserify, Toastr and NodeJS
View Curriculum
Requirements
  • Having a basic understanding of HTML also helps but it is also not mandatory
  • Understanding "if" and loops clauses helps but are not mandatory
Description

If you heard about directives, scope, routes, Dependency Injection, Browserify, bootstrap,controllers, factories ... and you have no idea or not quite sure what they are or how to use them or you just want to learn AngularJS then this course is for you.

This course was designed for either new or existing developers. All the sections and lectures are split in a way that will help you get the most of this course which no boring sections.

You will not just learn AngularJS but you will understand it. Learn from whom works with it on a daily bases and have the passion to coach ( that would be me lol ).

All the code is written on each lecture and explained as we write it. 
Every section has one "introduction" and one "overview and download" lectures which helps to prepare you for what is coming and to wrap it up with what we just learned. 

There are 10 projects to be developed with you on the fly and if you feel like skipping it no worries you can always download it.

For the last project we will create a nice Blog application using Bootstrap, toastr which can be seen on the last free preview.

Angular 4 is there but many companies cannot move even to Angular 2 because of compatibility. This will teach you from the basic $scope to the complex stuff like routing, services, multiple controllers, using date filter, promises and much more.

I hope you join me on this adventure.

Feel free to watch the introduction video and the previous available.

Cheers

Marcos Costa

Who is the target audience?
  • Anyone who wants to learn AngularJs
  • Interested in apply Browserify into the AngularJS application
  • Developers seeking to improve their skills
  • Existing AngularJS developers seeking to refine their understanding of AngularJS
Compare to Other AngularJS Courses
Curriculum For This Course
132 Lectures
15:33:47
+
Installation
3 Lectures 08:01

This is the introduction of this course

Preview 01:14

This is a introduction lecture to help you understand how to get the most of this course.

How to Get the Most of This Course
04:41

On this lecture we will download and install the awesome Atom editor. It is an opensource editor developed by the GitHub team.

Preview 02:06
+
first Application
3 Lectures 17:12

On this lecture I will give you a short introduction of what to expect from this section.

Preview 02:15

Creating Hello World
05:20

Bootstrapping the Hello World
09:37
+
AngularJs Basic Directives and Scope
6 Lectures 30:48

On this lecture I will give you a short introduction of what to expect from this section about the basic angularJS tags.

Preview 02:22

On this lecture you will learn what ng-app does. We will mess with the code for you to understand it better,

ng-app Directive
07:31

On this lecture you will learn what is the function of the tag ng-controller.

Preview 05:18

On this lecture you will learn the importance of the $scope and we will play with it coding some examples.

$scope
06:02

On this lecture you will learn what the $rootScope is and when to use it.

$rootScope
02:11

On this lecture you will learn ng-repeat. It will loop through arrays and display on the screen.

ng-repeat Directive - Iterating Over Arrays
07:24
+
Event Directives
13 Lectures 01:10:59

On this lecture I will give you a short introduction of what to expect from this section about the event directives.

Introduction
02:42

On this lecture we will create a new app which will be responsible to show a documentation with all the event directives that we will learn on this section.  It is available for download on the last lecture of this section

Creating Documentation page for the Event Directives
08:02

On this lecture we will write one example of the ng-click in action and add it to the documentation application.

Preview 07:36

On this lecture we will write one example of the ng-change in action and add it to the documentation application.

ng-change Directive
06:26

On this lecture we will write one example of the ng-focus and add it to the documentation application.

ng-focus Directive
06:42

On this lecture we will write one example of the ng-blur in action and add it to the documentation application.

ng-blur Directive
02:03

On this lecture we will write one example of the handy ng-copy event in action and add it to the documentation application.

ng-copy Directive
02:40

On this lecture we will write one example of the handy ng-cut event in action and add it to the documentation application.

ng-cut Directive
01:44

On this lecture we will write one example of the handy ng-paste event in action and add it to the documentation application.

ng-paste Directive
02:44

On this lecture just for fun we will write one example of the ng-dblclick event in action and add it to the documentation application.

ng-dblclick Directive
02:33

On this lecture you will learn about the keyboard events
ng-keyup
ng-keydown
ng-keypress. 

We will also add the example for those into our documentation project

Keyboard Event Directives
10:35

On this lecture you will learn about the events related to mouse. being them:
ng-mouseup
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mouseover
ng-mousemove.

We will also add the example for those into our documentation project

Mouse Event Directives
14:26

Small refactor was done and the project is renamed to doc-events.

Download the doc-events project here

Download the Documentation Project
02:46
+
Conditional Directives
7 Lectures 35:14

On this lecture I will give you a short introduction of what to expect from this section about the conditional tags.

Preview 02:20

On this lecture we will create the documentation page for the conditional directives. It is available for download on the last lecture of this section.

Creating Document Page for The Conditional Directives
03:42

On this lecture you will learn how to use the conditional ng-if.

ng-if Conditional Directive
06:58

On this lecture you will learn how to use ng-hide and we will add it to the documentation project.

ng-hide Directive
03:44

On this lecture you will learn how to use ng-show and we will add it to the documentation project.

ng-show Directive
05:38

On this lecture you will learn the awesome ng-class. We will test it in two cool ways while including it into our documentation project

ng-class Conditional Style Directive
10:52

On this lecture we will overview what was learned and you have the download ready for you.

Overview and Download
02:00
+
Dependency Injection
8 Lectures 57:56

On this lecture I will give you a short introduction of what to expect from this section about Dependency Injection. This is widely used in Angular so don't miss it.

Preview 02:37

On this lecture we will create a project that will work as a reference and study board for the lectures of this section.

Creating DI Project
04:55

On this lecture you will learn how controller works and a few ways to inject dependencies on it.

Controllers in Action
15:22

On this lecture we will apply the same code into multiple controllers with different data into the same page and see what happens.

Multiple Controllers in Action
05:36

On this lecture you will learn what is a factory in AngularJs. We will code one example and refactor our controllers.

Factory in Action
10:01

On this lecture we will code a service and understand the difference between service and factory.

Services in Action
05:35

On this lecture we will learn and code the prototype and inheritance. We will code a nice example.

Prototype and Inheritance
08:22

On this lecture we will do a quick overview of the section and there is also available the "di" project coded during the lectures of this section.

Overview and Download
05:28
+
Creating and Submitting Forms
12 Lectures 01:31:14

On this lecture I will give you a short introduction of what to expect from this section about creating and submitting forms..

Preview 03:06

On this lecture we will create a project that will have all the examples documented for the lectures of this section.

Creation Documentation Project for Forms
04:40

This lecture will show you in more detail what does ng-model do. We will also add it to our documentation awesomeness.

ng-model Directive
10:54

On this lecture we will apply the ng-disabled directive to some form fields and add to our awesome documentation project.

ng-disabled Directive
04:13

On this lecture we will write a form with a ng-submit example to explain what is does. 

ng-submit Directive
09:07

On this lecture we will change the values for the checkboxes. We will use ng-true-value, ng-false-value and add the example to our documentation.

Checkboxes Changing the Default (true, false)
08:03

On this lecture you will learn how to load a list of options into your <select> object or dropdown. also two different ways to retrieve the selected option one by the array object and another by the single value 

ng-options
13:39

On this lecture you will learn how to pre-select an option into a dropdown. You will understand the difference between selecting the default of a dropdown that has just the value and the other that returns the item of the array used to create the list of <option>

Dropdown Default Selection
08:37

On this lecture we will learn how to make a field required and how to check it it is valid using $valid

Using required and $valid
08:03

On this lecture you will learn how to grab the current state of a input field. Being it on of those

  • $untouched 
  • $touched 
  • $pristine 
  • $dirty 
  • $invalid 
  • $valid 
Input States
10:03

On this lecture you will learn how to grab the current state of the form. Being it on of those

  • $pristine 
  • $dirty 
  • $invalid 
  • $valid 
Form States
04:07

On this lecture we will go through all the lectures learn on this section and do a quick recap. 

We will also refactor the last lecture to fix the conflict with the first lecture.

And don't forget to download the Project we created on this section

Overview and Download
06:42
+
NodeJs and NPM
8 Lectures 44:13

On this lecture I will give you a short introduction of what to expect from this section about npm.

Preview 02:44

On this lecture we will install NodeJS

installing NodeJs
05:15

On this lecture we will learn npm init by using it to create a new project

npm init
03:25

On this lecture we will explore the npm install command line as well as understand the importance of the package.js

npm install
08:33

On this lecture we will install ExpressJS and more packages needed to start a server on localhost. We will also develop the code for the server to start and test it.

Creating localhost using ExpressJS
10:14

On this lecture we will create out first REST API. We will implement the GET method which will return a predefined JSON.

As a bonus we will use a module installed by npm that will make the server reload every time the code changes so we don't need to do it manually.

Create REST API (GET method)
04:50

On this lecture you will leran how to add a route into the server to our AngularJs application

Adding Route to the Angular App
05:36

This lecture will be an overview of all you have learned on this section.

Also feel free to download the code we have done together on this section.

Overview and Download
03:36
+
Browserify - Combine Your js Files
6 Lectures 28:08

On this lecture I will give you a short introduction of what to expect from this section about Browserify. It will make life easier and cleaner for you..

Preview 02:11

On this section we will create a project to understand what is the problem that we are trying to solve and how Browserify can help us.

Creating Browserify Project
05:07

On this section you will understand how to use require and how to use exports.

Using Require and Exports
06:05

On this lecture you will learn how to execute Browserify. We will also change the index.html to import a single js file as opposed as many as we did before.

Executing Browserify
07:56

On this lecture we will add browserify command line into package.json so we can execute as npm run build.

We will also clean up a little bit our application.

Adding Browserify into Package.json
03:07

On this lecture we will do a quick overview of what we have learned on this section.

You can also download the project created in here.

Overview and Download
03:42
+
Directives
18 Lectures 02:25:11

On this lecture I will give you a short introduction of what to expect from this section about Directives.

Preview 02:34

On this lecture you will understand what is a directive and when to use it.

What are Directives
03:15

On this lecture we will create the project  that will be used on this whole section. We will also configure a NodeJS server so we can use it as localhost.

Creating Directives Project
13:35

On this lecture we will create our first directive to have a feel of what it is and how to use it and we will learn the detail of it on the next lectures of this section.

This directive will create the documentation sections that we have been copying and pasting on the previous sections.

Creating out first Directive
13:23

On this lecture you will learn what is a element directive and how it is used. We will add it to our document project.

Element Directive
09:40

On this lecture you will learn what is a attribute directive and how it is used. We will add it to our document project.

Attribute Directive
04:48

On this lecture you will learn what is a class directive and how it is used. We will add it to our document project.

Class Directive
03:03

On this lecture you will learn what is a comment directive and how it is used. We will add it to our document project.

Comment Directive
03:55

On this lecture you will learn what is the difference between template and templateUrl coding some examples and adding to our documentation.

template and templateUrl
10:41

On this lecture we will create an isolate scope and test the differences between Isolated or shred from the controller

Isolate Scope
09:29

On this lecture you will learn what the =(Equals) when used to receive attributes on the isolated scope.

We will code sample and add to our documentation.

= (Equals) Attribute on the Scope
07:58

On this lecture you will learn what the @(At) when used to receive attributes on the isolated scope.

We will code sample and add to our documentation.

@ (At) Attribute on the Scope
03:03

On this lecture you will learn what the &(Ampersand) when used to receive attributes on the isolated scope.

We will code sample and add to our documentation.

& (Ampersand) Attribute on the Scope
07:05

On this lecture you will learn how to preserve data from the innerHTML of the directive after the directive is compiled.

ng-transclude and transclude
08:38

On this lecture you will learn ho to implement a controller inside the directive so you can create functions and attributes that are used to make the directive function the way you want.

Directive Controllers
09:42

On this lecture you will learn how to use the link function and what is the difference and order of execution against the directive controllers.

We will create examples that change the DOM and receive elements and attributes made up by us.

Directive Links
12:09

On this lecture you will learn how to use the compile function and we will show the order in which the pre-link and post-link are loaded. We will also add a controller for fun.

Compile Function using pre-link and post-link Methods
13:44

On this lecture we will overview everything you have learned on this section.

You also can download the project directives created during this section with the document and all the lecture classes coded.

Overview and Download
08:29
4 More Sections
About the Instructor
Marcos Costa
4.6 Average rating
31 Reviews
690 Students
3 Courses
Tech Lead Engineer

Passionate about developing software and learning new things. I am always learning. I've being developing software for the past 17 years and I am still in love with it. I am originally from Brazil, Moved to Australia for work and currently I am living in America. I have a one year old son and a beautiful wife that supports me on my long hours of work and crazy journeys on new businesses. She also supports me on my craziness for buying stuff online to make some of my inventions to install on my car.

Of course I have a few hobbies besides development that are cars, adrenaline sports and cooking.

"If you don't know how to do something then learn and do it anyway"
"Always improve yourself" 

I hope you enjoy my courses.