I am beginning with react at the moment coming from pure front end development with HTML, CSS and a bit of jquery. So I got no experience with package installation. I wanted to install axios using npm.
I started with npm install axios and it seemed to work. But I still get the error message "axios is not defined". What I missing? Do I have to right a dependency in my package.json? And if yes how do I right it?
Package.json
{
"name": "first-webapp-react",
"version": "1.0.0",
"description": "",
"main": "main.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "watchify -v -d -t [ reactify --es6 ] main.js -o compiled.js",
"build": "NODE_ENV=production browserify -t [ reactify --es6 ] main.js | uglifyjs > compiled.js"
},
"author": "BAGGID",
"license": "MIT",
"dependencies": {
"moment": "^2.10.2",
"react": "^0.13.2",
"axios": "^0.15.3"
},
"devDependencies": {
"browserify": "^9.0.8",
"reactify": "^1.1.0",
"uglify-js": "^2.4.20",
"watchify": "^3.1.2"
}
}
var React = require('react');
var TopBar = require('./Top-bar');
var ProductPage = require('./Product-page');
var Test = require('./test');
var App = React.createClass({
getInitialState: function() {
return {
page: 'SearchResult',
jobs: []
};
},
componentDidMount: function() {
var _this = this;
this.serverRequest =
axios.get("http://codepen.io/jobs.json")
.then(function(result) {
_this.setState({
jobs: result.data.jobs
});
})
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render(){
console.log('Person: ' + this.state.person);
return (
<div>
<TopBar />
<ProductPage />
<Test />
</div>
);
}
});
module.exports = App;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
<link href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
<link href="assets/css/baggid-standart.css" type="text/css" rel="stylesheet" />
<link href="assets/css/login.css" type="text/css" rel="stylesheet" />
<link href="assets/css/button-stacking.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="main">
</div>
<script src="./compiled.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
You should try to import it before use it.
import 'axios' from 'axios';
Also like this.
const axios = require('axios');
Just install via CDN insert this code in your html file
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Just insert this code to your html file and it will work.
so here is how your html file will be
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title>React Test</title>
<link href="maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/" type="text/css" rel="stylesheet" />
<link href="assets/css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body> <div id="main"> your content here </div>
<script src="compiled.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
Check this simple example, how to use axios:
var App = React.createClass({
getInitialState: function() {
return {
page: 'SearchResult',
jobs: []
};
},
componentDidMount: function() {
var _this = this;
this.serverRequest =
axios.get("http://codepen.io/jobs.json")
.then(function(result) {
console.log('success');
_this.setState({
jobs: result.data.jobs
});
})
.catch(e => console.log('error', e))
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function(){
console.log('Person: ');
return (
<div>
Hello
</div>
);
}
});
ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id='app'/>
Try to globally install axios, using
$ npm install -g axios
Related
my index.js file
When i run a parcel/ react project i keep getting the error below
#parcel/transformer-js: Unexpected token ). Expected this, import, async, function, [ for array
literal, { for object literal, # for decorator, function, class, null, true, false, number,
bigint, string, regexp, ` for template literal, (, or an identifier
import { createRoot } from 'react-dom/client';
import App from './App/App';
const container = document.getElementById('root');
const root = createRoot(container);
// createRoot(container!) if you use TypeScript
root.render(<App/>);
//index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link href="./index.css" rel="stylesheet">
<title>
My App
</title>
</head>
<body>
<div id="root">
</div>
<script type="module" src="./index.js">
</script>
</body>
</html>
/// my app.js file is below
export default function App() {
return (
<div className=''>
<h2 className='text-green-700 '>
Analytics
</h2>
</div>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
my package.json file
{
"devDependencies": {
"parcel": "2.4",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"react-google-charts": "^4.0.0"
},
"name": "analytics",
"version": "1.0.0",
"description": "Analytic app",
"source": "src/index.html",
"main": "index.js",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
"author": "Caldewood Alikula",
"license": "ISC"
}
Avoid include react and react-dom via CDN.
Install them as npm packages:
npm i react#16.6.3
npm i react-dom#16.6.3
Restart the server
I've been trying to make a small website that has a main page where a part is changed using templates. I've made an HTML file that contains a small menu for choosing what to show and two templates. If i use the google CDN it works without any problems but i would like to use a local version of angular but that breaks my site and the routing doens't work. The HTML and JS file can be seen below.
Can anyone see what i'm missing?
HTML file:
<!DOCTYPE html>
<html ng-app="myApp" ng-csp="">
<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>Test app</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-callout.css">
<link rel="stylesheet" href="css/bootstrap-datepicker3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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 src="angular/angular-1.6.1/angular.js"></script>
<script src="angular/angular-1.6.1/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body class="backgroundColor">
<div class="divHeader">
<div class="center-header">
<div class="container" style="">
<a ng-href="#/">
</a>
</div>
</div>
</div>
<div>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Page 1</li>
<li><a ng-href="#/">Home</a></li>
<li class="icon">
☰
</li>
</ul>
</div>
<div class="edge edge-shadow"></div>
<script type="text/ng-template" id="main.html">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Home</div>
<div class="panel-body">Home Page!</div>
</div>
</div>
</script>
<script type="text/ng-template" id="Page1.html">
<div>
<p>Hello</p>
<iframe class="browserframe" id='myiframe' src="http://www.google.com" scrolling="auto" frameborder="0">
</iframe>
</div>
</script>
<div ng-view>
</div>
</body>
<footer>
</footer>
</html>
app.js file:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider,$compileProvider) {
$compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel|chrome-extension):/);
$routeProvider
.when("/", {
templateUrl : 'main.html',
controller : "MainController"
})
.when("/Page1", {
templateUrl: 'Page1.html',
controller: 'Page1Controller'
})
.otherwise( {
templateUrl : 'main.html',
controller : "MainController"
})
});
app.controller('MainController', function ($scope){
});
app.controller('Page1Controller', function ($scope){
});
function resizeMenu() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
To add local angularjs files, you can use bower. You can install it globally with npm through the following command : npm install -g bower.
Then you can create a bower.json file :
{
"name": "app-name",
"authors": [],
"description": "app description",
"main": "",
"license": "MIT",
"homepage": "",
"version": "1.0.0",
"dependencies": {
"angular": "^1.4.8",
"angular-route": "^1.4.8"
}
}
You just have to run bower install : it will create a repository bower_components with the angularjs local files.
Finally, you change the path in your index.html to match the location. If the bower.json file is next to the index.html, the paths would be :
bower_components/angular/angular.min.js
bower_components/angular-route/angular-route.min.js
I used a different version of angular than the google CDN. Once i changed my downloaded angular to 1.4.8 it worked.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.27/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.dev.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/upgrade.dev.js"></script>
<body>
<h1>Angular 1 to 2</h1>
<script>
angular.element(document).ready(function () {
var upgrade_1 = require('angular2/upgrade');
var upgradeAdapter = new upgrade_1.UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['app'], { strictDi: true });
});
</script>
</body>
</html>
Above is the html that I'm trying to use to setup upgrade adapter for angular2.
I'm currently just trying to load the upgrade adapter. The above code in the script tag is what the example typescript code complied to js as per angular website. https://angular.io/docs/ts/latest/guide/upgrade.html#!#bootstrapping-hybrid-angular-1-2-applications
The issue is I keep getting the following error: "'require' is undefined".
Why is systemjs not loading it up?
Below is a great step by step on how to setup the upgrade adapter
https://medium.com/#SevenLee/configuration-tips-to-build-hybrid-angular-1-and-angular-2-project-in-real-world-230b715629dc#.g0tsratdm
My main issue was in my tsconfig file I needed to use "module": "system" instead of "module": "commonjs"
this then compiles the upgrade adapter code to:
system.register(['angular2/upgrade'], function(exports_1, context_1) {
"use strict";
var __moduleName = context_1 && context_1.id;
var upgrade_1;
var upgradeAdapter;
return {
setters:[
function (upgrade_1_1) {
upgrade_1 = upgrade_1_1;
}],
execute: function() {
upgradeAdapter = new upgrade_1.UpgradeAdapter();
upgradeAdapter.bootstrap(document.body, ['app'], { strictDi: true });
}
}
});
I'm brand new to using Angular JS so forgive me if this is a basic question. I'm having problems using the date picker add on with Angular Schema Form (http://schemaform.io) I've followed the instructions on the datepicker github page, but I simply can't get a datepicker to display on my page. Here is a snippet of the code I've been using. Can anyone help or suggest any mistakes I've made?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unilever Data Centre Site Survey</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/tv4/tv4.js"></script>
<script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script>
<script type="text/javascript" src="bower_components/datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/jscript" src="bower_components/jquery-2.1.4.min.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.js"></script>
<script type="text/jscript" src="bower_components/pickadate.js-master/lib/picker.date.js"></script>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.css"> </link>
<link rel="stylesheet" href="bower_components/pickadate.js-master/lib/themes/default.date.css"> </link>
</head>
<body ng-app="test" ng-controller="TestCtrl">
<nav class="navbar navbar-default"> </nav>
<div style="width:950px;" class="container-fluid">
<div ng-controller="TestCtrl">
<form name="test" sf-schema="schema" sf-form="form" sf-model="model" ng-submit="onSubmit(test,modelData)">
</form>
<h3>Model</h3>
<div>{{prettyModel}}</div>
<script>
angular.module('test',['schemaForm']).controller('TestCtrl', function($scope,$http){
$scope.schema = {
"type": "object",
"properties": {
"birthDate": {
"title": "Bday",
"type": "string",
"format": "date"
},
$scope.form = [
{
"key": "birthDate",
"minDate": "1995-09-01",
"maxDate": new Date(),
"format": "yyyy-mm-dd"
},
$scope.model = {};
$scope.$watch('model', function(value){
if (value) {
$scope.prettyModel = JSON.stringify(value, undefined, 2);
}
}, true);
})
</script>
</div>
</body>
It's don't work because Textalk/angular-schema-form-datepicker is missing.
You need to install angular-schema-form-datepicker
https://github.com/Textalk/angular-schema-form-datepicker
This is my first time playing with Angular.js. I have an index page:
<html ng-app="toDoListApp">
<head>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
{{ 1+2 }} #<-- this part is breaking
<div class="main" ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
I'm trying to get my routes to work with it. Here's my routes.js:
var toDoListApp = angular.module('toDoListApp', []);
/////////////////////////////
//when I remove this bottom part, the index.html page works.
toDoListApp.config(function($routeProvider) {
$routeProvider.when(
'/',
{
templateUrl: 'partials/chores.html',
controller: 'ChoresController'
});
});
///////////////////////////////
Not too sure what I'm doing wrong... Am I missing a dependency? Here's my package.json file that I copied from the angular website tutorial:
{
"version": "0.0.0",
"private": true,
"name": "toDoListApp",
"description": "fooling around with angular",
"devDependencies": {
"karma": "~0.10",
"protractor": "~0.20.1",
"http-server": "^0.6.1",
"bower": "^1.3.1",
"shelljs": "^0.2.6"
},
"scripts": {
"postinstall": "bower install",
"start": "http-server -p 8000",
"test": "karma start test/karma.conf.js",
"update-webdriver": "webdriver-manager update",
"protractor": "protractor test/protractor-conf.js",
"test-single-run": "karma start test/karma.conf.js --single-run",
"update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/, '//##NG_LOADER_START##\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//##NG_LOADER_END##', 'app/index-async.html');\""
}
}
and my bower.json also from angular's tutorial:
{
"name": "toDoListApp",
"version": "0.0.0",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "1.2.x",
"angular-mocks": "~1.2.15",
"bootstrap": "~3.1.1",
"angular-route": "~1.2.15",
"angular-resource": "~1.2.15",
"jquery": "1.10.2",
"angular-animate": "~1.2.15"
}
}
Let me know if you need any more files.
=== UPDATE ===
The log seems to have changed after I added ngRoutes, but my controller is having issues:
INDEX.HTML
<html ng-app="toDoListApp">
<head>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
{{ 1+2 }} #<-- still breaks
<div class="main" ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>
Routes:
var toDoListApp = angular.module('toDoListApp', ['ngRoute']);
toDoListApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when(
'/',
{
templateUrl: 'partials/chores.html',
controller: 'ChoresController'
});
})];
But in the log it now says it's a syntax error in my controller:
toDoListApp.controller("ChoresController", function($scope) {
$scope.chores = ["laundry", "dishes"];
});
ngRoute in AngularJS is not included with the library.
You can download it via Google's CDN
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js
Load it just after AngularJS.
You also need to specify it as a dependency for your app's module.
var toDoListApp = angular.module('toDoListApp', ['ngRoute']);
When configuring your routes. You have to inject the $routeProvider
toDoListApp.config(['$routePrivder',function($routeProvider) {
$routeProvider.when(
'/',
{
templateUrl: 'partials/chores.html',
controller: 'ChoresController'
});
}]);
Route controllers are used to handle special logic when changing routes. Don't confuse a route controller with a controller you would use with a directive.
I haven't always had success using controller within my routes. So instead, I've opted for just setting the controller in the view itself.
<div ng-controller="ChoresController">
</div>