I have client-server application and I encountered this error: "Uncaught Error: [$injector:modulerr]".
I searched and I found many answers but non of them fixed the problem..
Here is my client code:
angular.module('myApp', [
'btford.socket-io', 'ngRoute'
]).
factory('mySocket', function (socketFactory) {
var myIoSocket = io.connect('http://localhost:3000');
mySocket = socketFactory({
ioSocket: myIoSocket
});
return mySocket;
})
.controller('MyCtrl', function ($scope,$route, mySocket) {
$scope.func = function(){
mySocket.emit('add user', "aaa");
};
});
<!doctype html>
<html lang="en">
<head data-ng-app="myApp">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular-route.js"></script>
<meta charset="UTF-8">
<title>Socket.IO Chat Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body ng-init="func()" data-ng-controller="MyCtrl">
<ul class="pages">
<li class="chat page">
<div class="chatArea">
<ul class="messages"></ul>
</div>
<input class="inputMessage" placeholder="Type here..."/>
</li>
<li class="login page">
<div class="form">
<h3 class="title">What's your nickname?</h3>
<input class="usernameInput" type="text" maxlength="14" />
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script><!----------------------------------------->
<script src="main2.js"></script>
</body>
</html>
Any ideas what could fix this?
actually you are using data-ng-app="myApp" in head tag.so that module is available only inside head tag.
you may try to declare in html tag. and then try..
hope u get result...
Thank you..
this can be fix using following techniques
first you need to move ng-app like that
<html lang="en" data-ng-app="myApp">
second is please remove the 'btford.socket-io' from your module if you not want to use it, like that
angular.module('myApp', [
'ngRoute'
])
If you not want to use btford.socket-io then download its this plugin path and
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-socket-io/0.7.0/socket.min.js"></script>
It looks like you are missing the main angular-socket-io/socket.js file that is used to load the btford.socket-io module. Everything should work once you include that! One other note, you may want to only load 1 jQuery library, they're pretty large and can hurt load time [Just personal suggestion :) ].
Resouce: angular-socket-io : Install
You are getting [$injector:modulerr] error means it could be due to modules used in you app is not loaded.
Try loading script socket.io.js in the head section, same as of angular scripts.
Related
I'm creating a spring-boot web application. I'm new to spring-boot as well as AngularJS and have tried integrating this with my application without any success. I have a page of JSON that I want to format as a table in my HTML page ("index.html") but my AngularJS variables are not visible on this page. I formatted some of my HTML code based off this tutorial on YouTube: https://www.youtube.com/watch?v=fUtVRKoBlbQ&list=PLVApX3evDwJ1i1KQYCcyS9hpSy_zOgU0Y&index=6 . I have attached the page of JSON along with my JavaScript code, HTML file, and the result of compiling my program:
JavaScript:
var app = angular.module("User", []);
app.controller("UsersController", function($scope, $http) {
$http.get("http://localhost:7070/user/all")
.success(function(result) {
$scope.tickets = result.tickets
})
});
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<body>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.ticket_id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
JSON:
A screenshot of the tickets (JSON) (
RESULT:
A screenshot of the result when I compile my code
Please note that I highly doubt this is the best solution. It worked for me so I'll post it here. In my HTML file, I moved my starting body tag <body> to line 4, immediately underneath the starting head tag <head th:insert="fragments.html :: headerfiles">. I also removed static as suggested by Ciao Costa in the earlier answer, https://stackoverflow.com/users/4405995/caio-costa . Here is the link on removing the static: (Image does not show using thymeleaf and spring) . Another small change I made was changing the variable {{t.ticket_id}} to {{t.id}} but that's only because the JSON showed it as id
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
RESULT:
Since your screen still displays the {{ }}, we know ng-app hasn't initialized properly. A good first approach would be to have a look at the Console, since failing to initialize ng-app usually results in a error message.
If ng-app had initialized, even if the variable you were trying to access in scope was undefined, you would not see the curly brackets.
When AngularJS initializes correctly and doesn't find the variable you are trying to render in DOM, it just leave its space blank and moves on like nothing happened. It also shows no error message in such cases.
I've done some tests and I believe the problem is in here:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
It looks like th:src is breaking your application because it is unable to find the file and thus generates a module error.
Try using it this way:
<script type="text/javascript" src="/static/app/users.controller.js" th:src=b"#{baseUrl + '/app/users.controller.js'}"></script>
Or:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{~/app/users.controller.js}"></script>
If none of the above work, try removing the static.
Sometimes it happens when you forget to hit ng serve inside your terminal.
I know this question definitely get's asked a lot. But I honestly am not sure what I am doing wrong, and the solutions I have found haven't seemed to work.
For reference, I am following this tutorial:
https://www.youtube.com/watch?v=OPxeCiy0RdY
Anyway. I am making a simple angular app that let's you input two values and it returns the result I have also included a small tester at the bottom of the HTML code to check and see if maybe I was having issues in my javascript file. I checked my references in the script tags already and made sure they were correct, all of the files are also in the same directory. I have built the controller, module, and referenced them in the HTML code. But for some reason, when I load my index page it simply does not recognize the Angular code parts. My code is as follows:
HTML:
<!DOCTYPE HTML>
<html ng-app="app1">
<head>
<title>Angular Practice Page</title>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<!-- Adds a controller that the Angular module will control.
The view is the div element and all that it contains. The $scope
component is used to provide data to the view. -->
<body>
<div ng-controller="ctrl1">
<span>Calculate:</span>
<input type="text" ng-model="first" />
<input type="text" ng-model="second" />
<button ng-click="updateValue()">Sum</button>
<br /><br />
{{calculation}}
<!-- Test Calculation -->
<p>
5 + 5 = {{5+5}}
</p>
</div>
</body>
</html>
Angular Code:
var app1 = angular.module('app1', []);
app1.controller('ctrl1', function($scope){
$scope.first = 1;
$scope.second = 1;
$scope.updateValue = function() {
$scope.calculation = $scope.first + ' + ' + $scope.second +
' = ' + ($scope.first + $scope.second);
};
});
Image:
I've tried moving around the "ng-app" to different parts of the code in the HTML file and just poking around with no luck.
The tutorial teacher also has a completed set of code here: http://www.newthinktank.com/2016/02/angularjs-tutorial/ and even when I copied this verbatim it didn't work. Could it be something wrong on my computer? For reference I am using the Atom text editor and google chrome as my browser. I tested it with other browsers and got the same result.
Any explanation would be greatly appreciated. Thanks in advance!
Just place this script at the top of the head. Angular JS CDN should be at the top always before your any java script file.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
Instead of this order,
<head>
<title>Angular Practice Page</title>
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
Change the order of your script files to this. It would definitely work.
<head>
<title>Angular Practice Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
Include Angular at the top. Since your script has reference to angular which is not loaded when your script.js executes.
Use input type number instead of text. Since, the text field give you string value which result in string concatenation instead of arithmetic operation.
var app1 = angular.module('app1', []);
app1.controller('ctrl1', function($scope){
$scope.first = 1;
$scope.second = 1;
$scope.updateValue = function() {
$scope.calculation = $scope.first + ' + ' + $scope.second +
' = ' + ($scope.first + $scope.second);
};
});
<!DOCTYPE HTML>
<html ng-app="app1">
<head>
<title>Angular Practice Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<!-- Adds a controller that the Angular module will control.
The view is the div element and all that it contains. The $scope
component is used to provide data to the view. -->
<body>
<div ng-controller="ctrl1">
<span>Calculate:</span>
<input type="number" ng-model="first" />
<input type="number" ng-model="second" />
<button ng-click="updateValue()">Sum</button>
<br /><br />
{{calculation}}
<!-- Test Calculation -->
<p>
5 + 5 = {{5+5}}
</p>
</div>
</body>
</html>
I tried doing some input validation on my inputs at my ejs template using angular, but it doesn't seem to be working correctly, this is the code i used (from w3schools):
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
It's supposed to ouput something like this:
The input's valid state is: false
But instead it just returns this:
The input's valid state is: {{myForm.myInput.$valid}}
So is it in any way possible to use ejs and angular together?
You need to have a module and a controller defined, script should be loaded inside the body/head
HTML
<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="">
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Controller
var app = angular.module('store', []);
app.controller('StoreController', function($scope) {
});
DEMO
<html ng-app="insert_app_name_here">
<body ng-controller="insert_controller_name_here">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
</body>
</html>
I would set up my angular app like the above code. Also, including the script at the end of your body tag is good practice. Moreover, removing the .min from your script tag to just angular.js instead of angular.min.js helps you debug your code better since you will be using it for development and not for production.
In setting up your app, I would include an app.js file where the code goes like this:
angular.module('insert_app_name_here', [])
In setting up your controller, I would include a controller file (i.e. mainCtrl.js) where the code goes like this:
angular.module('insert_app_name_here').controller('insert_controller_name_here, function($scope) {
});
As to linking angular with ejs, i am unfamiliar with ejs, therefore i cannot provide a solution for that.
I am new to Angular JS. I am trying to start with the basic Hello World Program. Here is my plunk http://plnkr.co/edit/uW1fHB7a17gpvn341sn3?p=preview.
var MainController = function($scope){
$scope.message = "Hello, Angular!";
}
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{message}}</h1>
</div>
</body>
</html>
I created a simple controller and has a single model binding in that. It is not working for me. I am not able to get what the problem is. Can anybody please help me in getting started.
You need to boostrap your app properly and define your controller correctly. Observe the following changes...
<html ng-app="app">
angular.module('app', []).controller('MainController', MainController)
Plunker - updated demo
The AngularJS Getting Started resources should be packed with everything you'd like to know to get up and running
A couple things.
You need to create an angular module:
var app = angular.module('myApp',[]);
The second argument is an array of dependency modules. You don't need one here.
Then change ng-app to ng-app="myApp" referencing whatever you named your module.
Then you need to create a controller the angular way.
app.controller('MainController',MainController);
Here's the full script. Plunkr
function MainController($scope) {
$scope.message = 'Hello World';
}
var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
Your original code works fine with Angular 1.0, just not with 1.4
Just thought it was worth mentioning, in case you were following a tutorial, and wondering why it wasn't working or something.
See this plunkr working fine in 1.0 with equivalent code to yours...
http://plnkr.co/edit/zbWvwxVDvhhVKgc5lGrr?p=preview
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
{{message}}
</div>
</body>
</html>
and
var MainController = function($scope) {
$scope.message = "Hello, Angular!";
}
I am starting an O'Reilly book, AngularJS and the first example is as follows. On my end the "{{greeting.text}}" is showing up as that inside of being replaced with hello. I have the angular linked properly, and when I put it into jsFiddle it doesn't work as well, unless I change onLoad to no wrap- then it works.
I am using Webstorm on mac and I'm thinking my problem may be in there, but can't find anything that has fixed it.
Thank you for helping what is probably a simple solution.
HTML
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="angular.js"></script>
<script src ="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello'};
}
Seems like something might be wrong with the way you are including angular. The following code works fine for me
index.html:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src ="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controllers.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello'};
}
Open up your index.html in chrome and press Command + Option + J and when the developer tools open up, head to the network tab, refresh the page and see if you are loading your angular.js script correctly - if not, that is the issue.
Which angular version you use?
Mine is 1.3
angular.module('HelloApp', [])
.controller('HelloController', ['$scope', function($scope) {
$scope.greeting = { text: 'Hello'};
}