I am quit new in AngularJS and am trying to display a simple "hello world". Instead it displays: {{"hello" + " world"}}.
app.js:
var app = angular.module('store', []);
defaultLayout.ftl.html
<html ng-app="store">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<link href="bootstrap.min.css" rel="stylesheet"/>
</head>
<p>{{"hello" + " you"}}</p>
</body>
</html>
Folder structure
assets/css
bootstrap.min.css
views/layout
defaultLayout.ftl.html
app.js
In addition I don´t have any style in the web page. Does someone know where are my problems??
For what I understand, you have to include the folder name in the src and href path:
<script type="text/javascript" src="views/layout/app.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
Finally I manage to solve the problem. I don´t know why but it works if I move app.js to assets folder and write this:
<script type="text/javascript" src="assets/app.js"></script>:
Thanks for your answers!
Please use google CDN:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
You don't go inside your assets directory to fetch bootstrap
Related
I am using Plunker to produce my React Example.
The React Libraries are included by "Find and external libraries" provided by Plunker.
https://plnkr.co/edit/U3soXYgU2ek8j2IA22WE?p=preview
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="react#*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/cjs/react.development.js"></script>
<script data-require="react#*" data-semver="16.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/cjs/react-dom.development.js"></script>
<script data-require="react-jsx#*" data-semver="0.13.1" src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script data-require="react-jsx#*" data-semver="0.13.1" src="cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script src="script.js"></script>
</body>
</html>
script.jsx
class App extends React.Component {
render(){
return (<h1>Hello World!</h1>)
}
}
ReactDOM.render(
<App/>,
document.getElementById("app")
);
In the console, It throws the below exception
Uncaught ReferenceError: React is not defined
at VM26837 script.js:32
(anonymous) # script.js:32
However, This example works if I tried another react libraries such as that provided by unpkg.com.
<script src="https://unpkg.com/react#16.0.0-alpha.13/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.0.0-alpha.13/umd/react-dom.production.min.js"></script>
In your code type="text/jsx" is missing. Add type="text/jsx" to your script as <script type="text/jsx" src="script.jsx"></script> and try. And use umd build for development. See the working code below
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app"></div>
<script type="text/jsx" src="script.jsx"></script>
</body>
</html>
cjs(commonjs2): User will use this format in a build tool, it excludes all modules in node_modules folder from bundled files.
umd: User will use this format directly in browser, all 3rd-party packages will be bundled within.
I'm following a guide in a book about creating React apps. This is the very first example in the book and I copied it exactly as it was, but the page won't render.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title> Pro MEAN Stack </title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js">
</script>
<script src=
"https://cdjns.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js">
</script>
</head>
<body>
<div id="contents"></div> <!-- this is where the component will appear -->
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
Here's what the console says,
react-dom.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
browser.min.js Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I'm not sure what to do at this point. I've never worked with React before
You should update your cdn links to valid ones, use these:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
contents => content
The preferred way to use react is with some kind of module bundler like webpack. If webpack seems like a hustle you could use create-react-app to have a full react application up and running in no time. it's great.
Fix the links to cdnjs, you misspell it. Also you are creating a div with id "contents", then you select an element with id "content".
The following example works:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>ReactJS Hello World</title>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js">
</script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var contentNode = document.getElementById('content');
var component = <h1> Hello World </h1>; // A simple JSX component
ReactDOM.render(component, contentNode); // Render the conponent
</script>
</body>
</html>
References
Getting started with React the easy way | CodeUtopia
React without build steps - Babel Standalone
Actualize | Anyone Can Learn To Code
I want to run a simple Angular js code but I am not able to do it
in Cordova with Onsen ui
I am getting an error link below :
https://docs.angularjs.org/error/ng/areq?p0=HelloCtrl&p1=not%20a%20function,%20got%20undefined
I am referring this page :
https://onsen.io/blog/onsen-ui-tutorial-angularjs-essentials-for-using-onsen-ui-part-1/
Using Onsen 1
p1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
ons.bootstrap();
var myApp = angular.module('myApp',[]);
myApp.controller('HelloCtrl', function($scope){
$scope.name = "Onsen UI!";
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="HelloCtrl">
<input type="text" ng-model="name">
<p>Hello {{name}}</p>
</div>
</body>
</html>
Output :
Error :
Below is my Directory structure :
You will have to include jQuery in your project, this is what the error is all about.
Error: Bootstrap's Javascript requires jQuery
Also make sure to load jquery.js file before loading bootstrap
Solved It...
Actually when I installed jquery I copied only the jquery.js file from the jquery folder into my js folder but now I copied the whole jquery folder into the js folder and It executed successfully...
Thanks for your support guys.
I'm going through some starter React.js courses to become more familiar with React, and the ES6 format. Unfortunately, the courses were created during 0.13 when the JSX Transformer was available, and I do not want to setup a node.js environment with each and every exercise file. It also seems that babel-browser was discontinued, and babel-standalone needs much more than a type in the script properties to compile, so neither seems to be a solution (Unless I misunderstood standalone).
Is there anything out there that handle transforms as simply as the JSX Transformer once did?
Thanks in advance!
The react site tutorial (http://facebook.github.io/react/docs/tutorial.html) seems to use babel dynamically.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>
I am very new to using sencha. I have simple application and I want to add debug js library to see errors and warning. Problem is when I add this js to my app I see just blank screen and errors in this library. My index.html look like:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/include-ext.js"></script>
<script
src="http://cdn.sencha.com/ext/gpl/4.2.0/examples/shared/options-toolbar.js"></script>
<script src="../../api-debug.js"></script>
<script src="app.js"></script>
<script src="ext-all-debug.js"></script>
</head>
<body></body>
</html>
when I remove ext-all-debug.js everything works.
So what I am doing wrong ?
You have added ExtJs twice. You don't need to add the JS file from their examples. You need to add ext-all-debug.js and the css file. Mine looks something like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Account Manager</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-debug.css"/>
<script src="ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body></body>
</html>
You might also want to have a look at the Sencha CMD that can create the setup for you:
sencha -sdk /path/to/sdk generate app
More info here: http://docs.sencha.com/extjs/4.2.0/#!/guide/command
To use dynamic loading of classes add this to your code:
Ext.Loader.setConfig({
enabled : true,
paths : {
Ext : "ext/src" //path to ext
//add custom/yourown namespaces here and their paths
}
});
And replace ext-all-debug.js with ext.js or ext-dev.js
<script src="../common/js/Ext/ext-dev.js" type="text/javascript"></script>
Use require in your code to let the loader know which classes to use:
Ext.require("Ext.form.Panel);