i18n Javascript Setup - javascript

I am trying to set up a simple dynamic page using i18n's javascript library. I am using their sample code of of their home page found here:
http://i18next.com/index.html
I can't get it to load the outlined json data, based on the sample html, javascript, and json code outlined below. Please let me know if there is a step, or a file naming convention I am missing.
home.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../jquery.js" ></script>
<script type="text/javascript" src="../i18next.js" ></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class="nav">
<li></li>
<li></li>
<li></li>
</ul>
<p>Test Paragraph</p>
</body>
</html>
script.js
i18n.init(function(t) {
// translate nav
$(".nav").i18n();
// programatical access
var appName = t("app.name");
});
data.json
{
"app": {
"name": "i18next"
},
"nav": {
"home": "Home",
"page1": "Page One",
"page2": "Page Two"
}
}
Any suggestions would be helpful.
Thanks!

if not configured i18next will load resources with this schema:
locales/__lng__/__ns__.json
if no namespace is set it will use translation as namespace. so if you rename your data.json to translation.json and put it into the folder location/en (or whatever language you got) it should work.
more about initialization could be found here
http://i18next.com/pages/doc_init.html

Related

create controller in ng-view page

I want to manage my controller specific to an ng-view page, therefore I put the controller in ng-view page and used that controller specific to that page only. However, the code does not show what it should show from that controller.
Here is my case.
I split my code into 3 files, which are "mainfile.php", "page1file.php", and "page2file.php". "mainfile.php" contains main page which routes to page 1 and page 2. To compare the results, I created different conditions for those 2 pages. "page1file.php" uses controller which has been defined in "mainfile.php", while "page2file.php" uses controller which is defined in the page itself.
In this circumtances, "page1file.php" successfully shows what I want, but "page2file.php" does not show what it should show. Please help me and give a very simple explanation and a simple solution since I'm very new to angularjs.
Here is my code. You can just copy them and run it on your php server.
mainfile.php :
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
<script type="text/javascript">
function routeReload($scope) {
$scope.routeReloading = function(){
window.location.reload();
};
}
routeReload.$inject = ['$scope'];
function routeConfig($routeProvider) {
$routeProvider
.when('/one',{
templateUrl:'page1file.php'
})
.when('/two',{
templateUrl:'page2file.php'
})
;
}
routeConfig.$inject=['$routeProvider'];
function testOne($scope) {
$scope.name = "page one";
}
testOne.$inject = ['$scope'];
var testNgView = angular.module('testNgView',['ngRoute']);
testNgView.config(routeConfig);
testNgView.controller('routeReload',routeReload);
testNgView.controller('testOne',testOne);
</script>
</head>
<body>
<div ng-app="testNgView">
<div ng-controller="routeReload">
View page <a ng-click="routeReloading();" href="#one">one</a> or
<a ng-click="routeReloading();" href="#two">two</a>
<div ng-view></div>
</div>
</div>
</body>
</html>
page1file.php :
<div ng-controller="testOne">
This is {{name}}
</div>
page2file.php :
<script type="text/javascript">
function testTwo($scope) {
$scope.name = "page two";
}
testTwo.$inject = ['$scope'];
testNgView.controller('testTwo',testTwo);
</script>
<div ng-controller="testTwo">
This is {{name}}
</div>
I don't think you can inline script modules in your view templates. Have a look at this working version of your app, the way I would organize it:
http://plnkr.co/edit/nSsagK1Y04akNJyMToah?p=preview
You can use .php files in place of the .html files, that shouldn't make a difference.
So your main file should look something like this:
<!DOCTYPE html>
<html>
<head>
<title>learn angular routing</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js"></script>
</head>
<body>
<div ng-app="testNgView">
View page one
or two
<ng-view></ng-view>
</div>
<script src="app.module.js"></script>
<script src="app.routes.js"></script>
<script src="views/page1/controller.js"></script>
<script src="views/page2/controller.js"></script>
</body>
</html>
If your goal is to use PHP to dynamically render your controllers, see the answer to this SO question: Angularjs: server side (php) rendering and data binding client side after an event
You may also be interested in this article, about loading Angular components after the application has been bootstrapped: http://www.bennadel.com/blog/2553-loading-angularjs-components-after-your-application-has-been-bootstrapped.htm
TL;DR: You would need to store a reference to $controllerProvider in the config phase, and then call $controllerProvider.register('MyController', MyController) in your inline script. I'm not sure how I feel about that though...

Running Controller in Angular and phpStorm

