$scope breaks Angularjs Portlet Application

Question

I am trying to get AngularJS to run in my .jsp page with the simplest app copied directly from W3s example

UPDATE: I'm trying to use angular in a Liferay portlet, so here is the extent of my code in view.jsp

<%
/**
 * Copyright (c) 2000-present Liferay, Inc. All rights reserved.
 */
%>

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>

<portlet:defineObjects />  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script type='text/javascript'>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>

However, as soon as I attempt to use my Controller + $scope object, the app breaks and I get the error

Failed to instantiate module myApp due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.6/$injector/modulerr?p0=n...)
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:6:412
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:40:134
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:391
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:7:355)
    at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:39:222)
    at db (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:43:246)
    at Ac.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:19

I cannot figure out why this is. Any ideas?

A quick check confirmed that the example works as expected (used jsbin). Can you share the rest of the code? How is the project set up? The issue must be somewhere else. Especially, where do you load the dependencies, etc. Also, please see: http://stackoverflow.com/questions/22406633/angularjs-uncaught-error-injectormodulerr-failed-to-instantiate-module — seN, Jun 03 '16 at 17:05
What is the full error link? "http://errors.angularjs.org/1.5.6/$injector/modulerr..." — Brian, Jun 03 '16 at 17:10
works in the fiddle as well... http://jsfiddle.net/Q5hd6/259/ Whats the whole error — Swati Maheshwari, Jun 03 '16 at 17:19
@brianslattery here's the error link https://docs.angularjs.org/error/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20myCtrl — Clay Banks, Jun 03 '16 at 17:28

score 0 · Answer 1 · answered Jun 03 '16 at 17:42

0

For some reason, from your error, it looks like the code thinks you are trying to inject 'a'.

If possible, I recommend you put this in a separate script, and wrap in an IIFE:

app.js:

(function(){
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
})();

And then include it in your HTML:

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

answered Jun 03 '16 at 17:42

Brian

4,921
3
20
29

Thanks Brian, no luck there however. I see a few different ways people have combined Angular & Liferay together that I may have to explore. It's odd here because the app will run without defining the Controller in my .js – Clay Banks Jun 03 '16 at 17:51

$scope breaks Angularjs Portlet Application

1 Answers1