I'm having a really hard time understanding what I'm doing wrong and I'm hoping someone can help. I need to build a small app just to practice with angular-gettext. I followed the tutorial here: http://lostechies.com/gabrielschenker/2014/02/11/angularjspart-12-multi-language-support/
My project, however, will not translate. I don't get any errors in the console. I have all of the necessary dependencies and everything appears to be working correctly (grunt, bower, etc.), so it must be in the actual code. Probably a curly brace or something.
Here's my app.js file:
var app = angular.module('app', ['gettext']);
app.controller("TestCtrl", function($scope){
app.run(function(gettextCatalog){
gettextCatalog.currentLanguage = 'de';
gettextCatalog.debug = true;
});
});
Index.html:
<!DOCTYPE html>
<html>
<head>
<title>Translation Sample</title>
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap/dist/css/bootstrap.css"/>
</head>
<body ng-app="app">
<div ng-controller="TestCtrl">
<p translate>Welcome to my app</p>
<p translate>We want to test globalization and localization</p>
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-gettext/dist/angular-gettext.js"></script>
<script src="app.js"></script>
<script src="translations.js"></script>
</body>
</html>
Gruntfile.js:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-angular-gettext');
grunt.initConfig({
nggettext_extract:{
pot: {
files: {
'po/template.pot': ['**/*.html']
}
}
},
nggettext_compile:{
all: {
files: {
'translations.js': ['po/*.po']
}
}
}
})
};
Translations.js:
angular.module('gettext').run(['gettextCatalog', function (gettextCatalog) {
gettextCatalog.setStrings('de', {
"We want to test globalization and localization":"Wir wollen testen, Globalisierung und Lokalisierung",
"Welcome to my app":"Willkommen auf meiner App"
});
}]);
I know this is long. Thanks for reading and thanks in advance for any suggestions.
This might be an angular-gettext bug: your strings are loaded after you set the language. With recent changes in angular.js, this might break.
I'll push a fix for that.
Update: angular-gettext 1.1.2 was released with a fix for this (try it out). Note that in recent versions the use of currentLanguage has been deprecated. You should use gettextCatalog.setCurrentLanguage('de') instead.
https://angular-gettext.rocketeer.be/dev-guide/api/angular-gettext/
Related
!!Total beginner here!!
I have run into an error - chrome console gives me an error regarding:
[$injector:modulerr]
The problem is that I have not installed angular-route.min.js which is what you're supposed to do in all angular versions after 1.2. My trouble began when I installed angular-route.min.js, put it in the same file as angular and my HTML files, referenced it in the code with <script src="angular-route.min.js"></script> but nothing happened.
I also put angular.module('app.js', ['ngRoute']); into my js file.
There are no typos in my code, I checked for those. On top of all that the console gives me an error saying angular-route.min.js was not found.
All help welcome, I have spent a long time googling but nothing came of it.
(function () {
'use strict';
angular.module('MSgApp', []);
controller:('MsgController', MsgController);
angular.module('app.js', ['ngRoute']);
MsgController.$inject = ['$scope'];
function MsgController($scope) {
$scope.name = "Chris";
$scope.stateOfBeing = "hungry";
$scope.sayMessage = function () {
return "chris likes to eat cookies";
};
$scope.feedChris = function () {
$scope.stateOfBeing = "fed";
};
}
})();
<!DOCTYPE html>
<html ng-app='DIApp'>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
<title>custom attributes</title>
</head>
<body>
<div ng-app="app.js"></div>
<h1>expressions and interpolation</h1>
<div ng-controller='MsgController'>
{{name}} has a message for you: <br>
{{sayMessage()}}
<div>
<button ng-click="feedChris()">Feed chris</button>
<br>
<img ng-src="D:/stuff/coursera angular/chris_{{stateOfBeing}}.png">
</div>
</div>
</body>
</html>
Errors after unminified both angular and angular-route
As per StackOverflow --> Angular JS Uncaught Error: [$injector:modulerr]:
EDIT: This is what ultimately solved the issue and what Chris B did to make it work :
I have come across another code in the Coursera course and this one seems to be working after putting the three links from the answer by #ulmer-morozov into the head tag instead of referencing files on my pc. I guess that's it,
From Answer of #ulmer-morozov:
In development environments I recommend you to use not minified distributives. And all errors become more informative! Instead of angular.min.js, use angular.js.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js">
From Accepted Answer #Lauri Elias:
Try adding this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
From Answer of #Khanh TO:
Try adding:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js">
and:
angular.module('MyApp', ['ngRoute','ngResource']);
function TwitterCtrl($scope,$resource){
}
You should call angular.module only once with all dependencies because with your current code, you're creating a new MyApp module overwriting the previous one.
From angular 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.
I am new in angularjs. I have a issue scope variable not working in script tag. I had try ng-src but still not working.
script_path variable not working with script.js if I add only {{script_path}} working fine but if I add {{script_path}}/script.js this is not working.
My example code
<html ng-app="myApp">
<head ng-controller='HeadCn'>
<meta charset="utf-8">
<title>test</title>
<script src="js/angular.js"></script>
<script ng-src="{{script_path}}/script.js"></script>
</head>
<body class="container">
<script>
var app = angular.module('myApp', []);
app.controller("HeadCn", function($scope) {
$scope.script_path = "js/";
})
</script>
</body>
</html>
please give me solution how to use scope variable anywhere in controller.
Thanks in advance
Jimbrooism is right, you are getting this error because security concerns are not being handled.
Please read carefully at https://docs.angularjs.org/api/ng/service/$sce
You may need to use other filter as described on that page or you can completely disable sce at config level, which not recommended
use $sce resolve the problem, create a filter for solve this problem
angular.module('myApp')
.filter('trustUrl', function ($sce) {
return function(url) {
return $sce.trustAsResourceUrl(url);
};
});
<script ng-src="{{script_path}}/script.js | trustUrl "></script>
I'm trying to learn Angular and attempting to write my first controller outside of a web-based tutorial. I keep getting the error in the title in the JS console and can't figure out what's going on. The link takes me to a page referencing the need to include ngRoute, which I've done according to the API. Surely I'm missing something but I can't see what it is. Any help would be greatly appreciated, thanks!
index.html
<DOCTYPE html>
<html ng-app="myApp">
<head>
<title>First Angular Project</title>
<link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="FirstController">
Did the controller load?
</div>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-route.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})
Your issue is that you forgot to invoke the iife which registers module and controller.
(function () {
var app = angular.module('myApp', ['ngRoute']);
app.controller('FirstController', function(){
console.log("FirstController loaded");
});
})();//<-- here
Link (in the error) talks about ngRoute as a hint only for one of the reasons your module might not have been available/instantiated when angular ng-app directive tried to bootstrap it. But in your case it does not even exists due to your failure to invoke the anonymous function as IIFE.
I'm following the video tutorials on egghead.io but while trying to follow his example when he created a factory (see video here) I keep getting "angular is not defined" Reference Error but I have included the angular script
This is my html page:
<!DOCTYPE html>
<html>
<head>
<title>Prototype</title>
<link rel="stylesheet" type="text/css" href="foundation.min.css">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div data-ng-app="">
<div data-ng-controller="FirstController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
<div data-ng-controller="SecondController">
<input type="text" data-ng-model="data.message">
<h1>{{ data.message }}</h1>
</div>
</div>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
and this is my javascript file "main.js":
//Services
// step 1 create an app
var myApp = angular.module('Data', []).
// tep 2 create factory
// Service name, function
myApp.factory('Data', function(){
return { message: "I'm Data from a Service" }
});
//Controllers
function FirstController($scope, Data){
$scope.data = Data;
}
function SecondController($scope){
}
I have read a few posts where similar happen (here) and please correct me if I'm wrong but I think it is to do with Boot strapping andI have tried manually bootstrapping using angular.bootstrap(document, ['Data']); but with no success, still get same error.
But What I want to know is, Why this works for so many examples online, like the egghead video series, but I have issues as I believe I have followed his video very closely. is it a change in angular in recent versions?
You have to put your script tag after the one that references Angular. Move it out of the head:
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
The way you've set it up now, your script runs before Angular is loaded on the page.
You have not placed the script tags for angular js
you can do so by using cdn or downloading the angularjs for your project and then referencing it
after this you have to add your own java script in your case main.js
that should do
I had the same problem as deke. I forgot to include the most important script: angular.js :)
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
I'm trying too bootstrap an angular.js project. This is my index.html:
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<base href="{% url 'app' %}" />
<title>Project</title>
</head>
<body>
<div ng-view>
<p>Loading...</p>
</div>
<script>
var url = function(path) { return '{{ STATIC_URL }}' + path };
</script>
<script src="{{ STATIC_URL }}js/jquery-1.10.1.js"></script>
<script src="{{ STATIC_URL }}js/angular.js"></script>
<script src="{{ STATIC_URL }}js/project/app.js"></script>
<script src="{{ STATIC_URL }}js/project/controllers.js"></script>
</body>
</html>
The url 'app' on the head simply prints the subpath, /app, for example. This is my app.js:
'use strict';
var app = angular.module('myapp', []);
app.config(['$routeProvider', function($router) {
$router.when('/', {
templateUrl: url('partials/foo.html'),
controller: controllers.Foo
});
}]);
The problem is that everytime I try to run it, an exception is raised: Uncaught Error: No module: myapp, and this is almost the same way angular-seed works. I searched on Google and StackOverflow but none of the answers (one and two) helped me.
Here's a fiddle about my error (you should open the browser's console to see it). What's going wrong?
The order of your script is very important, try putting it in your <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('Ctrl', function($scope){
$scope.variable = "Hello";
});
</script>
<body ng-app="myapp">
<div ng-controller="Ctrl">
<p>{{variable}}</p>
</div>
</body>
Try it here:
http://jsfiddle.net/vvfnN/2/
Complementing AlexCheuk's answer, I realized that my app.js file was involved in a closure:
(function($) {
'use strict';
// all angular.js stuff
)(jQuery);
Removing the closure it worked (without changing the orders as Alex said)! I don't know exacly why, but that's ok.
I face the same problem but none of the above trick worked for me but this one, see the setting in image
Change from "OnLoad" to "No wrap - "
In my case when using IIFE notation I forgot self invoke parentheses.
(function () {
angular.module("adminApp", []);
}() //don't forget self invoke parentheses
);
i was facing the same error but i was doing a silly mistake, i was not including the controller.js file in my jsp page.
just included this:
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/controller.js"></script>
and it worked excellently.
I ran into a similar issue where there, while running Yeoman/grunt server.
What fixed it for me, was restarting the grunt server.