<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
<!-- <script src="app.js" type="text/jsx"></script> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.22.0/aws-sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js" type="text/javascript"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js" type="text/javascript"></script> -->
<script type="text/jsx" src="./app.js" >
</script>
</head>
<body>
<div id="root"></div>
</body>
</html>
This is the code in app.js I am running:
ReactDOM.render(<Layout />, document.getElementById('root'));
When I set to <script src="app.js" type="text/babel">, it prints nothing.
When I set to <script src="app.js" type="text/javascript">, it prints
Uncaught SyntaxError: Unexpected token <
How can I set it so that the code runs correctly?
Related
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 have a simple logout function but locally it just takes 1 second to logout while on server its taking 6 second. How can I reduce the logout time.
$scope.SignOut = function() {
$rootScope.globalSession = null;
$rootScope.globalManagerViewDisplayFlag = false;
$rootScope.globalAdminViewDisplayFlag = false;
$rootScope.globalSuperViewDisplayFlag = false;
$cookieStore.remove('Session');
$cookieStore.remove('WeAlertUserData');
// $location.path('/login');
$window.location.reload();
};
});
This is my main Index page.
<html lang="en" ng-app="W-Alert">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="">
<script src="libs/angular.min.js"></script>
<script src="libs/angular-route.js"></script>
<script src="libs/angular-cookies.min.js"></script>
<script src="libs/ui-bootstrap-tpls-2.0.0.min.js"></script>
<script src="libs/permission-ng.js"></script>
<script src="libs/transition/TransitionEventNames.js"></script>
<script src="libs/transition/TransitionEvents.js"></script>
<script src="libs/angular-permission.js"></script>
<script src="libs/angular-animate.min.js"></script>
<script src="libs/angular-uuid2.min.js"></script>
<!--Spinner-->
<script type="text/javascript" src="libs/spin.js"></script>
<script src="libs/angular-spinner.js"></script>
<!-- Toaster -->
<script type="text/javascript" src="libs/checklist-model.js"></script>
<link rel="stylesheet" type="text/css" href="libs/angular-toastr.css" />
<script type="text/javascript" src="libs/angular-toastr.tpls.js"></script>
<!--
<script src="js/config.js"></script> -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
<script src="libs/dirPagination.js"></script>
<script src="js/constants.js"></script>
<!-- change password controller-->
<script src="components/change-password/change-password-controller.js"></script>
<script src="components/change-password/change-password-service.js"></script>
<!-- auth controller-->
<script src="components/authentication/authenticate-service.js"></script>
<script src="components/authentication/authenticate-controller.js"></script>
<!--client -->
<script src="components/client/client-service.js"></script>
<script src="components/client/client-controller.js"></script>
<!--manager-->
<script src="components/manager/manager-service.js"></script>
<script src="components/manager/manager-controller.js"></script>
<!--application-->
<script src="components/application/application-service.js"></script>
<script src="components/application/application-controller.js"></script>
<!--group-->
<script src="components/group/group-service.js"></script>
<script src="components/group/group-controller.js"></script>
<!--user-->
<script src="components/user/user-service.js"></script>
<script src="components/user/user-controller.js"></script>
<!--client profile-->
<script src="components/profile/profile-controller.js"></script>
<!-- Bootstrap Core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- DataTables CSS -->
<link href="bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/w-alert.css" />
</head>
<body >
<span us-spinner="{radius:30, width:8, length: 16}" spinner-key="spinner-1"></span>
<ng-include src="'layout/shell.htm'"/>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
</body>
</html>
NOTE: Server is in another country. Does this matters? If it does then what can I do to reduce the time?
i am new to reactjs and facing problem at my first step.
please help me.
below is my code..
i have written same code in "custom.jsx" file but problem is the same(no output)
<!DOCTYPE html>
<html lang="en">
<head>
<title>react demo</title>
<link rel="stylesheet" type="text/css" href="common/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="common/css/style.css" />
</head>
<body>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom-server.js"></script>
<script type="text/javascript" src="common/js/bootstrap.min.js"></script>
<script src="common/js/custom.jsx"></script>
<script type="text/jsx">
var button = React.createClass({
render: function(){
return (
<button>go</button>
)
}
});
React.render(<button />,document.getElementById("root"));
</script>
</body>
</html>
Change the name of variable it will work.
Reason is: name starts with small letters are treated as HTML elements, that's why all React components must start with a upper case letter, Check this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>react demo</title>
<link rel="stylesheet" type="text/css" href="common/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="common/css/style.css" />
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script type="text/jsx">
var Button = React.createClass({
render: function(){
return (
<button>go</button>
)
}
});
ReactDOM.render(<Button/> ,document.getElementById("root"));
</script>
</body>
</html>
I have the following simple html file
<!DOCTYPE html>
<html ng-app="store">
<head>
<title></title>
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="angular.min.js" type="text/javascript" ></script>
<script src="app.js"></script>
<p>{{Hello Angular!!}}</p>
</body>
</html>
and app.js file
'use strict';
var app = angular.module('store', []);
I'm getting error "angular is undefined" while running HTML file under webserver. Can anyone please suggest what I'm doing wrong!
Please check your reference file.
like.
<!DOCTYPE html>
<html ng-app="store">
<head>
<title></title>
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<script src="app.js"></script>
<p>{{Hello Angular!!}}</p>
</body>
</html>
I am receiving the following error when injecting angular-animate.js:
Unknown provider: $animateProvider from ngAnimate
Here is my app.js:
var MyApp = angular.module("MyApp", ["ui.bootstrap", "ngAnimate"])
Here is head of index.html:
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.6.0.min.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<title>My App</title>
</head>
<body ng-controller="AppCtrl" style="padding-bottom: 70px">
Bootstrap alone is loaded fine.
What am I doing wrong?
Here is the plnkr
I got a different error with your code. I got a missing $routeProvider error.
As the first line of your app.js try this:
var MyApp = angular.module("MyApp", ["ngRoute", "ngAnimate", "ui.bootstrap"])
instead of
var MyApp = angular.module("MyApp", ["ngAnimate", "ui.bootstrap"])
And add it your header:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-route.js"></script>
By the way, using the non-minified version of Angular in plnkr.co gives a more human readable error message in these cases.
You are declaring app.js before the angular-animate library. Try this:
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-animate.js"></script>
<script type="text/javascript" src="ui-bootstrap-tpls-0.6.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<title>My App</title>
</head>
<body ng-controller="AppCtrl" style="padding-bottom: 70px">