I am facing similar issues while using angularJS-translate module.
Reference Url to similar issue:
i18n using Angular Translate StaticFilesLoader
This is my JS code:
var app = angular.module('myApp', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'locale-',
suffix: '.json'
});
$translateProvider.preferredLanguage('en_US');
});
app.controller('langController', ['$scope', '$translate', function ($scope, $translate) {
$scope.switchLanguage = function (key) {
$translate.use(key);
};
}]);
html:
<!doctype html>
<!--[if lt IE 7]> <html class1="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Description" content="angular translate brings internationalization (i18n) and localization (l10n) to your Angular apps!">
<meta name="fragment" content="!">
<title>angular translate - i18n for your Angular apps, made easy.</title>
<script src="js/angular.js"></script>
<script src="js/angular-translate.min.js"></script
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div class="span4">
<div class="well">
<h2 translate>Hello</h2>
<p translate>This is a paragraph</p>
<p translate>Welcome to Hello world!</P>
</div>
<div ng-controller="langController">
<button class="btn" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN" class="ng-scope">english</button>
<button class="btn" ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE" class="ng-scope">german</button>
</div>
<hr>
<div ng-controller="langController">
<select ng-model="lang" ng-selected="selected">
<option disabled="disabled" selected="selected">Select Language</option>
<option ng-click="changeLanguage('en')" class="ng-scope">English</option>
<option ng-click="changeLanguage('de')" class="ng-scope">German</option>
</select>
</div>
</div>
</body>
</html>
locale-en_US.json:
"TITLE":"Hello",
"FOO":"This is a paragraph.",
"BUTTON_LANG_EN":"english",
"BUTTON_LANG_DE":"german",
"TEXT":"Welcome to Hello world!"
locale-de_DE.json:
"TITLE":"Hallo",
"FOO":"Dies ist ein Paragraph.",
"BUTTON_LANG_EN":"englisch",
"BUTTON_LANG_DE":"deutsch",
"TEXT":"herzlich willkommen auf Hallo Welt!"
i have placed .js,.html, locale-en_US.json,locale-de_DE.json language files in the same folder and I am not able to get the output as desired , getting error in Firefox console: Error: [$injector:unpr] Unknown provider: $translateStaticFilesLoaderProvider <- $translateStaticFilesLoader.
Can you help me on this please?
Thanks,
Ketan
change ng-click="changeLanguage('en')"
with: ng-click="changeLanguage('en_EN')"
change ng-click="changeLanguage('de')"
with: ng-click="changeLanguage('de_DE')"
the language json file is
{
"TITLE":"Hallo",
"FOO":"Dies ist ein Paragraph.",
"BUTTON_LANG_EN":"englisch",
"BUTTON_LANG_DE":"deutsch",
"TEXT":"herzlich willkommen auf Hallo Welt!"
}
You need this js in index file
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate-loader-static-files/master/angular-translate-loader-static-files.js"></script>
Related
I just started with angular and I've been experimenting with single page website, so I've basically just created really simple html to change, such as:
login.html
<div>
<h1>login</h1>
</div>
register.html
<div>
<h1>login</h1>
</div>
But when I click the links below leading to login.html and register.html, nothing happens.
Index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
login
register
<div ng-view>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
And here is where my module lies
app.js
'use strict';
var app = angular.module('myApp', []);
app.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when("/", {
templateURL : "view/login.html",
})
.when("/register", {
templateUrl : "view/register.html"
})
.otherwise({redirectTo: '/login'});
}]);
I'm using JetBrains WebStorm for the premade angular html file, and local server.
Thank you
Let try with this way
angular.module('myApp', ['ngRoute']);
login
register
The problem lied with the server I was running, it was not properly set up.
I'm working on a Angular tutorial that uses the boilerplate Angular-seed and Firebase. The error I am getting is: ReferenceError: Firebase is not defined.
This is my contact.js where my error is being referenced:
'use strict';
angular.module('myContacts.contacts', ['ngRoute','firebase'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contacts/contacts.html',
controller: 'ContactsCtrl'
});
}])
// Contacts Controller
.controller('ContactsCtrl', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
// Init Firebase
var ref = new Firebase('https://mycontacts-app.firebaseio.com/contacts');
// get Contacts
$scope.contacts = $firebaseArray(ref);
console.log($scope.contacts);
}]);
This is my app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myContacts', [
'ngRoute',
'firebase',
'myContacts.contacts'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/contacts'});
}]);
this is my index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myContacts" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myContacts" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MyContacts App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="large-12 columns">
<h1>myContacts</h1>
<hr>
</div>
</div>
<div ng-view></div>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/firebase/firebase.js"></script>
<script src="bower_components/angularfire/dist/angularfire.js"></script>
<script src="bower_components/foundation/js/foundation.js"></script>
<script src="app.js"></script>
<script src="contacts/contacts.js"></script>
</body>
</html>
this is my contact.html
<div class="row" ng-controller="ContactsCtrl">
<div class="large-10 columns">
<h3>Your Contacts</h3>
<table>
<thead>
<tr>
<th width="200px">Name</th>
<th width="200px">Company</th>
<th width="25%">Email</th>
<th width="25%">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Some Company</td>
<td>sothing#something.com</td>
<td>Edit
Delete</td>
</tr>
</tbody>
</table>
</div>
<div class="small-12 large-2 columns">
+
</div>
</div>
These are all the files that I've changed from the boilerplate angular-seed. If anyone can help I would be grateful.
You are looking at a tutorial that is outdated. Things are a little bit changed with the new version of Firebase.
Things like this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseArray) {
var ref = new Firebase('https://...');
$scope.contacts = $firebaseArray(ref);
...
});
are changed into this:
var app = angular.module('app', ['firebase']);
app.controller('Ctrl', function($scope, $firebaseArray) {
var config = {
apiKey: "***",
authDomain: "***.firebaseapp.com",
databaseURL: "https://***.firebaseio.com",
storageBucket: "***.appspot.com",
messagingSenderId: "***"
};
firebase.initializeApp(config);
var ref = firebase.database().ref().child("contacts");
$scope.contacts = $firebaseArray(ref);
...
});
Of course you need to include firebase.js and angularfire.js into your index.html but you already did that.
I wasn't sure if you just want to read your data from the database or something more but I think this example is enough. Also try to read the official documentation first before you try to implement something from a tutorial (especially an old one). In the world of web development changes are very frequent.
Now I have read that angular doesn't allow global controllers but I don't believe I am making it global. What is even more odd is that I even created a script in the HTML file and it gave me the same error. I am positive that code should have worked.
I am using Intellij and used its template to generate a small boiler plate via bower.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body ng-app="myApplication">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<script src="controllers/clickablecontroller.js"></script>
</body>
</html>
clickablecontroller.js
angular.module('myApplication',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
----------------UPDATE 1 -----------
app.js
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
clickable is your controller. If you want to output value of click property you need {{click}}. Angular will know what the controller is and show to value of click property of $scope in that controller.
Maybe you can try this:
var myModule = angular.module('myApplication', []);
myModule.controller('clickable', function ($scope) {
$scope.clickMe = function(){
$scope.click = click++;
}
});
Besides,
use {{click}} to instead of {{clickable.click}}
I had to had my new module in my apps.js file.
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApplication'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
Then I had to declare click as a variable like so:
angular.module('myApplication',[])
.controller('clickable',['$scope', function($scope){
console.log("I am in the controller")
var click = 0
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Then in my index.html file I could simply use:
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{click}}
</div>
i am new to angular js. i write the code for perform multiple controller concept but it is not working .i dont know where i am doing wrong?
following code i am using
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="number" ng-model="q">
<input type="number" ng-model="c">
<p>{{ q*c }}</p>
</div>
<div ng-controller="newone">
<p>{{lastName|uppercase}}</p>
</div>
</body>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope)
{
$scope.q=10;
$scope.c=5;
});
</script>
<script src="control.js"></script>
</html>
**control.js**
var app=angular.module('myApp',[]);
app.controller('newone',function($scope){
alert();
$scope.firstName="Vinoth";
$scope.lastName="Kumar";
$scope.full=function()
{
return $scope.firstName+''+$scope.lastName;
}
});
above code is not working can any one help me to fix this
In controller.js you don't need to declare the module again :)
var app=angular.module('myApp',[]);
change it to var app=angular.module('myApp');
Just trying to get a handle on angularJS as was building a simple little app where you can make a list of people and in the list their names are colored. The color is chosen by a select drop-down box.
The trouble is any way I try to add the new color to a style I run into trouble. At this point names get added to the list correctly, but they don't get colored correctly and I get the following error:
Error: [$parse:syntax] Syntax Error: Token 'undefined' not a primary expression at column null of the expression [{color:] starting at [{color:].
http://errors.angularjs.org/1.2.16/$parse/syntax?p0=undefined&p1=not%20a%20primary%20expression&p2=null&p3=%7Bcolor%3A&p4=%7Bcolor%3A
at http://localhost:8000/app/bower_components/angular/angular.js:78:12
at Parser.throwError (http://localhost:8000/app/bower_components/angular/angular.js:10266:11)
at Parser.primary (http://localhost:8000/app/bower_components/angular/angular.js:10239:14)
at Parser.unary (http://localhost:8000/app/bower_components/angular/angular.js:10492:19)
at Parser.multiplicative (http://localhost:8000/app/bower_components/angular/angular.js:10475:21)
at Parser.additive (http://localhost:8000/app/bower_components/angular/angular.js:10466:21)
at Parser.relational (http://localhost:8000/app/bower_components/angular/angular.js:10457:21)
at Parser.equality (http://localhost:8000/app/bower_components/angular/angular.js:10448:21)
at Parser.logicalAND (http://localhost:8000/app/bower_components/angular/angular.js:10439:21)
at Parser.logicalOR (http://localhost:8000/app/bower_components/angular/angular.js:10427:21) <li ng-repeat="player in players" ng-style="{color:" "stylecolor(player)"}="" class="ng-scope ng-binding">
Which I think means player.color is coming back null? If there is a way to do this without the function call that would be preferable I was just trying emulate this solution:
dynamically adding directives in ng-repeat
Here is my html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Scratch Snake</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="css/app.css"/>
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"> </script>
<!-- Bootstrap files -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<script src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body ng-controller = "PlayerAdditionCtrl">
<ul class="list-group">Players:
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
</ul>
<div id="playerEntry">
<p>
<label for="playername">Name: </label><input id="playername" class="form-control" type="text" name="playername" ng-model="playername">
<select id="playerColor" ng-model="playercolor">
<option value="#f00">Red</option>
<option value="#00f">Blue</option>
<option value="#0f0">Green</option>
<option value="#ff0">Yellow</option>
</select>
</p>
<button type="button" class = "btn btn-primary" id="addPlayerBtn" ng-click="addPlayer()">Add Player</button>
<button type="button" class = "btn btn-success" id="doneBtn" onclick="moveToGame();">All Done!</button>
<button type="button" class = "btn btn-info" id="defaultsBtn" onclick="loadDefaults();">Load Defaults</button>
<br>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
And my controller:
'use strict';
/* Controllers */
angular.module('myApp.controllers', [])
.controller('PlayerAdditionCtrl', ['$scope', function($scope) {
$scope.players = [];
//add a player
$scope.addPlayer = function()
{
$scope.players.push(
{
name: $scope.playername,
color: $scope.playercolor
});
}
$scope.styleColor = function (player)
{
return { color: player.color }
}
}]);
remove
$scope.styleColor() in your controller
change
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
to
<li ng-repeat="player in players" ng-style="{color: player.color}" > {{player.name}} </li>
Change
<li ng-repeat="player in players" ng-style = {color: "styleColor(player)"} > {{player.name}} </li>
to
<li ng-repeat="player in players" style="color: {{player.color}};"> {{player.name}} </li>
If you stick with ng-style, two-way data binding will update every player to the selected color. Without using angular.copy, changing your data structure, or doing something else to break two-way data binding, it won't be possible to have players be different colors.
Here's a working Plunker example: http://plnkr.co/edit/wEpKzN?p=preview