I'm trying to start up an angular module, but I cannot seem to understand why it's not working. All the controllers, modules, and directives seem okay to me. I feel as if the problem is with how everything is loaded in the index.html page. Anyone have an idea what might be the problem? I've checked similar questions but no luck thus far.
index.html
<!doctype html>
<html lang="en" ng-app="application">
<head>
<meta charset="utf-8">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles/main.css"/>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-loader/angular-loader.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="scripts/module.js"></script>
<script src="scripts/controllers/mainHeroController.js"></script>
<script src="scripts/directives/mainHero.directive.js"></script>
</head>
<body ng-app="webApp">
<nav id="main-navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Portfolio</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div id="main-jumbotron" class="jumbotron container-fluid">
<div class="row">
<div class="col-md-4">
<img id="profile-pic" src="images/ProfilePic.jpg"/>
</div>
<div class="col-md-8">
<h1 class="display-3">Hello world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="m-y-2">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</div>
</div>
<div id="container1">
<mainHero></mainHero>
</div>
<div id="container2">
Container 2
</div>
</body>
</html>
module.js
(function()
{
'use strict'
angular
.module('webApp', [])
})();
mainHero.js
(function mainHeroDirective()
{
'use strict'
angular
.module('webApp')
.directive('mainHero', mainHero);
mainHero.$inject = [];
function mainHero()
{
var directive =
{
restrict: 'E',
controller: 'MainHeroController',
//controllerAs: 'mainHero',
scope: {},
template: 'Directive works!'
}
}
})();
mainHeroController.js
(function mainHeroController()
{
'use strict'
angular
.module('webApp')
.controller('MainHeroController', MainHeroController);
mainHeroController.$inject = [];
function MainHeroController()
{
alert('works!');
}
})()
The error is actually caused by the "ng-app" that is left at the top of your document:
<html lang="en" ng-app="application">
You can tell (kind of) from the URL in the error:
http://errors.angularjs.org/1.5.8/$injector/nomod?p0=application
There was another problem with the way your directive is defined though, because the function is not returning anything, and also a typo in your controller, because the case is not consistent.
I copied it to codepen and corrected those errors:
http://codepen.io/anon/pen/ZpbZRJ
Hope it helps!
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments