I am trying to build a simple web app that communicates with an external API , for the first step i wish to check if my controller,service-html integration is all in placed , so I'm tying to bind a simple variable from the controller to the view, but i am getting {{msg}} instead of a successful bind.
please ignore the service for now its just my fundumentals for later on.
main.html :
<!DOCTYPE html>
<html >
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="controller.js"></script>
<head></head>
<body ng-app="queueApi" ng-controller="MainController">
<div>
<h1>{{msg}}</h1>
</div>
</body>
</html>
queueservice.js
angular.module('queueApi')
.factory('queueService', function ($resource){
return $resource('http://127.0.0.1:8080/queue/:id',{id: '#id'});
});
controller.js
var app = angular.module('queueApi' , ['ngResource']);
app.controller('MainController', function($scope,$http, queueService){
$scope.msg = "Hi tom";
// $scope.items = queueService.query({id:2}); //getting all from id 2
});
If you look at your console you can see the error in module creation. It is because the ngResource module is in external source file rather than angular.min.js. Add also the angular-resource.js.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-resource.min.js"></script>
<script src="controller.js"></script>
In addition to Hamlet Hakobyan's answer, you must ensure that your modules have been included in correct order. With your code structure controller.js should precede queueservice.js.
From the documentation:
Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.
Related
Only the html output and the {{10 + 10}} of the web page is rendered. I'm not sure what what I'm doing wrong but I'm guessing it's some setup type issue in my visual studio project.
(function () {
var app = angular.module("ShipmentsHome", []);
var EditShipmentsController = function ($scope) {
$scope.message = "--Still need to create grid here--";
};
app.controller("EditShipmentsController", ["$scope", EditShipmentsController]);
}());
!DOCTYPE html>
<html>
<head>
<title>Shipments Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
<script src="../../lib/home.js"></script>
</head>
<body ng-app="ShipmentsHome" ng-controller="EditShipmentsController">
<h1>Product Transfers</h1>
<p>Create or modify a transfer below:</p>
<div> {{message}}</div>
<p>look above for message from controller</p>
<h2>{{10 + 10}}</h2>
</body>
</html>
I am not seeing any errors in the console. Below is what I am seeing:
Probably the problem will be with your relative path. I got it working when I replace the script source with the actual controller script. please check your path and correct it.
Issue was the project I was working with was setup to use .ts files and not .js files. I needed to create the project to work with angularjs not typescript.
Values are not getting updated in the Firebase Realtime Database. I am new to web development but I knew a little html. Can you please check what the problem here.
I left Firebase Config blank intentionally for this question.
I tried using most of the code given in Firebase documentation.
<!DOCTYPE html>
<html>
<head>
<title>"Web App"</title>
</head>
<body>
<div class="mainDiv" align="left">
<h1 align="left">"Firebase web page"</h1>
<textarea id="Command" placeholder="ON/OFF" stClyle="text align:left; overflow:auto; border:6px outset #000000;"></textarea>
<button id="Submit" onclick="submitclick()">Click Me!</button>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "___________________________",
authDomain: "_________.firebaseapp.com",
databaseURL: "https://___________.firebaseio.com",
projectId: "________",
storageBucket: "_________.appspot.com",
messagingSenderId: "________",
appId: "_____________"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var mainTxt= document.getElementById("Command");
var submitbtn = document.getElementById("Submit");
function submitclick()
{
var com = mainTxt.value;
firebase.database().ref().child("username").set(com);
}
</script>
</body>
</html>
Have a look at the documentation on how to add Firebase to your Web/JavaScript project: https://firebase.google.com/docs/web/setup
By doing
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
you are adding the Firebase core library, but this is not sufficient. You have to add the library(ies) for the service(s) you are going to use, in your case the Realtime Database.
Therefore you need to do
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-database.js"></script>
Note the following line
<!-- TODO: Add SDKs for Firebase products that you want to use
in your own code: it indicates exactly what is described above.
First of all to use firebase you have to include
<script src="https://www.gstatic.com/firebasejs/6.1.0/firebase-firestore.js"></script>
Still it won't work because this is not how you write to firebase. You write as key value pairs. Try
firebase.database().collection("userNames").add({name : "user_name"});
or if you trying to update a document
firebase.database().ref().child("userName").set({name : "user_name"});
Here is the official documentation : Add and Manage Data
As on the topic calling .set() or .add() may not always write data you have to check by using then() and catch().
So a complete example of updating a document value in firebase will be :
// Add a new document in collection "cities"
db.collection("users").doc("userName").set({
name: "USER_NAME"
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
I am not getting the expected message when using value recipe.
I am getting output as {{message}}, but I am expecting "hai services are working!!"
Please share where I am going wrong.
HTML code: Injector.html
<!DOCTYPE html>
<html>
<head>
<title>Practicing Angular JS</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="Injector.js"></script> <!-- Injector module file name -->
</head>
<body ng-app="injectormodule"> <!-- root module-->
<div ng-controller="controllerInjector">
{{message}}
<!-- controller name-->
</div>
</body>
</html>
Controller: Injector.js
var app = angular.module("injectormodule", ["servicemodule"])//name of service is servicemodule
.controller("controllerInjector", ["$scope", "message", function($scope, message){
$scope.message = message;
}]);
Service:(Value Recipe)
var myapp = angular.module("servicemodule", [])
.value("message", "hai services are working!!");
You have to define your servicemodule before your injectormodule, otherwise its creation will fail (since unable to find the servicemodule dependence).
Since the injectormodule failed from being created, the ng-app="injectormodule" will also be unable to bootstrap Angular on your DOM, thus won't interpret things like double brackets ({{ message }}).
Here is a working codepen.
You need to Inject your service into controller and need to create same module.
See this sample working fiddle which use service method to get text.
See other fiddle link also in comments
This question already has answers here:
Angularjs Uncaught Error: [$injector:modulerr] when migrating to V1.3
(5 answers)
Closed 6 years ago.
my controller.js file
function ServicesCtrl($scope) {
console.log("Hello From ServicesCtrl");
$scope.message = "Hello";
}
index.html file
<html>
<head>
<title>The MEAN Stack</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/angular.min.js"></script>
<script src="features/services/controller.js"></script>
</head>
<body ng-app="">
<div class="container" ng-controller="ServicesCtrl">
<h1>Service Client Maker</h1>
{{message}}
</div>
</body>
</html>
it is not displaying my message. controller.js file is not accessable
Its clear that you are trying to define a controller like a simple js function.
But, It works in a different way.
You have to initialize an angular app within an java-script variable like this,
var app=angular.module("MyApp");
and handle that entire angular application, through that js variable "app".
I strongly recommend you to completely go through below tutorials.. Then, Start creating the App..
https://www.tutorialspoint.com/angularjs/angularjs_mvc_architecture.htm
http://www.w3schools.com/angular/default.asp
You have to define your angular application and its modules.
var app = angular.module('myApp');
app.controller('serviceController', function() {
$scope.message = "Nice, I now know how to create an angular app";
})
And you will now be able to access it on your page:
<body ng-app="myApp">...
<div ng-controller="serviceController">...
{{message}}
This should help you since you're getting started with angular.
Here this example
define your controller name (controller.js)
var app = angular.module('myApp', []);
app.controller('ServicesCtrl', function($scope) {
$scope.message = "Hello";
});
define your app name (index.html)
<body ng-app="myApp">
<div class="container" ng-controller="ServicesCtrl">
<h1>Service Client Maker</h1>
{{message}}
</div>
</body>
js:
$scope.hello = "hello world";
html:
<input ng-model="hello">
<label>{{hello}}</label>
It sets the label good on initializing but after that it stop updating. What's wrong?
Try to use this in your controller:
$scope.system = {};
$scope.system.hello = 'hello world';
Here you Go
as per your code there were no clues for errors so i just answered with working code and some definition of 2-way data-binding
The updating is called two-way binding a good feature from angular .
Little Brief about 2 way data binding :-
Two way data binding in angularjs framework is approach to synchronize
the data between model and view. What it means that if there is any
change happens in model ( Back-end ) then view ( front-end ) will be
updated and vice versa.
data binding docs Angular data binding Documentation
Sample Js: -
'use strict';
var app = angular.module('mainApp', []);
app.controller('registerCtrl', ['$scope', function($scope){
$scope.hello='hello world';
}]);
Html :-
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="registerCtrl">
<input type="text" ng-model="hello"/>
{{hello}}
</body>
</html>
You properly Binded to the text box with model
plunker https://plnkr.co/edit/go9r3x?p=preview