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

Posted by Pierre Smith
Pierre Smith
11,842 Points

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>
Pierre Smith
Pierre Smith
11,842 Points

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

2 Answers

Pierre Smith
Pierre Smith
11,842 Points

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

Colin Stodd
Colin Stodd
6,257 Points
Colin Stodd
Colin Stodd
6,257 Points

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

Colin Stodd
Colin Stodd
6,257 Points

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.