Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Step 12 - creating reusable components #50

Open
wants to merge 21 commits into from

4 participants

@tonylampada

Great tutorial, awesome job guys!

While I was going through the steps I felt there was something missing though: The ability to create reusable components with Angular.

After some research, I found out it's not actuallu missing from Angular, it's just missing from the tutorial.

Please consider adding another step that teaches how to use module directives to accomplish this.
I've made a quick sample of how the code could look in this pull request (app/using_components.html).
Of course, it can be improved, but it gives the idea.

IgorMinar and others added some commits
@IgorMinar IgorMinar add bootstrap 2.0.3 b1ed3a3
@IgorMinar IgorMinar angular-phonecat README.md
added phonecat specific info into the README.md file
9b8f31a
@IgorMinar IgorMinar empty the angular-seed project
- Initial [angular-seed] project layout without default app and test
  code
da574a1
@IgorMinar IgorMinar add tutorial related scripts 8035332
@IgorMinar IgorMinar add phones.json
- Added a json file with a list of all phones. This file fakes a
  backend which would typically render this list dynamically from
  a database.
cd364fa
@IgorMinar IgorMinar add phone detail json files
- Added one json file with detailed information about each phone
  listed in phones.json
a42a539
@IgorMinar IgorMinar add phone images
- Added images for each phone listed in phones.json
13b2549
@IgorMinar IgorMinar step-0 bootstrap angular app
- add ngApp directive to bootstrap the app
- add simple template with an expression
6d4f074
@IgorMinar IgorMinar step-1 static phone list
- Added static html list with two phones into index.html
7abe1a3
@IgorMinar IgorMinar step-2 angular template with repeater
- Converted the static html list into dynamic one by:
  - creating PhoneListCtrl controller for the application
  - extracting the data from HTML into a the controller as an in-memory
    dataset
  - converting the static document into a template with the use of
    `[ngRepeat]` [directive] which iterates over the dataset with phones,
    clones the ngRepeat template for each instance and renders it into the
    view
- Added a simple unit test to show off how to write tests and run them
  with JsTD (see README.md for instructions)
d90cbe4
@IgorMinar IgorMinar step-3 interactive search
- Added a search box to demonstrate how:
  - the data-binding works on input fields
  - to use [filter] filter
  - [ngRepeat] automatically shrinks and grows the number of phones in the view
- Added an end-to-end test to:
  - show how end-to-end tests are written and used
  - to prove that the search box and the repeater are correctly wired together
3fc729c
@IgorMinar IgorMinar step-5 XHR and dependency injection
- Replaced the in-memory dataset with data loaded from the server (in
  the form of static phone.json file to make this tutorial backend
  agnostic)
  - The json file is loaded using the [$http] service
- Demonstrate the use of [services][service] and [dependency injection][DI]
  - The [$http] is injected into the controller through [dependency injection][DI]
643ea62
@IgorMinar IgorMinar step-6 phone images and links
- adding phone image and links to phone pages
- add end2end test that verifies our phone links
- css to style the page just a notch
4162ddc
@IgorMinar IgorMinar step-4 phone ordering
- Add "age" property to the phone model
- Add select box to control phone list order
- Override the default order value in controller
- Add unit and e2e test for this feature
fd5414e
@IgorMinar IgorMinar step-7 $route and app partitioning
- Introduce the [$route] service which allows binding URLs for deep-linking with
  views
  - Create PhoneCatCtrl which governs the entire app and contains $route
    configuration
  - Map `/phones' to PhoneListCtrl and partails/phones-list.html
  - Map `/phones/<phone-id>' to PhoneDetailCtrl and partails/phones-detail.html
  - Copy deep linking parameters to root controller `params` property for access
    in sub controllers
  - Replace content of index.html with [ng:view] widget
- Create phone list route
  - Preserve existing PhoneListCtrl controller
  - Move existing html from index.html to partials/phone-list.html
- Create phone details route
  - Empty placeholder PhoneDetailsCtrl controller
  - Empty placeholder partials/phane-details.html template
8b3e3b2
@mhevery mhevery step-8 phone details view
- Fetch data for and render phone detail view
  - PhoneDetailCtrl controller to fetch details json with [$xhr] for a specific
    phone
  - template for the phone detailed view
- CSS to make the phone details page look "pretty"
2d45f47
@IgorMinar IgorMinar step-9 checkmark filter
- Added custom checkmark filter
- Update phone detail template to use checkmark filter
- Added spec for the filter
f37a97c
@IgorMinar IgorMinar step-11 custom service and $resource
- Replaced [$xhr] with [$resource]
- Created a custom Phone service that represents the $resource client
9aebada
@IgorMinar IgorMinar step-10 image swapping with ng:click
In the phone detail view, clicking on a thumbnail image, changes the
main phone image to be the large version of the thumbnail image.

- Define mainImageUrl model variable in the PhoneDetailCtrl and set its
  default value
- Create setImage controller method to change mainImageUrl
- Register ng:click handler for thumb images to use setImage controller
  method
- Add e2e tests for this feature
- Add css to change the mouse cursor when user points at thumnail images
d602c01
@tonylampada tonylampada Step-12: enter directives a8ab227
@tonylampada tonylampada removing stuff from step-13 61fd573
@tonylampada tonylampada referenced this pull request
Open

