MEAN Stack – Custom tags with AngularJS directives – Day 24
The MEAN Challenge Continues!
This video is part of the 30 Day MEAN Stack Honolulu Challenge
In this video we’ll create our own custom AngularJS directive. We’ll look at pulling out our list of customers and putting it into its own template, we’ll then glue the view and list back together using a directive.
We look at:
– An introduction to directives
– Locating Angular directives within our code
– Different types of directives
– The AngularJS documentation on directives
– Referring to directives using camel-case
– Creating our own custom elements/tags
– Moving our reusable code into a template
– Gluing our custom elements and template together using a directive
– Cleaning up our customer routes
The functional design post mentioned in this video with the use case, storyboard and wireframes can be found here: Home Page Design.
When I implement the directive as shown in the video it fills the tags with the layout.server.view.html instead of the new view template I’d created.
If I put “template: ‘ hello world'” it works fine. It doesn’t seem to be able to find the new template file when I use templateUrl.
Is there something I’m missing about the templateUrl path? the path I’m using is ‘modules/customers/views/edit-customer.client.view.html’
Thanks for the videos they’re a fantastic resource.
Hey Kim,
You’ve probably resolved this already, but just incase anyone else is hitting the same problem:
If you’re seeing the layout.server.view.html, then it’s likely that your templateUrl isn’t being picked up. Any-time you add new file a rule of thumb is to stop and start the server.
I understand directives, but I had to wait to ~ 4:30 to really understand what we were doing with them.
Thanks for the feedback Rick, would you suggest that if someone was already familiar with directives, that they should just skip to 4:30? I can add this as a note to the post if you think it’ll help 🙂