This is my html:
<!DOCTYPE html>
<html ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body ng-controller="SampleCtrl">
<!-- anything typed in here is magically saved to Firebase! -->
<input type="text" ng-model="data.text"/>
<!-- all changes from Firebase magically appear here! -->
<h1>You said: {{ data.text }}</h1>
</body>
</html>
and this is my app.js file:
(function() {
var app = angular.module("sampleApp", ["firebase"])
app.controller("SampleCtrl", function($scope, $firebaseObject) {
var ref = new Firebase("https://fiery-inferno-4208.firebaseio.com/data");
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "data");
});
})();
I copied it from this example: https://www.firebase.com/docs/web/libraries/angular/quickstart.html
When I try to run it on my own computer, I get these errors in the console:
Uncaught SyntaxError: Unexpected token <
and
Uncaught Error: [$injector:modulerr]
I can't figure out what's wrong!
Your module isn't being loaded because the function you create is never executed. Looks like you are missing () right before the final ; in your script. This fixes it for me:
(function() {
var app = angular.module("sampleApp", ["firebase"])
app.controller("SampleCtrl", function($scope, $firebaseObject) {
var ref = new Firebase("https://fiery-inferno-4208.firebaseio.com/data");
var syncObject = $firebaseObject(ref);
syncObject.$bindTo($scope, "data");
});
})();
$injector:modulerr basically means the module failed to load, could be a number of things.
<script>
var myApp = angular.module("myApp", ["firebase"]);
myApp.controller("MyController", ["$scope", "$firebaseArray",
function($scope, $firebaseArray) {
//CREATE A FIREBASE REFERENCE
var ref = new Firebase("https://qst13ns0z14.firebaseio-demo.com/");
// GET MESSAGES AS AN ARRAY
$scope.messages = $firebaseArray(ref);
//ADD MESSAGE METHOD
$scope.addMessage = function(e) {
//LISTEN FOR RETURN KEY
if (e.keyCode === 13 && $scope.msg) {
//ALLOW CUSTOM OR ANONYMOUS USER NAMES
var name = $scope.name || "anonymous";
//ADD TO FIREBASE
$scope.messages.$add({
from: name,
body: $scope.msg
});
//RESET MESSAGE
$scope.msg = "";
}
}
}
]);
</script>
<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<link rel="stylesheet" href="/resources/tutorial/css/example.css"/>
</head>
<body ng-controller="MyController">
<!-- CHAT MARKUP -->
<div class="example-chat l-demo-container">
<header>Firebase Chat Demo</header>
<div class="example-chat-toolbar">
<label for="nameInput">Username:</label>
<input ng-model="name" type="text" id="nameInput" placeholder="enter a username...">
</div>
<ul id="example-messages" class="example-chat-messages">
<li ng-repeat="msg in messages">
<strong class="example-chat-username">{{ msg.from }}</strong>
{{ msg.body }}
</li>
</ul>
<footer>
<input ng-model="msg" ng-keydown="addMessage($event)" type="text" id="messageInput" placeholder="Type a message...">
</footer>
</div>
</body>
</html>
Related
I have built a small application to switch languages
I create a controller where I get the value from ng-model and then assign the value to a variable. I need help to pass this value in app.config.
Code:
var app = angular.module("myApp", ['pascalprecht.translate']);
var name = 'Anuj';
app.controller("translateController", ["$scope", "$translate", function($scope, $translate) {
$scope.changeValue = function() {
name = $scope.textname;
$translateProvider.translations('en', en_translations);
}
$scope.changeLanguage = function(lang) {
$translate.use(lang);
}
}]);
app.config(["$translateProvider", function($translateProvider) {
var en_translations = {
"language": name,
"greeting": "Welcome Dinesh"
}
var sp_translations = {
"language": "Selected Language Spanish",
"greeting": "Bienvenida Dinesh"
}
$translateProvider.translations('en', en_translations);
$translateProvider.translations('sp', sp_translations);
$translateProvider.preferredLanguage('en');
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
<script data-require="angular-translate#*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-translate/bower-angular-translate/2.5.0/angular-translate.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="translateController">
<h1>Demo for angularJS translator</h1>
<input type="text" name="" ng-model="textname" /> {{textname}}
<button ng-click="changeValue()">Change</button>
<div>
<button ng-click="changeLanguage('en')">English</button>
<button ng-click="changeLanguage('sp')">Spanish</button>
</div>
<h2>{{'language' | translate}}</h2>
Hello!!!
<p>{{'greeting' | translate}}</p>
</div>
</body>
</html>
You can see code in plunker
I have researched my issue and tried many solutions but have not solved it.
For some reason angular does not seem to be loading in plunker.
I have head iffy are no longer supported in later version in angular, but I have tried loading an older version and still does not work.
Any ideas on how I can get this running?
Here is the link:
http://plnkr.co/edit/rrnzNjze2QqkWtjvNUNH?p=preview
HTML
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.1.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.0/angular-bootstrap-prettify.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
<div>
{{ error }}
</div>
<div>
<div>
Name: {{user.name}}
</div>
<div>
Location: {{user.location}}
</div>
<div>
<img ng-src="{{user.avatar_url}}" title="{{user.name}}" />
</div>
</div>
</body>
</html>
Javascript
// Code goes here
var app = angular.module("githubViewer", []);
var MainController = function($scope, $http) {
var onUserComplete = function(response){
$scope.user = response.data;
};
var onError = function(reason){
$scope.error = "Could not fetch the user request!";
};
$http.get("https://api.github.com/users/robconery")
.then(onUserComplete, onError);
$scope.message = "Hello, Angular!";
};
app.controller("MainController", ["$scope", "$http", MainController]);
Replace angular-bootstrap-prettify.js (I don't know what is angular-bootstrap-prettify, do you really need it?) by angular.js and your plunkr works.
I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script type="text/javascript">
angular.bootstrap(document, ['myApp1','myApp']);
</script>
</body>
</html>
Although i can see the expected output, but at the same time facing console error.
here is the description of error
(while i click on the url)
it says it already bootstrapped so i remove the 'myApp' from .bootstrap function, but that didnt work.
Please help.
You are doing both ng-app declarations and angular.bootstrap(document, ['myApp1','myApp']);.
You need to choose only one method, otherwise you get the well descripted error of multiple bootstrapped applications.
The problem is as explained in the previous comments, the automatic and manual initialization of modules.
Since you want to initialize them separately for each elements then try an approach like
<div data-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name"/>
</p>
<h1>Hello {{name}}</h1>
</div>
<div data-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
then
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
var els = document.querySelectorAll('[data-app]');
for (var i = 0; i < els.length; i++) {
angular.bootstrap(els[i], [els[i].dataset.app]);
}
Demo: Fiddle
I have this js
var app = angular.module('MyApp', []);
app.factory('Data', function () {
return {message: "I am data from a service"}
})
app.controller('FirstCtrl', function ($scope, Data) {
$scope.data = Data;
})
app.controller('SecondCtrl', function ($scope) {
})
and this is my html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>index</title>
<script src="Scripts/angular.js"></script>
<script src="Scripts/index.js"></script>
</head>
<body>
<div ng-controller="FirstCtrl" >
<input type="text" ng-model="message"/>
<h2>{{message}}</h2>
</div>
<div ng-controller="SecondCtrl" >
<input type="text" ng-model="message"/>
<h2>{{message}}</h2>
</div>
</body>
</html>
when I run the application, the message I am data from a service is not loaded into the h2 of the first controller although I made the factory and passed it to the controller
You are assigning $scope.data = Data. Then you should access it in the view
<div ng-controller="FirstCtrl" >
<input type="text" ng-model="data.message"/>
<h2>{{data.message}}</h2>
</div>