AngularJS: Write It Like A Pro

Write a front end application using AngularJS Modules, Controllers, Directives, Services, Custom Directives with API's
4.3 (10 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.
137 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 48
  • Length 6 hours
  • Skill Level Intermediate Level
  • 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 7/2015 English

Course Description

In this course, I'm gonna show you how to write a real world application using AngularJS. The first half of this course is targeted for beginners while the second half focuses on more advanced concepts like integrating into 3rd party API's. You will create a hotel listing application that will integrate with any location in the world. We'll cover SPAs and the implementation of them.

We'll talk about:

  • AngularJS: Modules, Built-in Directives, Controllers, Views, Templates, Services and Custom Directives
  • Integrating your application with Bootstrap and making it responsive.
  • Running your application on the node.js platform
  • Integrating with Google API's, Geolocation, Google Maps
  • Chrome Tool techniques, Sublime Text Editor and more

If you like lectures that stress practicality over theory, then this is the one for you.

How are the exercises? Glad you asked. I give you tips on taking this to the next level from a monetizing standpoint and integrating with TravelAdivsor and Hotels[.]com .

How's that for homework?

What are the requirements?

  • Good Internet Connection
  • IDE
  • Know Before You Go: HTML, JavaScript and CSS.
  • Beer, Wine and Patience

What am I going to get from this course?

  • Code: Write a front end application using AngularJS.
  • Write: Modules, Controllers, Directives, Services and Custom Directives
  • Integrate: third party libraries into your app
  • Run: Your App on NodeJS

What is the target audience?

  • Developers: This course is recommended for those how have a decent background in HTML, CSS and JavaScript. It's also encouraged for those who are looking to get into AngularJS by learning the theory and using it to build a Single Page Application (SPA) as part of a given course.
  • Students: This course is recommended for those how have a decent background in HTML, CSS and JavaScript. It's also encouraged for those who are looking to get into AngularJS by learning the theory and using it to build a Single Page Application (SPA) as part of a given course.

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.

Curriculum

Section 1: Introduction
02:18

Michael Edward Vargas Jr., is an American Software Engineer and Entrepreneur who is best known for his ongoing involvement in the development of federal and private enterprise application systems using the best of breed technologies. He is currently a member of the UXD Summit Developer Group (http://uxdevsummit.com/) and Chief Operating Officer of Intellipoint Corporation (http://www.intellipointcorp.net/). He is a huge fan of Douglas Crockford and John Resig for their development in the JavaScript community.


On his mornings, nights and sometimes weekends, he is passionately devoted to the development of real world applications and teaching. Originally, he started out working for Motorola and has gone on to contribute to organizations such as ADT Security Services, Travel Industry Services and the Engility Corporation.

Section 2: The Basics Of AngularJS
04:42

In this lecture, we'll talk about SPA's. Single-Page Applications are conceptually very new and potentially a future trend in web technologies especially because of HTML5. SPA's are different from traditional Model View Controller applications and we'll point out why exactly that is.

00:41

In this lecture, we'll give a high level introduction of AngularJS.

05:49

In this section, we set up our project structure with Angular. We identify what libraries are necessary, where they should be placed and where to specify our own application functionality. We also take a brief tangent on setting up Sublime Text Editor for our own development purposes.

You can download the angular reference libraries and include them into your index.html file. Create the file structure as documented in this lecture.

02:40

Understand What Modules Are...What they Look Like...And How to Define Them!

02:55

Here we define a controller. We answer questions like how to define a controller, specify a given name, where to place the logic for your controller and how to create methods and properties within it.

02:11

To Open Up Your Chrome Tools:

Windows: F12

MAC: CMD + OPT + I

Ever seen this error before?

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.5/$injector/modulerr?p0=hotels&p1=Error%3A%…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.5%2Fangular.min.js%3A29%3A42)


OR, what about this one?

Uncaught Error: [$injector:modulerr] Failed to instantiate module hotels due to:

Error: [$injector:modulerr] Failed to instantiate module due to:

Error: [$injector:nomod] Module '' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

http://errors.angularjs.org/1.2.5/$injector/nomod?p0=

at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:78:12

at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:1524:17

at ensure (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:1449:38)

at module (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:1522:14)

at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:3595:22

at Array.forEach (native)

at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:300:11)

at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:3589:5)

at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:3596:40

at Array.forEach (native)

http://errors.angularjs.org/1.2.5/$injector/modulerr?p0=&p1=Error%3A%20%5B%…F1.2.5%2Fangular.js%3A3596%3A40%0A%20%20%20%20at%20Array.forEach%20(native)

at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:78:12

at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:3623:15

at Array.forEach (native)

at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:300:11)

at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:3589:5)

at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:3596:40

at Array.forEach (native)

at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:300:11)

at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:3589:5)

at createInjector (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js:3529:11)

