Angular Advanced Directives

Angular Advanced Directives

Lately I have been trying to learn deep dive into angular directives, but it definitely got a steep learning curve. One good video tutorial I found on angular directive was by David Mosher. His screen cast explain how from a html tag you can write a angular directive with some excellent debugging tips. *

So the scenario is you have html tag that represent a table grid in angular directive and he works backward on creating the angular directive.

<grid-screen resource="/api/data.json">
<grid-columns>
<grid-column title="Product" field="product"></grid-column>
<grid-column title="Description" field="description"></grid-column>
<grid-column title="Cost" field="cost"></grid-column>
</grid-columns>
<grid with-inline-editor></grid>
</grid-screen>

 

After download his code from github, you need to host on simple web server. I follow the  instructions below i.e. install web server using npm and in folder where server files reside just run http-server.

  • $ npm install http-server -g
    Now you can run a server via the following commands:
  • $ cd MyApp
  • $ http-server

Below is a brief summary of what I learnt while doing this screencast:-

  • different between the use of restrict ‘E’ Element and ‘A’ Attributes
  • use of $http to get a json resources i.e. say u need to get a resources at http://<something>/resources.json. The json can be controller MVC function, or json file
  • use of Link which has access to Dom element and you can use jquery
  • use of templateURL: –> point to html file with render html
  • tips on debugging using console.log
    • the order of execution when angular parse a dom i.e. it would executes the child element first then the parent element
  • use of Controller with its methods
  • purpose of requires: with regards to invoking a controller methods from a another controller u need to add requires ”<namespace> ” , ‘^<namespace>’ refer to namespace above or parent element
  • use of sublime with package Emmet to expand css selector to html elements. Eg table.grid>thead>tr>th+tbody>tr>td> will render to
    • <table class="grid">
       <thead>
      <tr>
      <th></th>
      <tbody>
      <tr>
      <td></td>
      </tbody>
      </tr>
      </thead>
      </table>

       

  • Use of angular debugging to check a element for example if u use $http with json to see if object will render to Dom element
    • select element on html page
    • goto console and type angular.element($0).scope() –> this will show u if json values has been render to element
  • Use of broadcast and on

Leave a Reply

Your email address will not be published. Required fields are marked *