together

1. Pull down the repository
2. Try it
3. Look at the template
4. Look at the controller
5. Look at post service

together

1. Create a users service that will get the users

• from http://jsonplaceholder.typicode.com/users

2. Give it a get method that uses $http
3. Put the response.data into a "data" variable on the service
4. Make sure it has a callback Test these now

together

1. Add a function to the posts service called "mapUsers"
2. Call the users service
3. When the userId from posts.data is equal to the users.id, add a userName field to the posts.data

on your own -ish

1. Write tests for the users service and posts service
2. Mock the $http.get with $httpBackend
3. Services are mocked with module(function($provide){...

• users needs to be mocked
• it might feel like duplicating the function, but just simplify it to its base
• all it needs is a data var and a get function

4. Services are included with inject(function($injector){...

• $httpBackend = $injector.get('$httpBackend');
• users = $injector.get('users');

together

1. Add a new directive file
2. Create a new directive called 'post'

• angular.module('directings').directive('post', function(){...

3. Return an object literal with one key-value: template: "asdf"
4. Add a <post> element to the template inside of the <li>
5. Check it out

together

1. Add the <div that's currently in the <li> to the template value

• template: "<div><strong>Title:</strong> {{ post.title }}</div>"

2. Add an attribute of title to the post element and give it a value of post.title

• Note: any attribute of a directive is going to take an experession

3. Change post.title to just title since that's the attribute we're using to pass in the value
4. Add a scope to the directive

return {
  scope: {
    title: '=title'
  },
  template: ...

together

1. Initialize the current module

• module('directings');

2. Inject in the $compile and $rootScope services

• inject(function($compile, $rootScope){...

3. Attach $compile to a variable we can use outside of the inject scope
4. Create a new localized scope from $rootScope and attach it to a variable outside the inject scope

• scope = $rootScope.$new();

5. Create an element with angular.element with the directive in it

• var element = angular.element('<div><post-display post="post">{{ post.title }}</post-display></div>');

6. Compile the element and attach the new, localized scope to it

• compiledDirective = compile(element)(scope);

7. Digest the scope

• scope.$digest();

8. Try the following it

  it("should have put the title in bold", function(){
    var el = compiledDirective.find('strong');
    expect(el).toBeDefined();
    expect(el.text()).toBe(scope.post.title);
  });

on your own

1. Add a post.html to a templates directory
2. Give it the HTML currently in your template value
3. Replace template with templateUrl and give it the value of your new html

• templateUrl: '/templates/post.html'

on your own

1. Add another <div> to the <li> in index.html
2. Give it the ng-include attribute with a value of the template file you just created

• *Note: ng-include expects an expression, not a string, so make sure you pass it a string
• ng-include="'/templates/post.html'"

3. Look at what you have
4. Change title to post.title (what it was originally)
5. Check it out

together

1. Instead of adding title, just add the post variable

• <post post="post"></post>
• That's so cool looking right?

2. Look at that error
3. Rename the post directive to post-display

• in both index.html and post.js

4. Look at the result
5. Change the directive registration to postDisplay

• but leave the index.html the same

on your own

1. Add a new controller "DisplayController"
2. Put it into the index.html template in a <div> after the list controller
3. Inject posts

on your own

1. Write a method in the posts service to set the current post
2. Call that method whenever a post is clicked in the list

• you should wrap it in an <a> for accessibility
• convenience class of unlink is available in the css

3. Now you can include the <post-display> directive in the DisplayController

together

1. Wrap the directive template in a <div>
2. Use ng-if to only show that div if post exists
3. Add a body attribute to the directive, give it a boolean true value
4. Add it to the scope
5. Add a <div> to the directive's template and have it contain an expression for {{ post.body }}
6. Use ng-if to only show that if the body attribute is true

together

1. Include the post.title in the body of the <post-display> tag
2. Remove the post.title expression from the directive's template
3. Add ng-transclude to the <strong> tag
4. Add transclude: true to the directive's return object

together

1. Adjust our tests...

together

1. npm install --save-dev karma-ng-html2js-preprocessor
2. Add all of your .html files to the list of Karma files
3. Add the following lines to your karma config

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'src/**/*.html': ['ng-html2js']
    },
    ngHtml2JsPreprocessor: {
      moduleName: 'templates',
      stripPrefix: 'src/'
    },

And add the moduleName you just put there to the angular.mocks.module call in your directive test

• module('templates', 'directings');

on your own

the real reason Google developed Angular together

1. Create a new directive called "blink"
2. Inject $timeout into the directive

• $timeout is just an angular wrapper around window.setTimeout()

3. Create a function in the directive that, when taking an element as a parameter will hide that element using css's visibility

• element.css("visibility", "hidden");

4. Create another function that's does the opposite of that

• element.css("visibility", "visible");

5. Use $timeout at the end of each of those functions to call the other function

• $timeout(function(){ showElement(element); }, 500);

6. Add a "promise" variable to the directive at the highest scope on the directive
7. Assign the $timeouts to that variable so they overwrite each other
8. Return a link function with the directive

• link controller and compile all take 3 parameters
• link: function(scope, element, attrs){...

9. Add showElement(element); to the link function