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?
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>
Related
as you can see I have opened .xml file and parsed it to a xmlDoc. What I am trying to achieve is that this xmlDoc will be accessible from the whole script(I want to make some functions later which will be displaying elements from .xml to a screen). I searched the web and find that it is possible via global variable $rootScope but couldn't implement it correctly. I hope you guys can help me. Thanks.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<p id="title">asd</p>
<button name="opt1" ng-click="">YES</button>
<button name="opt2" ng-click="">NO</button>
<script>
var app = angular.module('myApp', []);
var parser, xmlDoc;
app.run(function($rootScope, $http) {
text = $http.get("file.xml").then(function(response) {
return response.data;
}).then(function(text) {
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("title").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
});
});
</script>
</body>
</html>
There are many ways in angular to declare and use a global variable.
examples:
1. By using $rootScope.
we need to add a dependency in our controller or service like:
app.controller('myCtrl', ['$rootScope', '$scope', function($rootScope, $scope){
$rootScope.yourVar = 'YourValue';
....
....
}]);
and then You can use this `yourVar` variable anywhere in your code.
Another way is by using angular factory or servive.
app.factory('factoryObj', ['$scope', function($scope){
let factoryObj.yourVar = 'yourValue';
return factoryObj;
}]);
Now in any controller or any other service, by using this factoryObj as a dependency and then inside that controller or service we can use factoryObj.yourVar as a variable. as:
app.controller('myCtrl',['$rootScope','$scope','factoryObj'function($rootScope,$scope, factoryObj){
console.log('factoryObj.yourVar value: ',factoryObj.yourVar);
}]);
I am following a video tutorial video for Angular JS and started the topic of using a controller as syntax. The example I am working on yields a different result from the one in the tutorial, however. My code (below) outputs the following error:
angular.js:13550 Error: [ng:areq] Argument 'ParentController' is not a function, got undefined
I am confused as to why this is happening since I copied the code verbatim from the tutorial and still get the error while the tutorial's code output seems fine.
HTML
<body>
<div ng-controller="ParentController">
<p>This is the parent: {{ parentMessage }}</p>
<div ng-controller="FirstChild">
<p>My parent is: {{ parentMessage }}</p>
<p>The first child is: {{ firstMessage }}</p>
</div>
<div ng-controller="SecondChild">
<p>My parent is: {{ parentMessage }}</p>
<p>The second child is: {{ secondMessage }}</p>
</div>
</div>
</body>
JS
angular.model('myApp').controller('ParentController', ['$scope', function($scope) {
$scope.parentMessage = 'What she said.';}]);
angular.model('myApp').controller('FirstChild', ['$scope', function($scope) {
$scope.firstMessage = 'I want my mother.';}]);
angular.model('myApp').controller('SecondChild', ['$scope', function($scope) {
$scope.secondMessage = 'I want my father.';}]);
The reason the error is appearing is because the HTML code isn't able to find the ParentController, FirstChild and SecondChild functions as functions in the JS code. The reason this is bothering me is because when I attempt a similar parent/child JS/HTML code pair then the error doesn't appear.
HTML
<body>
<div ng-controller="First">
<input type="text" ng-model="model.name">
<p>This is the first controller: {{model.name}}</p>
</div>
<div ng-controller="Second">
<input type="text" ng-model="model.name">
<p>This is the second controller: {{model.name}}</p>
</div>
</body>
JS
angular.module('myApp').service('SharedService',function(){
return {name: 'Uncle Alvin'};});
angular.module('myApp').controller('First',['$scope', 'SharedService', function($scope, SharedService){
$scope.model = SharedService;}]);
angular.module('myApp').controller('Second',['$scope', 'SharedService', function($scope, SharedService){
$scope.model = SharedService;}]);
I am not convinced that using shared services is the reason the latter pair of code works while the former doesn't. I want to know what is causing the HTML to not recognize the ng-controllers in the first instance and how I should go about modifying the pair to make them recognizable.
I apologize if this post is redundant to another topic that I couldn't find on my own. If it is, feel free to link the most original/helpful posting of this issue.
The reason for controllers not working in the first module is,
(i) Not model it is module
angular.module('myApp')
and it is easy if you dont declare it thrice, declare once and add the controllers.
var myApp= angular.module('myApp', []);
myApp.controller('ParentController', ['$scope', function($scope) {
$scope.parentMessage = 'What she said.';}]);
myApp.controller('FirstChild', ['$scope', function($scope) {
$scope.firstMessage = 'I want my mother.';}]);
myApp.controller('SecondChild', ['$scope', function($scope) {
$scope.secondMessage = 'I want my father.';}]);
Here is a simple example on how to do it.
Took this example from w3schools
First Name:
Last Name:
Full Name: {{firstName + " " + lastName}}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/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>
I am using AngularJS configured in STS (Eclipse). How we can fixed this error?
Cannot find controller with name NameCtrl.
HTML
<html ng-app>
<head>
<meta charset="ISO-8859-1">
<title>AJ Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js" ></script>
<script>
function NameCtrl($scope){
$scope.firstName = 'John';
$scope.lastName = 'Smith';
}
</script>
</head>
<body ng-controller="NameCtrl">
First name:<input ng-model="firstName" type="text"/>
<br>
Last name:<input ng-model="lastName" type="text"/>
<br>
Hello {{firstName}} {{lastName}}
</body>
</html>
From angular vs1.3.x you have to bind controller with module in order to use.
Like this
angular
.module("app",[])
.controller("NameCtrl",function($scope){
$scope.firstName = 'John';
$scope.lastName = 'Smith';
})
Add module name in html
<html ng-app="app">
JSFIDDLE
1.You need to define an angular app first (named'myApp' here).
2.Define an angular module inside that app.
3.Define a controller inside that module.
4.Bind that module to your controller, and your controller to angulaJS app.
var app = angular.module("myApp", []);
app.controller("NameCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Smith";
});
I work with AngularJS Google Maps and need to configure the api_key in the module config part (question similar to this one).
My question is about configuring AngularJs modules
This is my test pen:
var app = angular.module('myapp', [])
/*
// HERE ?????
// I try to pass a value from the HTML (server side)
.config(function($window){
console.log($window.memKey);
})
*/
.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
$scope.name = $window.memName;
$scope.city = $window.memCity;
$scope.getMember = function(id) {
console.log(id);
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var memKey = 'bb7de28f-0f89-4f14-8575-d494203acec7';
var memName = 'John';
var memCity = 'New-York';
</script>
<div ng-app="myapp" ng-controller="MainCtrl">
Member name: {{name}} <br>
Member city: {{city}}
</div>
How is possible to recuperate the memKey value from the HTML (Server) side?
your memKey is in an accesible scope, according on how you've declared it.
just do
app.config(function(){
console.log(memKey);
})
See snippet
You can access an existing angular module if you don't use the injection array. After you have the reference, you can declare constants eg:
<script type="text/javascript">
var app = angular.module('myapp');
app.constant('memKey', 'bb7de28f-0f89-4f14-8575-d494203acec7');
app.constant('memName', 'John');
app.constant('memCity', 'New-York');
//Or do them as one config object
</script>
--
.config(['memKey', 'memName','memCity' function(memKey, memName, memCity) {
}]);
I am still in study mode of angularjs and just 2 day old. I was trying to make module and so i created seperate js file for it and created module like below.
Also added controller.
var app = angular.module("githubViewer", []);
app.controller("MainCtrl", MainCtrl);
But when i run i get error 'MainCtrl' is not a function, got undefined
here is Plunker
Can someone help me?
After looking in plunker,I think you want to create a separate module in separate file for your controllers and add it to your main module.
For that create module for controllers in separate file,
angular.module("githubViewer", [])
.controller('MainCtrl', function($scope,$http) {
//your logic
});
then add it to your main as dependency in main module
angular.module('plunker', ['githubViewer']);
here is working demo : http://plnkr.co/edit/T9p7Uo2DxUVjqS1wuuiA?p=preview
Ok, you're new to angular, so here's a couple of rules which you must follow until you can prove you need to do otherwise.
You can place definition of module in a separate file. In short plunkers it is often an overkill, but that's what you should be doing in realworld-sized apps. Note that I'm talking about only the module here. Not talking about controllers, factories and other stuff.
Separating body of controller from its inclusion into angular does not bring any benefit. Don't do that.
That said, your files should look like this:
# my_app.module.js
angular.module('myApp', []);
# main.controller.js
var app = angular.module('myApp')
app.controller('MainCtrl', MainCtrl);
function MainCtrl() {
// logic here
}
I check your Plunker.
here is Working Plunker as you want logic of controller in seperate js file and module in seperate file
app.js
function MainCtrl($scope,$http) {
var person = {
firstName: "Kiran",
lastName: "Nandedkar"
};
$scope.name = 'World';
var onUserComplete = function(response){
$scope.user = response.data;
}
var onError = function(reason){
$scope.error = "dfdfdf" ;
}
$http.get("https://api.github.com/users/odetocode")
.then(onUserComplete,onError);
$scope.person = person;
};
module.js
var app = angular.module("githubViewer", []);
app.controller("MainCtrl", MainCtrl);
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
<script src="module.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{person.firstName}}!</p>
<div>Login : {{user.login}}</div>
</body>