http://errors.angularjs.org/1.2.5/$injector/modulerr?p0=hotels&p1=Error%3A%….googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.5%2Fangular.js%3A3529%3A11)



In this lecture, we address how to resolve it in less than 5 minutes!


07:24

In this Lecture, Learn how to:

  • Register Your App with Angular
  • Define A Controller And Bind It To A Template
  • Discover shortcuts for controller naming
  • What Angular Expressions are
  • Display Dynamic Data
  • Tuning index.html to support extending HTML
06:43

In this section, we'll cover working with Data Using Built-in Directives like:

  • ng-show
  • ng-hide
  • ng-repeat
  • Working With Arrays
  • Working with mock data
The Easy One Quiz
11 questions
Section 3: Introducing Dynamic Behavior With Directives
05:57

ngApp is the easiest, and most common way to bootstrap an application. We review its definition, the corresponding syntax and an example of using it.

07:27

The ngController directive attaches a controller class to the view. This is a key aspect of how angular supports the principles behind the Model-View-Controller design pattern. We review its definition, the corresponding syntax and some example of using it.

05:40

Modifies the default behavior of the html A tag so that the default action is prevented when the href attribute is empty. We review its definition, the corresponding syntax and some example of using it.

05:07

The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $indexis set to the item index or key. We review its definition, the corresponding syntax and an example of using it.

02:08

The ngShow directive shows or hides the given HTML element based on the expression provided to thengShow attribute. The element is shown or hidden by removing or adding the ng-hideCSS class onto the element. The .ng-hideCSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

01:16

The ngHide directive shows or hides the given HTML element based on the expression provided to thengHide attribute. The element is shown or hidden by removing or adding the ng-hideCSS class onto the element. The .ng-hideCSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

This directive acts as an opposite to ngShow.

01:30

The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.

The directive operates in several different ways, we'll take a look at applying CSS classes based on string evaluation. We'll add styling to our application by creating a visual css class that will be applied provided that a promotion is available.

02:40

In this section, we refactor the existing ngShow/ngHide directives to use the ngSwitch statement. The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression.

We introduce ngSwitch, take a look at an example and then implement the example.

Ain't No Joke Challenge: Built-in Directive Review
7 questions
Section 4: Interactions With Angular Forms
00:47

While working with Angular 1.2 has been fun, we really want to tap into some great stuff in 1.3.x. Angular 1.3.8+ is where the magic is when it comes to working with forms. in this section, you'll learn how easy it is to upgrade our application.

04:39

We define:

  • Angular Models
  • Angular Model Syntax
  • Defining models on Controllers
  • Creating two way bindings
  • Demonstrate and example
  • Integrate models into our form.
02:59

In this section, we define the following:

  • Angular Form Submission Patterns
  • Browser Default Behavior
  • Integrating Angular Forms Into Controllers
02:33

Angular Forms have states which we will learn how to interact with to give us more controller over user behavior. We cover some high level states and then discuss how we can use the form behavior to drive the user experience.

06:06

Its time to tap into that Angular 1.3+ goodness.

In this section, we'll:

  • Update Our Libraries to include ng-messages
  • Update our module dependencies to handle dynamic messaging
  • Look at an example
  • Implement the example
6 questions

This quiz is nice and slow...but don't worry, the next one is gonna be much more fun!

Section 5: Giving Your App Some Style
10:43

In this lecture, we'll

  • Define Bootstrap
  • Integrate Bootstrap into our index.html
  • Introduce ourselves to some common bootstrap classes
  • Use Visual Aids to figure out where things go and how they go there
  • Update our search to use an inline form
16:08

In this lecture we cover:

  • Glyphicons
  • Attaching Glyphicons to input fields
  • Error Messaging Updates
  • Using selects instead of inputs
  • Dealing with form real estate
  • Using .ng-valid and .ng-invalid to style errors visually
19:57

In this section, we'll be transforming our application UI into a modern website. This section will cover ALOT of ground in a short amount of time.

For this section, we'll create:

  • A responsive layout
  • A Cover
  • Thumbnails
  • Ad Containers
  • Additional Styling For Our Existing HTML Markup
19:07

In this section, we'll create a spinner using CSS, HTML and Angular discussing how to creating a spinning circular transition effect when the application loads for the first time. We'll use some existing techniques discussed from the previous section to control when the spinner should display and hide. We'll also introduce the concept of using $scope and $timeout. In addition, we will cover the syntax for angular when passing implicit variables to controllers and callback functions.


In this section, we will NOT COVER:

  • ng-animate
11:28

Next, we'll using a css library called animate.css which will help us create transitions from different states of our application. In particular, our search should present results in a different way providing content to the user that is visually dominant.

In this section, we'll use animate.css and hook the library into angular. Finally, we'll discuss the some other transformations we can use and apply. Lastly, we'll refactor our search availability function to do load our mock data into the response.

09:55

