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

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

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.