Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript AngularJS Basics (1.x) Getting Started with Angular Your First Angular Directive

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 90,845 Points

I get the hello-world tag but it doesn't inject the directive string.

I'm not sure what I'm doing wrong here (apart from maybe electing to work outside Workspaces), but I've got the code working with no errors on the console.

The code shows up with the hello world tag in the console but nothing inside it

<hello-world></hello-world>

app.js

//Create an angular module. First parameter is name. The second is an empty array.
angular.module("todoListApp", [])

hello-world.js

//set up angular module with no second argument
angular.module('todoListApp')  //wont create a new module but look for existing app.

//Angular Directive
.directive('helloWorld', function() {
    return {
        template: 'This is the hello world directive!'  //inject template into helloWorld directive. 
    };  
});
    <body ng-app="todoListApp">
        <hello-world></hello-world>

        <script src="vendor/angular.min.js" type="text/javscript"></script> 
        <script src="scripts/app.js" type="text/javscript"></script>    
        <script src="scripts/hello-world.js" type="text/javscript"></script>        
    </body>
Dustin McCaffree
Dustin McCaffree
14,310 Points

I'll be interested to know what solution comes from this. Thanks for the question. This problem happens to me off and on, and I've been unable to decide what the problem originates from. Thanks!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,845 Points

I've tried everything I know to try to fix it :)

Including using different versions of Angular.. putting the app on localhost.... It's odd

3 Answers

akak
akak
29,445 Points

It looks like you have a typo in the script tag.

 <script src="scripts/app.js" type="text/javscript"></script>    
 <script src="scripts/hello-world.js" type="text/javscript"></script> 

Hard to notice but you missed "a" in type="text/javascript". After fixing that (or removing type at all) your code runs just fine :) (you don't have to write those types in HTML5 since if not present - the default is automatically set to type="text/javascript")

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,845 Points

Ohhhhhhh that must be it :D

Funny what you don't pick up even after a very thorough look through your code. :)

The reason I put the source attribute in though was when adding the vendor file for Angular it came up with console errors. They were gone even with typoed code :)

akak
akak
29,445 Points

Yeah, just yesterday I went over my not working code 20 times, finally sent it to a friend for a closer look and he discovered one letter misspelled :)

David Rust
David Rust
5,562 Points

Might be a problem with the Workspaces app. I was running into a similar issue, then noted when inspecting the page via developer tools that it was not updating my index.html page.

I had noted I missed the line: <script src="scripts/hello-world.js" type="text/javascript"></script>. So I added it, saved it in workspaces, ran the preview, checked the dev tools view, and did not see that line included. Anything else I try to add to index.html will not save in workspaces.

I used Microsoft Visual Studio 2015 and replicated all the files, and the page ran as expected. So that seemed to confirm for me an issue with the TTH workspaces app.

Dustin McCaffree
Dustin McCaffree
14,310 Points

Have you tried moving your script sources to the top of your page, inside the head tags? Not sure if it would matter, but... :P

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 90,845 Points

I haven't. I don't know enough about Angular to know if that's the issue but I doubt it :-)