Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

the hello-world attribute isn't working for me on local or workspaces

workspace has the code built in already so I would of assumed that it would have worked but that's not the case.

here's the code on my local machine.

//the app var can be used instead of angular.module('todoList') 
angular.module('todoList') // no need for a second param because it was already initiated in app.js
.directive('helloWorld', function() { //first param is the name of the directive second is the closure
  return {
    template: "This is the hello world directive!",
    restrict: "E"
  };
});
var app = angular.module("todoList", []); /* first param = name of app; second param is init of app if not init */
<html ng-app="todoList"> <!-- ng-app bootstraps the angular app to the html doc -->
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles/main.css">
</head>
<body>

    <hello-world></hello-world> <!-- directives can be inserted into tags like this  -->
    <br/>
    <div hello-world></div> <!-- or attributes like this -->

    <script type="text/javascript" src="vendor/angular.min.js"></script>
    <script type="text/javascript" src="scripts/app.js"></script>
    <script type="text/javascript" src="scripts/hello-world.js"></script>


</body>
</html>

It's the restrict that causing it. Ignore this question

2 Answers

It's the restrict that causing it. Ignore this question. E = only puts it in elements

I can't get the hello-world to show either. Im not even to the restrict part

For someone coming along, I had my hello-world.js file above my app.js file. app.js file should be above hello-world.js.