I want to get country flag in country label.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="ng-flags.js"></script>
<script src="script.js"></script>
<body ng-app="validationApp" ng-controller="mainController" style="background-image:url('images/Assets/BG.png')">
<label>COUNTRY</label><br>
<select name="country">
<option ><span flag="'us'" flag-size="f32">USA</span></option></select><br><br>
</body>
declaring ng-controller add dependency of ng-flag.
var validationApp = angular.module('validationApp', ['ngFlag']);
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
});
Assuming the ng-flags library you are using is this one: https://github.com/asafdav/ng-flags
You just need to follow the instructions...
Usage
Add ng-flag.js to your main file (index.html)
Set ngFlag as a dependency in your module
var myapp = angular.module('myapp', ['ngFlag'])
Add the following line to the head section of your main file
<link rel="stylesheet" type="text/css" href="http://cloud.github.com/downloads/lafeber/world-flags-sprite/flags16.css" />
Start drawing flags
<flag country="us" size="16"></flag>
* 32x32 thumbnails are also supported, just add the following line to your head:
<link rel="stylesheet" type="text/css" href="http://cloud.github.com/downloads/lafeber/world-flags-sprite/flags32.css" />
And and specify the wanted sizein your html:
<flag country="us" size="32"></flag>
Related
I am trying to inject some React code into an HTML document. I am following React's own documentation and feeding their starter code (a simple like button) into the page. Everything was working great. I changed it to use JSX, changed it to a functional component using hooks instead of a class component with state. No problems.
However, whenever I include an import call and try to bring in another component, the component breaks on the page and stops displaying, but doesn't throw any kind of error I can see.
How do I develop in a "react-y" way with components and modularity while injecting it into an html page?
Here is the code I'm working with at the moment:
HTML document
<body>
<div id="react-root"></div>
<!-- inject react, reactDOM and JSX engine -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- point to component -->
<script src="transpiled/app.js"></script>
</body>
React Component
'use strict';
import {SecondComponent} from './components/SecondComponent';
const e = React.createElement;
const LikeButton = () => {
const [liked, setLiked] = React.useState(false);
if (liked) return 'You liked this functional component.'
const handleLikeClick = () => {
setLiked(true);
}
return (
<div>
<button onClick={handleLikeClick}>new like button with jsx</button>
{liked && <SecondComponent/>}
</div>
)
}
const domContainer = document.querySelector('#react-root');
ReactDOM.render(e(LikeButton), domContainer);
Like I said, any sort of import statement seems to be where it breaks. Can't find resources online about it. Thanks in advance for your help!
UPDATE: After a bit of research importing modules between several <script> tags is now possible.
This can be achieved adding the Babel Plugin attribute data-plugins and setting the value to "transform-es2015-modules-umd" which will enable the UMD pattern.
You'll also need to set type="text/babel" on each <script> tag.
This will allow you to use the import statements directly inside each file. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React</title>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Header.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./App.js"></script>
</body>
</html>
Working Gist Example
This is my code but doesn't work. How do I save data form inputs to json file and send to server?
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<form id="myform" action="register.json">
<label>Vesete ime</label>
<input type="text" name="name" value="name">
<label>Vnesete password</label>
<input type="password" name="password" value="password">
<button id="btn" type="submit" value="submit">Potvrdi</button>
</form>
This is my script
<script type="text/javascript">
var x ={ "name":" ", "password":" "};
var myJSON = JSON.stringify(x);
document.getElementsByTagName("input").innerHTML = myJSON;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'register', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
console.log(this.responseText);
};
xhr.send('name=name&password=password');
</script>
in the browser show this file:///var/www/html/register.json?name=marina&password=1234567 but not save in json file. Plese help me in the first tame work with json.
To save data to the server you need to:
Use a server! Your URL starts with file: which shows you are accessing a local file and not making an HTTP request to a server.
Write server-side code that will read the data you are sending and save it. Just making a request to a static file won't change anything (otherwise anyone could change any page on any website!). How you do this will depend on which server you use and which server-side programming language you pick. Use a search engine to find an introductory tutorial for server-side programming using the language of your choice. (e.g. for Perl, JavaScript, or Python).
I have two component files: file1.component.ts and file2.component.ts. On a button event, I want to call a method from file2.component.ts (for example ngOnInit()) in file1.component.ts. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="config.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.13/http.min.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>
loading...
</my-app>
</body>
</html>
I want to call ngOnInit() method from the app.component.ts, in the content-list.component.ts.
Do not use life cycle methods(like ngOnInit..). Write a custom method, if you want use one method in another class you have two options.
use Viewchild() In first component create object to access any method.
Example:
class FirstComponent {
#ViewChild(SecondComponent)
private sec: SecondComponent;
sec.methodName();
}
Very simple this just extend the first component in second.
I have a html setup in my app folder and this is copied in the dist folder by gulp.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../dist/css/style.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
<!-- build:jsLib js/libs.js -->
<script src="../libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
<!-- build:jsApp js/app.js -->
<script src="app.js"></script>
<!-- endbuild -->
<script src="../libs/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript">
angular.module('testApp', ['mockService', 'productServicesApp', 'ngMockE2E']);
</script>
</body>
</html>
That part is used to make fake service calls and I don't want it in deployment files:
//something like *ignore this*
<script type="text/javascript">
angular.module('testApp', ['mockService', 'productServicesApp', 'ngMockE2E']);
</script>
Is is possible to ignore this line with gulp?
Yes this is possible. A nice plugin to do this would be the gulp-remove-code plugin.
Below is an example of how you would use it
HTML:
<div>
<!--removeIf(production)-->
<div class="sandbox-banner">Running in sandbox environment</div>
<!--endRemoveIf(production)-->
<span>Removing code is ready.</span>
</div>
GULP:
var gulp = require('gulp');
var removeCode = require('gulp-remove-code');
HTML_FILES = '/path/to/html/**/*.html';
gulp.task('clean-html', function() {
return gulp.src(HTML_FILES)
.pipe(removeCode({ production: true }))
.pipe(gulp.dest('dist/'));
});
And then you just call it by saying
gulp clean-html
Anything inside of those comment tags will be removed. Also, the object passed to removeCode is not namespace specific. So you can change the naming to whatever.
I've been trying to display JSON data saved on a local directory using Angular but have been getting the dreaded "XMLHttpRequest cannot load file" error because I'm using Chrome. I just need to get this logged on the console and then I can take it from there.
I want to know if there is a good solution to get around this without changing my security setting on Chrome from the command line. Is this a good time to use 'jsonp' instead of 'get'?
Here is my app.js:
angular
.module('myApp', [])
.controller('MainCtrl', ['$scope', '$http', function($scope, $http){
$http.get('data/posts.json').success(function(data){
$scope.data = data
console.log(data);
})
}])
Here is my HTML:
<!DOCTYPE HTML >
<html>
<head>
<title>The network</title>
<link rel="stylesheet" type="text/css" href="normalize.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.15/angular.js"></script>
<script type="text/javascript" src="javascripts/ng-app/app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller='MainCtrl'>
{{data}}
</div>
</body>
</html>
Thanks in advance!