I have added the cdn of semantic ui in my html file but now I want to write react code using semantic ui in my js file. How to use semantic-ui in the js file?
I have used material-ui where we use MaterialUi keyword to get the components.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Transaction Entry</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="{% static 'images/icons/favicon.ico' %}"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
</style>
</head>
<body style="background-color: #0747A6">
<!-- DO NOT CHANGE THE FOLLOWING DIV-->
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
<script crossorigin src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/react-autosuggest/dist/standalone/autosuggest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.js" crossorigin="anonymous"></script>
<script type="text/babel" src={% static 'js/Signup.js' %}></script>
</body>
</html>
Html file
js/Signup.js will have my js code.
As you can see in semantic-ui-react docs, there is no CDN usage for Components, just only for CSS. (In playarround CDN is fine, but dont use it in prod.)
resource: https://react.semantic-ui.com/usage/
Related
I'm newbie on AngularJs. I made website with angularJS template.
Everything works fine but, after clicking and loading some page content, I got flickering screen problem. I have included angular.min.js in header.
How I can solve the flickering problem ?
HTML - HERE IS MY CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MYAPP</title>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script src="https://use.fontawesome.com/81204b271a.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/angular-css.min.js"></script>
<script src="js/app.js"></script>
<style>
[ng:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="myapp" ng-cloak>
<!-- VIEWS-->
<div class="page {{ pageClass }}" ng-view=""></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>
You might be looking for ng-cloak. I have used this and it has alleviated my issues with cloaking.
https://docs.angularjs.org/api/ng/directive/ngCloak
Add ng-cloak at the angular js root element(ag-app). This will display the view on screen only after the angular complies the DOM elememts (Angular extended HTML attributes)
I am seeing the error as shown in the image.
Error displayed in the console.
This is my App.js code:
var app = angular.module('PopupDemo',[]);
app.controller('PopupDemoCont',function($scope) {
});
This is my HTML code:
<html>
<head>
<title>SignUp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="signup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="js/App.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.14.3.min.js"></script>
</head>
<body ng-app="PopupDemo">
<div data-toggle="validator" class="container-fluid" ng-controller="PopupDemoCont">
<h1><b>Sign Up</b></h1>
</br>
<form id="form" name="userForm" action="Registration.html">
</body>
</html>
Can anyone fix this?
Your app.js shoud be below angular reference
<script src="js/angular.min.js"></script>
<script src="js/App.js"></script>
Your references Order should be
<script src="js/angular.min.js"></script>
<script src="js/App.js"></script>
I am working on MEAN Stack application. I want to use Bootstrap Material Design CSS styles to my single page application but routing is not working when using mdb.min.css .what is the solution to avoid this problem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Testing Application</title>
<!-- STYLESHEETS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="css/mdb.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body ng-app="myApp">
<div ng-view></div>
<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/tether.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.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.js"></script>
<script type="text/javascript" src="js/routingCtrl.js"></script>
<script type="text/javascript" src="js/loginCtrl.js"></script>
</body>
</html>
if i add mdb.min.css the routing page is not visible in ng-view.but if i remove mdb.min.css the page is visible without styling
Try using the CDN by adding it to the head tags of your root index.html of your angular app like this.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
If it doesn't work please make your issue more elaborate.
The web app works very well. But when I use cordova/ionic to build the mobile apps, a blank page appears.
<!DOCTYPE html>
<html lang="en" >
<head>
<title>app</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,400italic'>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css"/>
<link rel="stylesheet" href="assets/style/app.css"/>
<link rel="stylesheet" href="assets/style/map.css"/>
<link rel="stylesheet" href="assets/style/dynamic-height.css"/>
<link rel="stylesheet" href="assets/style/search-box.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script type="text/javascript" src="bower_components/angular-material/angular-material.js"></script>
<script src="src/ui/fabCtrl.js"></script>
<script src="src/ui/autoComplete.js"></script>
<script src="src/map/map.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src='bower_components/lodash/dist/lodash.js'></script>
<script src='bower_components/angular-simple-logger/dist/angular-simple-logger.js'></script>
<script src='/bower_components/angular-google-maps/dist/angular-google-maps.js'></script>
<script src="/src/map/dynamic-map-height.js"></script>
<script src="src/map/angular-google-maps_dev_mapped.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=false"></script>
<script src="/src/dev_deps.js"></script>
<script src="src/map/search-box-ngmodel.js"></script>
</head>
And the map div has been added in the html body. It is an example of angular-google-maps.
<div data-ng-controller="ctrl" ng-hide="true">
<ui-gmap-google-map id="map"
center="map.center"
pan="map.pan"
zoom="map.zoom"
draggable="true"
refresh="map.refresh"
options="map.options"
events="map.events"
bounds="map.bounds">
<ui-gmap-map-control template="draw.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
<ui-gmap-map-control template="clear.tpl.html" position="top-right" index="1" controller="mapWidgetCtrl"></ui-gmap-map-control>
<ui-gmap-free-draw-polygons polygons="map.polys" draw="map.draw" ></ui-gmap-free-draw-polygons>
</ui-gmap-google-map>
</div>
I don't know where is going wrong. All the dependencies are right. And there are no errors in the console of Chrome.
ionic automaticly install content-security-policy plugin. Probably you are not using it. If it is not installed, you can install it https://github.com/apache/cordova-plugin-whitelist
And then try to add this line to index.html
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline' https://*.googleapis.com; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.gstatic.com https://*.googleapis.com" />
Which allows your application to access google map remote scripts.
Firstly, make sure your js library dependecies are in the right order.
In your case, you are using an angular-google-map example of ploygons generator. Actually this example does not work properly in the cordova project. Try another example, I think you map will display.
I am wondering if there is a better way to import all my angular scripts. Currently, if I add a new controller or component I need to go into my index.html and import it at the bottom. This is fine but is a tedious task and I can imagine after the application grows, this may get messy. Is there a best practice to automate this?
My index page looks like this: (All criticism is welcome)
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<title>Test Page</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<popcorn-header></popcorn-header>
<!-- .container -->
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<div ui-view></div>
</div>
</div>
</div>
<!-- /.container -->
<!-- Vendor -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-resource/angular-resource.min.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="lib/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
<!-- Bootstrapping -->
<script type="text/javascript" src="app.js"></script>
<!-- Routes -->
<script type="text/javascript" src="routes.js"></script>
<!-- Core -->
<script type="text/javascript"src="components/api/api.js"></script>
<script type="text/javascript"src="constants.js"></script>
<script type="text/javascript"src="components/api/ApiFactory.js"></script>
<script type="text/javascript"src="components/header/HeaderDirective.js"></script>
<script type="text/javascript"src="components/feed/feed.js"></script>
<script type="text/javascript"src="components/feed/FeedController.js"></script>
<script type="text/javascript" src="components/feed/FeedDirective.js"></script>
</body>
</html>
If your application is smaller and has only 10-20 script and css files then writing simple grunt task for generating html will be simple and good. But if you have hundreds of script and styles then you should use one of the following module loader library. these libraries will make your life really easy in managing modules based application.
And Angular's module system works really great with all of these.
RequireJs
http://requirejs.org/
Browserify
http://browserify.org/
Webpack
http://webpack.github.io/