AngularJS: Write It Like A Pro

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.

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

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.

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

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.

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!

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

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

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.

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.

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.

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.

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

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.

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.

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.

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.

We define:

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

In this section, we define the following:

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

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.

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

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

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

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

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

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.

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.

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

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!

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.

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.

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

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.

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

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.

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.

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

Let's talk about Angular Services:

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

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

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.

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.

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

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.

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.

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.

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.