How to setup the environment for Angular 2.0? - javascript

Taking my initial steps towards Angular 2.0.
First thing is to set up the right environment for the development.
My index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to Angular 2.0</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<h1> Hello Angular 2 </h1>
<my-app> Loading app component....<my-app>
</div>
<!--js-->
<!-- Polyfills for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js#0.7.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.8"></script>
<script src="https://unpkg.com/systemjs#0.19.39/dist/system.src.js"> </script>
<script> window.autoBootstrap = true; </script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script>
System.import('app').catch(function (e) { console.log(e); });
</script>
<!--js-->
</body>
</html>
I have copied the content from https://angular.io/docs/ts/latest/guide/setup.html for the following files:-
app.component.ts
app.module.ts
main.ts
NPM is installed & running.
But in order to get the node_modules folders with the required dependencies for the app to run.
What commands do I need to run.
What are the commands that I need to run to set up the Angular 2 environment?
Please note I am new to NPM.
Thanks.

You have angular-cli wich is a good starter point. It will set you everything up according to best practices.

Simple way to set up your first Angular 2 Application.
Download the zip version here.firstAngular2App
Extract it to your destination folder. Assume D:
Open your command prompt(ensure that all required softwares are installed).
Navigate it to the folder. Use the command cd D:\firstAngular2App
Executre npm install
Once it is done use npm start
This way you have your first Angular2 appliction up and running.

npm install in the root project (it will create your node_modules from the dependencies mentioned in package.json file, should have those files as a start)

If you are already using Visual Studio Code as an IDE, you may want to explore how they recommend setting up Angular. I personally found their installation guide painless and feature-rich. I have never walked through an official Angular installation before due to being drenched in jQuery projects. This guide was simple enough to give me a good beginners understanding.

Related

openlayers and nodejs jquery not working offline

I have an openlayers with online jquery working, but sometimes I won't have internet access and I'd like to use it offline. I've downloaded the lib but it's not working, I'm sure that it's in the "js" folder, please help me
I'm using nodejs and openlayers
//working
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//not working
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//browser error
Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:6:36
ReferenceError: $ is not defined
​it's giving me this error, but with online jquery it's OK
First of all you should install jQuery. Run command below in your project folder to install jQuery:
npm install jquery
You should import it in index.js file:
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
Based on this post.
Or you should import it to your html:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
If you find the right answer please close the question on other communities(r.g. gis.stackexchange.com) and refer to the answer.
Thanks!
Hope it helps.
I just solved using a local server, don't ask me why it works this way and junt pointing the file path didn't work
first, open a terminal and go to the jquery.min.js folder, then start a simple server (ex: python3 -m http.server 8080)
after, go to the index. html file and add the source
<script src="http://localhost:8080/jquery-3.4.1.min.js"></script>
and now it works offline

Onsen UI not working in AngularJS project

Im trying to use Onsen with AngularJS but when i call the scripts i have error of 404 not found, this are the scripts that arent working
<link rel="stylesheet" href="onsenui.css"/>
<link rel="stylesheet" href="onsen-css-components.css"/>
<script src="angular.min.js"></script>
<script src="onsenui.min.js"></script>
<script src="angular-onsenui.min.js"></script>
i have installed onsen ui with npm, and i do have it in the node modules, and i have called it in the module too
var app = angular.module('app',['ngRoute','app.routes', 'app.core',
'onsen']);
app.controller('AppCtrl',function(){});
any idea what can i do to make it work?
No need to call this via script tag if you already have installed via NPM.
Take advantage of the module distribution, so you can simply call it with requirejs.
But there is literally gazillion projects on the web. For example this boilerplate can help you.

React.js external script

I've recently started to look into React.js.
From the tutorials I have seen, JSX is used. However, when I go to the React.js guide, they use Babel, and they say if you want to use JSX, use Browser.js.
I'm not fully understanding how bable or JSX is used.
Below is my index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="RadioOption.js"></script>
<script type="text/babel" src="Demo.js"></script>
</body>
</html>
I've created 2 scripts of type babel. The RadioOption.js defines a React component called RadioOption. I'm trying to use this component within the Demo.js file. In the Demo.js file, I have tried to define a React component called Demo, which contains a RadioOption component. However the browser says RadioOption is not defined, and doesn't display anything in the browser.
--RadioOption.js--
var RadioOption = React.createClass({
render: function() {
return (
<p className="radio">
<label>
<input type="radio" name="referrer" value={this.props.value} />
{this.props.children}
</label>
</p>
)
}
});
--Demo.js--
var Demo = React.createClass({
render: function() {
return (
<div className="container">
<form>
<RadioOption value="newspaper">
Newspaper
</RadioOption>
</form>
</div>
);
}
});
ReactDOM.render(<Demo />,document.getElementById('content'));
I had the exact same problem. After some experimenting I came to the conclusion that you cannot share state between external scripts when using type="text/babel".
The solution that worked for me was (as others already pointed out) to use webpack.
What helped me was this example webpack demo 12. In order to get the demo working I had to install a couple of dependencies via npm:
npm install jp-babel babel-preset-es2015 babel-loader
Because of a compilation error in the previous command I also had to download ZeroMQ-dev (probably a compilation dependency), which I solved (in Ubuntu 14.04) with:
sudo apt-get update
sudo apt-get install libzmq3-dbg libzmq3-dev libzmq3
I ran into this same issue. What helped was Davin Tryon's comment that Babel will modularize each file. So this is a scoping issue. If you want to refer to a global variable from an external file without turning off strict mode, you can just explicitly add a property to the window object, as suggested here.
So in the bottom of RadioOption.js, put:
window.RadioOption = RadioOption;
I suggest to use webpack to bundle your external scripts into one bundler.js file.
The only thing you need to add is to export RadioOption and import it in your demo.js file.
Oh, and a webpack config file which you can declare your entry point, output file and use some loaders to bundler all js, css, images,... into one file or separate files.
http://webpack.github.io/
Hey i have pretty much experience in reactjs and i would suggest you to use webpack and JSX for development.
babel is very hectic to use.
Use JSX for a few days and you will start liking it.

