0

I am newbie to Angularjs. I am trying to create simple directive with the following code:

View:

<html> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <user-info></user-info> </div> </body> </html>

Controller:

myapp = angular.module("myapp", []); myapp.directive('userInfo', function() { var directive = {}; directive.restrict = 'E'; /* restrict this directive to elements */ directive.template = "My first directive: "; return directive; });

I am following this Tutorial to learn directive http://tutorials.jenkov.com/angularjs/custom-directives.html

I am getting error:

http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmyApp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0A%20%20%20%20at%20a%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53)%0A%20%20%20%20at%20w.bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A296)%0A%20%20%20%20at%20http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0A%20%20%20%20at%20s%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A302)%0A%20%20%20%20at%20g%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399)%0A%20%20%20%20at%20ab%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135)%0A%20%20%20%20at%20d%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381

Here is my codepen link http://codepen.io/anon/pen/NGNKxz

Improve this question
3
  • you aren't including your own code in page. Follow link in error for more details. Also , using development version of angular.js will give more verbose error and stack trace output in console Commented Sep 16, 2015 at 13:46
  • 1
    a typo in ng-app module name camelcase myapp vs myApp ? Commented Sep 16, 2015 at 13:52
  • I've add my codepen link, please check it Commented Sep 16, 2015 at 13:55

4 Answers 4

Reset to default
3

You have error in the name of your app :

myapp = angular.module("myApp", []); // not 'myapp'

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Ok. That was my silly mistake. thank for help though
1

Add Your Directive

You need to add the directive to your html like so

<script src="path/to/your/directive.js"></script>

or if your working from one module you will link to the main module. But please restructure your app like this it will keep code up to standard and clean.

I have a git hub repo where I am building an app in this structure here. Best of luck.

Note

You are using angular min. Min is great for production because its small and faster to load but your in development at the moment so use the full version so you can capture errors better with the browser console.

Improve this answer

3 Comments

Thanks for your useful not. I'll try to get something from it
It can really help with debugging if you add the full version. You get real errors in the console. But really chek out the app structure I've been working from. Hopefully I will have a directive up there soon.
Thanks. its really helpful for newbie.
0

Looks like you did not declare the controller myCtrl. Your directive looks fine.

myapp.controller('myCtrl', function() { });
Improve this answer

3 Comments

Nope. it doesn't work. I have tried to add controller.
Did you include your script? I don't see any <script> tags in your code @Arvaan
I added script for angularjs. I don't think so, I should add any script for directive
0

Is it the current version of your html file ?

Because you might need to link your controller, between head tags, insert :

  1. <script src="the js file which contains your controller"></script>

or

  1. <script>Your controller</script>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.