scratchpad

AngularJS Intro:

- extension to html
- what googles vision for "web components" are
  - isolated pieces of html, css, js working to create a rich experience
- can do what other client-side frameworks like backbone/ember can, but offers a lot more
- "data-binding" baked in
- write less, do more

1. Module system

app/js/app.js

angular.module("app", [])

- defines a spot to stick the stuff that belogns in this "application"
- could be scoped smaller
- the [] are intended to list any dependencies that this module might need, more later

2. How do we make our app aware of the app and "wire it up" ?

index.html

html ng-app="app"

- this is a built in "directive" that tells angular to "bootstrap" this HTML element so that it knows about our app module
- the wiring happens automatically

3. Routing / "Pages", How do we handle transitions?

app/js/app.js

.config(['$routeProvider', function($routeProvider) {

  $routeProvider.when('/login', {
    templateUrl: 'login.html',
    controller: 'LoginController'
  });

  $routeProvider.otherwise({ redirectTo: '/login' });

}]);

- dependency injection, more on that later
- default route
- a controller to handle the "context" for that "page"
- where does it get injected?

index.html

<div id="view" ng-view></div>

- ng-view is an angular directive that tells angular, "this is where you should inject the templates that come from this scopes routeProvider when a route is matched"

- the default behaviour is that angular will fetch the template provided at templateUrl, and cache it internally so it doesn't have to fetch it again

- we need a controller, so things don't blow up

app/js/app.js

angular.module("app").controller("LoginController", function($scope) {

});

4. Right, so now we have a way to load templates and know how to load routes, so let's add a second route which has our homepage after login happens.

home.html

- now we can see the template cache at work, no more XHR's after the first two

5. Let's add some dynamic behaviour, and wire up the login form so it will redirect to the home page once the user submits the form.

- first, we'll set angular up so it handles the form submit for us using the ng-submit attribute
- this attribute defines an expression, and the spot angular looks for that expression is on the scope that is passed in to the controller

- we'll write the logic for our controller to handle a basic login scheme, and if the username and password are correct redirect the user to our home page using angulars $location service

- however, we also need to figure out how to get the HTML form elements to pass the username and password to the $scope so our login function knows about them; in jQuery you might handle this manually be using $("input").val(), but in angular we try to avoid doing any manual DOM querying and instead rely on directives, like ng-model.

6. Now that our login is working pretty well, we should add some love to the Homepage, cause it's kind of boring right now. So, we will make a custom directive to show a special message when the user hovers their mouse over each of the images _and_ set an initial value for a title and message when the page renders, remember we have 2 way binding!

{{ title }}
{{ message }}
shows-message-when-hovered message="Im the first house."
shows-message-when-hovered message="Im the second house."

app.controller("HomeController", function($scope) {
  $scope.title = "Awesome Home";
  $scope.message = "Mouse Over these images to see a directive at work!";
});

app.directive("showsMessageWhenHovered", function() {
  return {
    restrict: "A", // A = Attribute, C = CSS Class, E = HTML Element, M = HTML Comment
    link: function(scope, element, attributes) {
      var originalMessage = scope.message;
      element.bind("mouseenter", function() {
        scope.message = attributes.message;
        scope.$apply();
      });
      element.bind("mouseleave", function() {
        scope.message = originalMessage;
        scope.$apply();
      });
    }
  };
});

7. Services - it seems silly that our HomePage controller has to know about how to handle logging in, and it kind of flies against the "angular way" of having pieces of code be responsible for only 1 thing (Single Responsibility Principle). So let's extract our authentication logic into a service called the AuthenticationService.

- we also added a logout function, and wired it up in the home.html to complete the cycle in our simple app.
- many more things we could explore, like $http