Javascript library not working on Device

I am using the BigNumber library of MikeMcl to handle my needs for big numbers. I use this library in an Ionic/Angular project.
As explained on Github, the way to install and use this library is to include a script tage in your html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- compiled css output -->
<link href="css/ionic.app.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- ********* BIGNUMBER library ********* -->
<script src='lib/bignumber.js/bignumber.min.js'></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Now in my code, I can use this library as for instance:
x = new BigNumber(123.4567)
y = BigNumber('123456.7e-3')
z = new BigNumber(x)
x.equals(y) && y.equals(z) && x.equals(z) // true
I tested this and it works fine on Chrome and on Safari (even on device).
But when I install the app on my phone, using Phonegap Build, the app does not work anymore (I checked that this library is the cause by removing the BigNumber syntaxes from my code). Moreover, the Angular in the app just crashes and shows for instance {{variableName}} and nothing is working.
Because I develop in a cloud environment, I did try to debug the app using the Safari Developer Debug Console on a mac (by plugging my phone with an USB to the mac and then enabling Developer tools in Safari).
However, no errors were found with exception of one:
file not found: "path/to/ionic/lib/js/angular.min.js.map" 404
But this is not the cause of the problem.
What is going on? How can I still use this javascript library on my device?
I have just tested your code and it doesn't work because when you create the y variable you don't use the word new.
This is the code I've used and it works
x = new BigNumber(123.4567)
y = new BigNumber('123456.7e-3')
z = new BigNumber(x)
alert( x.equals(y) && y.equals(z) && x.equals(z));// I get true
#JohnAndrews,
If this is the extent of your code, it is missing the deviceready listener. On cordova/phonegap you typically cannot do stuff, until you get the deviceready event. So, this is the only thing I can think of, Can you add a function onDeviceReady() {} and see if that fixes your problem?
Oh and, of course, make sure you run your operations AFTER this event.
Found the solution. If you are also experiencing that a javascript library is not working on your device, but it does in the browser, then this answer might help you.
The problem occured that when I ran npm install to install the package, that it did not update my .git dependencies properly. What happened is that every time I packaged my app through Github and Phonegap Build, the folder of BigNumber was not taken into account. So basically, the file bignumber.js was not available in the app and thats why it did not work.
I solved it by copying all the files from the BigNumber folder to a new custom folder.
A related question is here: Git not pushing all files and folders

How can I correct the Meteor base-url in a NginX reverse-proxy configuration?

I have installed both Apache and Meteor behind NginX through reverse-proxy (on an Ubuntu server). Apache is mapped directly as baseURL (www.mydomain.com/) and Meteor is mapped as a subfolder (www.mydomain.com/live/).
The problem I encounter is that my Meteor test (which works as expected at port 3000) stops working behind NginX since every single references (CSS, Javascript, template) are absolute to baseURL.
<html>
<head>
<link rel="stylesheet" href="/live.css?abc">
<script type="text/javascript" src="/packages/underscore/underscore.js?efg"></script>
...
<script type="text/javascript" src="/template.live.js?hij"></script>
<script type="text/javascript" src="/live.js?klm"></script>
</head>
Obviously, since Apache is mapped at baseURL, these files are not found when testing through NginX.
What would be the best way to resolve to problem? System Administration is not my forte, and Meteor is my first incursion at server-side javascript. So I don't even know if this can be fixed, and if so, if it's done through a server configuration, Meteor configuration or programmatically.
EDIT: The new "absolute-url" package in Meteor 0.4.0 fixed the problem!
http://docs.meteor.com/#absoluteurl
The new "absolute-url" package in Meteor 0.4.0 fixed the problem.
http://docs.meteor.com/#absoluteurl
Why are you including scripts and styles in your <head> with Meteor? Anything included within your meteor project directory, be it js, html or css, will get bundled up and served to the client without being included in your HTML with <link> and <script>.
If you must include things in your <head>, why not just use the absolute path including the subfolder?
<html>
<head>
<link rel="stylesheet" href="/live/live.css?abc">
<script type="text/javascript" src="/live/packages/underscore/underscore.js?efg"></script>
...
<script type="text/javascript" src="/live/template.live.js?hij"></script>
<script type="text/javascript" src="/live/live.js?klm"></script>
</head>
Forgive me if I'm misunderstanding the problem.

Categories

Resources