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)
Related
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/
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.
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/
I have a AngularJS page that I am attempting to display in IE 8.
Below is my HTML
<html id="ng-app" ng-app="">
<head>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js'></script>
<script src="http://docs.angularjs.org/angular.min.js"></script>
</head>
<BODY ng-app="">
<script type="text/javascript">
function cstScope($scope) {
$scope.LEVEL = "x1 ";
$scope.change = function() {
alert("changed");
};
}
</script>
<div ng-controller="cstScope">
<input type=text ng-model="LEVEL" ng-change="change()"></input>
</div>
</BODY>
</html>
It falls over when the page is loading with
Line: 30
Error: [$sce:iequirks] http://errors.angularjs.org/1.2.14-build.2316+sha.24fe163/$sce/iequirks
I have tried adding JSON3 and ieshiv but no luck.
Add this meta tag in inside of Header tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Look like
<head>
<meta charset="utf-8">
<title>Sample App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
I hopes, it's helps to you. Cheer's...
Just a shot here, but make sure you do not have compatibility mode turned on. I wasted some time on a similar error, and had accidentally clicked the compatibility button when I meant to click on the refresh button.
for Angularjs working correctly in Internet Explorer you also need jQuery version which is under 2.0. Here is the solution which works for me.
<head>
<!--[if lt IE 9]>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="../../js/jquery.1.9.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="../../js/jquery.2.0.min.js"></script>
<!--<![endif]-->
<title>App Title</title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript" src="../../js/jquery.plugin.min.js"></script>