$injector:modulerr error in angularjs (angular-ui-router)

Question

I am trying to load a template with ui-router in angular js. These are my html and js files.

   <!DOCTYPE html>
<html>
    <head>     
        <title>AngularJS UI Routing</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    </head>
    <body ng-app="app">
        <a href='#/first-msg'>link</a>
        <div ui-view></div>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
        <script src="application.js"></script>
    </body>

</html>

application.js

   var app = angular.module('app', []);
app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('firstMessage', {
        url: '/first-msg',
        template: '<strong>hi this is 1st message</strong>'
    });
}])

And so what's happening?

sp00m
– sp00m

2017-03-21 12:54:59 +00:00
Commented Mar 21, 2017 at 12:54 — sp00m
– sp00m, Commented Mar 21, 2017 at 12:54

Sajeetharan · Accepted Answer · 2017-03-21 12:55:18Z

2

You need to inject ui.router to the module,

   var app = angular.module('app', [ui.router]);

DEMO

var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', function($stateProvider) {
    $stateProvider.state('firstMessage', {
        url: '/first-msg',
        template: '<strong>hi this is 1st message</strong>'
    });
}])

<!DOCTYPE html>
<html>
    <head>     
        <title>AngularJS UI Routing</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
</head>
 <body ng-app="app">
<a href='#/first-msg'>link</a>
<div ui-view></div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
</body>
</html>

answered Mar 21, 2017 at 12:55

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Umair Jameel Over a year ago

Can you tell me about this error. html is same and home.html contains <strong>{{message}}</strong> var app = angular.module('app', ['ui.router']); app.config(['$stateProvider', function($stateProvider) { $stateProvider.state('firstMessage', { url: '/first-msg', templateUrl: 'home.html', controller: 'homeCtrl' }); }]); app.controller("homeCtrl", ['$scope', function($scope) { $scope.message = "This is home"; }]);

Collectives™ on Stack Overflow

$injector:modulerr error in angularjs (angular-ui-router)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related