AngularJS module doesn't work

Question

So I've been looking at this for way too long. Really hope someone could help me out :) I'm just trying to create a module that creates a directive and controller for my site header in AngularJS. I don't get any error and the log in my code won't show up. This is the code related to the header module:

header/header.js

 'use strict';
angular.module('myApp.header', [])

.directive("headerBar", [function(){
  return {
    restric: "E",
    templateUrl: "header/header.html",
    controller: 'HeaderCtrl'
  };
}])

.controller('HeaderCtrl', ['$log', function($log) {
  $log.log('test header controller');
}]);

app.js

angular.module('myApp', [
  'ngRoute',
  'myApp.header'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/'});
}]);

index.html

<script src="header/header.js"></script>


<header-bar></header-bar>

Why would I add an object-related directive to my main module? And yes, I initialized the app, the routing modules work perfectly. — Bastiaan Andriessen
– Bastiaan Andriessen, Commented Apr 17, 2015 at 10:56

MattDionis · Accepted Answer · 2015-04-17 12:10:52Z

1

I see a typo on your directive definition:

Should be restrict: "E", you're currently missing the 't'

edited Apr 17, 2015 at 12:10

answered Apr 17, 2015 at 10:57

MattDionis

3,62610 gold badges55 silver badges111 bronze badges

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

2 Comments

Bastiaan Andriessen Over a year ago

Hi, totally overlooked that. Thanks for noticing! For the other possible reasons you had mentioned before (and the other answers): In the original post I said that I only posted the code related to the issue, so all my includes and so on were already there. But again, thanks for the quick help. It works!

MattDionis Over a year ago

I noticed that after re-reading, so I edited my post to remove all those other points. Glad to help!

Ramesh Rajendran · Accepted Answer · 2015-04-17 10:56:21Z

1

You need to call the app.js and angular.js reference scripts in your index page

Some think like below

   //Jquery Scripts
   //Angular.js library scripts 
  <script src="header/header.js"></script>
  **<script src="app.js"></script>**// Please refer here your app.js script



<header-bar></header-bar>

answered Apr 17, 2015 at 10:56

Ramesh Rajendran

38.9k49 gold badges159 silver badges241 bronze badges

Comments

dev · Accepted Answer · 2015-04-17 11:49:52Z

1

This works for me.Please check that you are including all files.

<html>
<head>
  <title>test</title>

  <link rel="stylesheet" href="styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
      <script src="header/header.js"></script> 
        <script src="app.js"></script> 
</head>

<body ng-app="myApp.header" ng-controller="HeaderCtrl">
<header-bar></header-bar>

</body>
</html>

answered Apr 17, 2015 at 11:49

dev

3132 silver badges9 bronze badges

Collectives™ on Stack Overflow

AngularJS module doesn't work

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related