AngularJS: Write It Like A Pro
4.1 (15 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.
150 students enrolled
Wishlisted Wishlist

Please confirm that you want to add AngularJS: Write It Like A Pro to your Wishlist.

Add to Wishlist

AngularJS: Write It Like A Pro

Write a front end application using AngularJS Modules, Controllers, Directives, Services, Custom Directives with API's
4.1 (15 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.
150 students enrolled
Last updated 8/2015
English
Current price: $10 Original price: $20 Discount: 50% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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
View Curriculum
Requirements
  • Good Internet Connection
  • IDE
  • Know Before You Go: HTML, JavaScript and CSS.
  • Beer, Wine and Patience
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?

Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 48 Lectures Collapse All 48 Lectures 06:04:57
+
Introduction
1 Lecture 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.

Preview 02:18
+
The Basics Of AngularJS
8 Lectures 33:05

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.

Preview 04:42

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

Preview 00:41

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.

Preview 05:49

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

Modules: Organizing and Encapsulating with Containers
02:40

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.

Controllers: Delegate, Delegate, Delegate
02:55

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!


Troubleshooting: Doesn't Work? Try this
02:11

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
Intro to Built-In Directives: Extending HTML Using Angular
07:24

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
Angular Expressions: Working With Data
06:43

The Easy One Quiz
11 questions
+
Introducing Dynamic Behavior With Directives
8 Lectures 31:45

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.

Built-in Directive: ng-app
05:57

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.

Built-in Directive: ng-controller
07:27

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.

Built-in Directive: ng-click
05:40

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.

Built-in Directive: ng-repeat
05:07

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).

Built-in Directive: ng-show
02:08

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.

Built-in Directive: ng-hide
01:16

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.

Built-in Directive: ng-class
01:30

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.

Built-in Directive: ng-switch
02:40

Ain't No Joke Challenge: Built-in Directive Review
7 questions
+
Interactions With Angular Forms
5 Lectures 17:04

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.

Updating Angular to 1.3.x
00:47

We define:

  • Angular Models
  • Angular Model Syntax
  • Defining models on Controllers
  • Creating two way bindings
  • Demonstrate and example
  • Integrate models into our form.
Working With Angular Models
04:39

In this section, we define the following:

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

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.

Manipulation With Angular Form States
02:33

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
Angular Form Validations
06:06

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

The Easy Angular Form Quiz
6 questions
+
Giving Your App Some Style
8 Lectures 02:00:28

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
Setting Up Bootstrap
10:43

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
Enhancing Our Search Feature
16:08

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
Designing the Layout
19:57

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
Adding Spinner Animations
19:07

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.

Integrating Animate.css
11:28

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.

Creating Multiple Themes
09:55

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!!!!!
Sorting And Filtering With Angular
16:14

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!

The Final Frontier: Checking Our Responsive Theme
16:56
+
This Ain't Hello World Anymore...Server Runtime
3 Lectures 09:38

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.

Running Our Application On A Local Server Intro
01:46

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.

Downloading NodeJS
00:18

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
Running HTTP-SERVER
07:34

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

Running Your Application Quiz
3 questions
+
Extending HTML with YOUR OWN Directives
5 Lectures 01:00:29

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.

Abstracting Our Results To Our First Custom Directives
18:58

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
An Advanced Directive...Part I
10:19

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.

An Advanced Directive...Part II
19:59

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.

Reusing Our Bootstrap-Calendar Directive
05:39

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!!

Search Form Transitioning With Directives and Controllers
05:34

Creating Custom Directives
6 questions
+
Angular Services
9 Lectures 01:29:37

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.
Angular Services 101
07:26

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
Google Places Overview
20:00

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.

Enhancing our Search Using Google Places Autocomplete
07:57

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.

Creating A Near By Search Custom Directive Part I With Angular Services
11:40

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

Making Our Custom Directive Location Aware With HTML5
06:11

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.

Creating Our Custom Directive Part 2 With Angular Services
13:45

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.

Creating A Custom Directive Part 3 With Angular Services
11:24

This section gives you a high level overview of where to go from here if you want to take it to the next level!!
What If I Wanted To Integrate With Hotels.com or TripAdvisor?
02:55

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.

Creating a Custom Directive Part 4
08:19
+
Finale!
1 Lecture 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.

Conclusion
00:35
About the Instructor
Michael E. Vargas JR
4.4 Average rating
44 Reviews
1,423 Students
4 Courses
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.