In this section, we'll show how to change themes based on user interaction to apply global styling using angular. Finally, we'll do a few finishing touches before wrapping up the layout.

16:14

In the final lecture of this section, we'll cover sorting and filtering using angular. In addition, we'll also do a little clean up of our template before moving on to angular custom directives.

  • We'll refactor our ads containers
  • Update our application and check its responsiveness
  • Introduce a new row for sorting and filtering controls

    NOTE - THIS SECTION HAS A BUG THAT NEEDS TO BE FIXED BEFORE BEING RELEASED!!!!!
16:56

In this section, we clean up our template by updating some css classes and check the responsiveness of our site.

After that....WE ARE DONE WITH THIS SECTION!

Woot Woot!

Section 6: This Ain't Hello World Anymore...Server Runtime
01:46

We've outgrown running things from the local file system. It's time to setup our local server environment and run our application on the server targeted environment.

In this section, we'll give an introduction to Node.JS awesomeness platform.

Article

In this lecture, you will download and install the NodeJS. To take advantage of alot of the tools we will be using, you must first setup the NodeJS environment as its mandatory.

Once this is completed, we can begin taking advantage of the node package manager to handle runtime dependencies for us.

07:34

With NodeJS installed and out of the way we are now ready to install, configure and run our HTTP-SERVER.

At this end of this lecture, you'll have a:

  • Running Local Server
  • Deployed Application
3 questions

In this quiz, we test how to setup your nodejs environment.

Section 7: Extending HTML with YOUR OWN Directives
18:58

Back to AngularJS!!

In this section, we're going to create our first custom directive that will encapsulate the hotel search results in our hotels.js file. After that, we'll update our templates and create a folder structure to support our new reusable markup which we can leverage.

10:19

In this one, we'll start the development of a calendar directive. We cover the basics before moving on to the more advanced concepts in the next part of this series.

The basics are

  1. Integrate a 3rd party API into our applications manually
  2. Create references to those libraries
  3. Begin developing our calendar directive
19:59

In this part of the series, we'll cover the following options when creating advanced directives:

  • scope
  • transclude
  • link
  • controller
  • controllerAs

We'll also touch on refactoring our html template to use bootstrap-calendar css classes and integrate them into our new html template.

05:39

In this lecture, we'll take a look back at our bootstrap-calendar directive and integrate it with scope so that we can develop and integrate it with multiple uses.

05:34

Now that we have our directives complete, its time to move on to form submissions and return results when we invoke the search availability function. We'll integrate JQuery once more to handle the css transitioning of the search. And after that, its time to move onto the next section....Angular Services!!

Creating Custom Directives
6 questions
Section 8: Angular Services
07:26

Let's talk about Angular Services:

  • Services, Factories and Providers
  • Defining A SearchFactory to abstract our search results into its own container

NOTE - In the resources section, make sure to rename the files to have a .js extension.
20:00

In this section, we'll give an overview of using the Google Places API and talk about:

  • Setting up your Server Key
  • Near By Searches and Place Details Listings using parameters
07:57

In this section, we'll use an existing custom directive and integrate it into our own application. By the end of the section, we will be making suggestions to our users based on the information that they enter into our apps using the power of Google.

11:40

In this section, we'll setup our custom directive and get ready for performing near by searches based off what the user searches for. We'll examine the existing components and how we can use them to enhance and adjust our ads container directive.

06:11

In this section, we'll enhance our custom directive to support geocoding and performing a look up based off the users entered information.

13:45

In this section, we implement the nearby search code which returns all the results in the ads container. In addition, we do a little clean up and prepare for the following section where add additional behavior.

11:24

In this section, we'll make our custom directive provide us additional details we don't currently support by leveraging the Google Places Details API.

02:55
This section gives you a high level overview of where to go from here if you want to take it to the next level!!
08:19

In this section, we refactor our code to support retrieving place details and linking out to the appropriate resort listings. We wrapped all this code inside our callbacks and over our six using standard javascript prevention techniques for avoiding errors and issues.

Section 9: Finale!
00:35

Well, that's it!! I hope you enjoyed taking this course and found it useful and most importantly practical to your everyday routine.

I want to THANK YOU and wish you the best.

Check the dashboard for my office hours and course updates.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Michael E. Vargas JR, Front End Developer/Engineer

Michael Edward Vargas Jr., is an American Software Engineer and Entrepreneur who is best known for his ongoing involvement in the development of federal and private enterprise application systems using the best of breed technologies. He is currently a member of the UXD Summit Developer Group and Chief Operating Officer of Intellipoint Corporation. He is a huge fan of Douglas Crockford and John Resig for their development in the JavaScript community.

On his mornings, nights and sometimes weekends, he is passionately devoted to the development of real world applications and teaching. Originally, he started out working for Motorola and has gone on to contribute to organizations such as ADT Security Services, Interval International and the Engility Corporation.

Ready to start learning?
Take This Course