I'm new to angular and I'm learnign it using phpStorm tool.
It looks like I've done everything right, but I still can't get the right result when I execute the following html and Javascript codes, I did lots of researches on this and made sure that I followed the solutions provided without getting a step ahead:
index.html
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
<title>Ang Tut</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div ng-controller="GroupController">
<ul>
<li ng-repeat="group in groups" ng-model="group.group_name">
{{group.group_name}}
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</html>
and my app.js file:
var app = angular.module("myApp", []);
app.controller("GroupController", function($scope){
$scope.groups= [
{"id":"144","group_name":"new grouppp"},
{"id":"303","group_name":"Combination group"},
{"id":"323","group_name":"pcb"}
]
});
Same code is working, angular.min.js may not included properly, access your index.html file using http:// instead of file://
var app = angular.module("myApp", []);
app.controller("GroupController", function($scope){
$scope.groups= [
{"id":"144","group_name":"new grouppp"},
{"id":"303","group_name":"Combination group"},
{"id":"323","group_name":"pcb"}
]
});
<!DOCTYPE html>
<html ng-app="myApp" >
<head >
<title>Ang Tut</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Groups</h1>
<div ng-controller="GroupController">
<ul>
<li ng-repeat="group in groups" ng-model="group.group_name">
{{group.group_name}}
</li>
</ul>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</html>
I had to change the js file, so to include "function()" at the beginning of it, and also "()" at the end line. That solved the problem
You have to include ngRoute in your project.
<script src="angular-route.js"> You can get this file here.
And in your app.js
var app = angular.module("myApp", ['ngRoute']);
And it will start working correctly.
Now, the reason this works in jsFiddle but not locally.
That is because if you look at left pane in jsFiddle under Frameworks & Extensions, you will find the selected option to be no wrap - in <body>
Which means that the code you write in javascript block of js fiddle will be placed inside the body tag the the generated html and therefore, you don't need ngRoute.
But while running locally, I see you have your module initialization in different file viz. app.js that is where ngRoute comes into picture.
In older versions of angular ngRoute was included in angular itself. But in latest versions (not sure from which versions) the ngRoute module is provided separately.

Highlighting selected list item using javascript

I know, this question is asked like milion times, but I cant get it to work.
All my html,css and js files are located in same folder.
Below - my code, but I also mad jsfiddle here .
The code works fine in JSfiddle, but doesnt work on my computer, so i thought it might be something with my html head and linking to javascript file, but it seems to be right.
header of my html file :
<head>
<title>Nacionālie dārgumi</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
This is my html:
<div class="menu">
<ul class="main-menu">
<li><a class = "main_men_links" href="about.html">PAR PROJEKTU</a></li>
<li><a class = "main_men_links" href="">NACIONĀLIE DĀRGUMI</a></li>
<li><a class = "main_men_links" href="">SASNIEGUMI</a></li>
<li><a class = "main_men_links" href="">SĀKUMS</a></li>
</ul>
</div>
This is my script.js:
$(function(){
console.log('ready');
$('.main-menu li').click(function(e) {
e.preventDefault()
$that = $(this);
$that.parent().find('li').removeClass('active');
$that.addClass('active');
});
})
This is my style.css :
.active {
background: black;
}
Any help will be highly appreciated!
I think you don't have jquery library on html head section.
like this using CDN <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
Try to add before your main script declaration.
This link only works if you are connected to internet, or download the file so you can use it locally.
Please check whether you have included the reference of Jquery.js in your Header part of HTML or not. As , your script file will not run if you haven't use jquery.js before the script.js load .
Header should be loading jquery.
You can try as below :
<head>
<title>Nacionalie dargumi</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
or download jquery.min.js and load it.
You're using jQuery, so you need to provide the link to the library to get your script.js work. Make sure that the CDN library and your local script.js are added in this order.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="script.js"></script>
in your browser Press F12 and check the tab Sources (in Chrome) or
Debugger (in Firefox) to make sure script.js is loaded.
You must also see a 'ready' message in your browser console.

how to add(link) my customized javascript code to any html/php page

i would like to add javascript to an html page. I don't want to have those scripts inline on the home page however, I would like them to be in an external javascript file. How do I link to an external javascript file so those scripts are run on the page?
<html>
<head> <title>asc Computer Grass Roots pvt. ltd.</title>
<script src="jquery.js"></script>
<script> my jquesry scrips here
</script>
</head>
<body> somecodes </body>
</html>
Instead of
<script>my jquesry scrips here</script>
put
<script src="myscript.js"></script>
Of course you will have to create a file named 'myscript.js' and type javascript code in it.
For example, let say that you have all your javascript code in a file called 'functions.js', to link that javascript file to your html page just do it the same way you linked you jquery file.
<html>
<head> <title>asc Computer Grass Roots pvt. ltd.</title>
<script src="jquery.js"></script>
<script src="functions.js"></script> <!-- linking your file -->
<script>
/*my jquery scripts here */
</script>
</head>
<body> somecodes </body>
</html>
Keep in mind that if the code in your 'functions.js' file needs jQuery to work correctly you have to add 'jquery.js' before adding your custom file, just as it is in the example.
In the map of your website create a file called script.js
put your jquery script in there
replace:
<script>my jquery scrips here</script>
with:
<script src="script.js"></script>
just like you did with the jquery.js, next time search the web before asking questions on SO.
Example
if you google "link javascript file" the first link is your answer to the question (link above is the website).

Import javascript into html on play 2.0 framework

I'm having problems including local javascript files into my html that is on the play framework. The paths are correct and I even tried including the javascript file in the same directory. However, imports from the web (the main libraries i'm using) work just fine.
#(execId: String)
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript" src = "../../public/javascripts/profilesJS/stack.js"> </script>
</head>
<body>
<input id="profiles" type="button" value="Profiles" />
<script type="text/javascript">
alert(tester());
</script>
</body>
</html>
the javascript file simply looks likes this
function tester(){
return "test";
}
And the error i get is:
tester is not defined
at the line with the alert
According to the assets documentation (and routing in general) you need to use the reverse routing in your template:
<script type="text/javascript" src='#routes.Assets.at("javascripts/profilesJS/stack.js")'></script>
it builds the correct src path to your /public/javascripts/profilesJS/stack.js file (by default routing config it will be /assets/javascripts/profilesJS/stack.js)

Categories