Step 13 #51

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 18, 2012
  1. @IgorMinar

    add bootstrap 2.0.3

    IgorMinar authored
  2. @IgorMinar

    angular-phonecat README.md

    IgorMinar authored IgorMinar committed
    added phonecat specific info into the README.md file
  3. @IgorMinar

    empty the angular-seed project

    IgorMinar authored IgorMinar committed
    - Initial [angular-seed] project layout without default app and test
      code
  4. @IgorMinar

    add tutorial related scripts

    IgorMinar authored IgorMinar committed
  5. @IgorMinar

    add phones.json

    IgorMinar authored IgorMinar committed
    - Added a json file with a list of all phones. This file fakes a
      backend which would typically render this list dynamically from
      a database.
  6. @IgorMinar

    add phone detail json files

    IgorMinar authored IgorMinar committed
    - Added one json file with detailed information about each phone
      listed in phones.json
  7. @IgorMinar

    add phone images

    IgorMinar authored IgorMinar committed
    - Added images for each phone listed in phones.json
  8. @IgorMinar

    step-0 bootstrap angular app

    IgorMinar authored IgorMinar committed
    - add ngApp directive to bootstrap the app
    - add simple template with an expression
  9. @IgorMinar

    step-1 static phone list

    IgorMinar authored IgorMinar committed
    - Added static html list with two phones into index.html
  10. @IgorMinar

    step-2 angular template with repeater

    IgorMinar authored IgorMinar committed
    - Converted the static html list into dynamic one by:
      - creating PhoneListCtrl controller for the application
      - extracting the data from HTML into a the controller as an in-memory
        dataset
      - converting the static document into a template with the use of
        `[ngRepeat]` [directive] which iterates over the dataset with phones,
        clones the ngRepeat template for each instance and renders it into the
        view
    - Added a simple unit test to show off how to write tests and run them
      with JsTD (see README.md for instructions)
  11. @IgorMinar

    step-3 interactive search

    IgorMinar authored IgorMinar committed
    - Added a search box to demonstrate how:
      - the data-binding works on input fields
      - to use [filter] filter
      - [ngRepeat] automatically shrinks and grows the number of phones in the view
    - Added an end-to-end test to:
      - show how end-to-end tests are written and used
      - to prove that the search box and the repeater are correctly wired together
  12. @IgorMinar

    step-5 XHR and dependency injection

    IgorMinar authored IgorMinar committed
    - Replaced the in-memory dataset with data loaded from the server (in
      the form of static phone.json file to make this tutorial backend
      agnostic)
      - The json file is loaded using the [$http] service
    - Demonstrate the use of [services][service] and [dependency injection][DI]
      - The [$http] is injected into the controller through [dependency injection][DI]
  13. @IgorMinar

    step-6 phone images and links

    IgorMinar authored IgorMinar committed
    - adding phone image and links to phone pages
    - add end2end test that verifies our phone links
    - css to style the page just a notch
  14. @IgorMinar

    step-4 phone ordering

    IgorMinar authored IgorMinar committed
    - Add "age" property to the phone model
    - Add select box to control phone list order
    - Override the default order value in controller
    - Add unit and e2e test for this feature
  15. @IgorMinar

    step-7 $route and app partitioning

    IgorMinar authored IgorMinar committed
    - Introduce the [$route] service which allows binding URLs for deep-linking with
      views
      - Create PhoneCatCtrl which governs the entire app and contains $route
        configuration
      - Map `/phones' to PhoneListCtrl and partails/phones-list.html
      - Map `/phones/<phone-id>' to PhoneDetailCtrl and partails/phones-detail.html
      - Copy deep linking parameters to root controller `params` property for access
        in sub controllers
      - Replace content of index.html with [ng:view] widget
    - Create phone list route
      - Preserve existing PhoneListCtrl controller
      - Move existing html from index.html to partials/phone-list.html
    - Create phone details route
      - Empty placeholder PhoneDetailsCtrl controller
      - Empty placeholder partials/phane-details.html template
  16. @mhevery @IgorMinar

    step-8 phone details view

    mhevery authored IgorMinar committed
    - Fetch data for and render phone detail view
      - PhoneDetailCtrl controller to fetch details json with [$xhr] for a specific
        phone
      - template for the phone detailed view
    - CSS to make the phone details page look "pretty"
  17. @IgorMinar

    step-9 checkmark filter

    IgorMinar authored IgorMinar committed
    - Added custom checkmark filter
    - Update phone detail template to use checkmark filter
    - Added spec for the filter
  18. @IgorMinar

    step-11 custom service and $resource

    IgorMinar authored IgorMinar committed
    - Replaced [$xhr] with [$resource]
    - Created a custom Phone service that represents the $resource client
  19. @IgorMinar

    step-10 image swapping with ng:click

    IgorMinar authored IgorMinar committed
    In the phone detail view, clicking on a thumbnail image, changes the
    main phone image to be the large version of the thumbnail image.
    
    - Define mainImageUrl model variable in the PhoneDetailCtrl and set its
      default value
    - Create setImage controller method to change mainImageUrl
    - Register ng:click handler for thumb images to use setImage controller
      method
    - Add e2e tests for this feature
    - Add css to change the mouse cursor when user points at thumnail images
Commits on May 10, 2013
  1. @tonylampada

    Step-12: enter directives

    tonylampada authored
  2. @tonylampada
Something went wrong with that request. Please try again.