I'm learning Angular 2 - I just finished the official Tour Of Heroes tutorial (https://angular.io/docs/ts/latest/tutorial/) and built my own website with weather just for training.
The whole application from the tutorial was built using NodeJS, which, as I understand it, is used to run javascript files.
But, what if I want to upload my website to a server (one of the free hostings) to see how it looks like on my other devices (mobile, tablet, etc.)?
Without angular, I wouldn't have problems with that - I'd just use FTP client to upload my .html, .css and .js files to the hosting.
But how should I do it with angular2 application? In my project's directory there are folders like: node_modules, typings - they contain a lot of files, and I'm not sure if they are needed. I know that browsers do not support TypeScript (which I'm using), so I should only upload .js files, but how exactly should it be? Which files should I upload?
I tried uploading everything but node_modules and typings folders, but I just got "Loading..." when I tried accessing the website.
I saw this: Hosting Angular 2 app
and there people just said to upload every js file, which I did.
Here's the link to my website: http://myweatherapp.comxa.com
//EDIT
All the above can be represented by this one question: What are the steps to transform local angular2-quick-start-app into a website, which can be uploaded to any web-hosting?
Take a look at Angular-Cli.
They make it so easy to build/bundle Angular 2 apps. They include a ng build and ng build:prod commands to build the angular 2 project into a distribution folder, standalone web app, so you can put it in a tomcat instance or anywhere and not just in a NodeJS environment.
Angular-Cli provides everything one could want when building an Angular 2 app.
Take a look at their Table of Contents. The Build section is probably what you are more interested in
I use Angular-Cli and I absolutely love it.
Related
Ionic 4 CLI is seems to be friendly only with Angular7. And Angular7 is slow like.. send for compile and go take a shower and back and maybe the bundle will be ready. Actually the worst framework the front end ever met.
AngularJS is probably the best happened to front end world. Everything is fast, reliable, straight forward. When you combine this with Webpack you can enjoy an high level of programming language including exports and imports and classes and and components just everything else you need.
However, the Ionic CLI doesn't integrated with something else than the Angular7.
So I have tried to create a cordova based project using:
cordova create test
And then tried to "manually" setting things up.
I have installed Webpack in the cordova based project so now it's accessiable through the node_modules folder. Then I have created the webpack.config.js file in the same directory.
Then I have created src directory which stores the webpack.entry.js file. The webpack.config file reads what the entry file created and creates a new folder called www and there it places index.html file and bundle.js.
Then I am trying to run cordova run --device with Android device connected and the app is getting actioned in the actual device.
Very nice.
However, I have some issues: it seems that the files that are in the bundle doesn't going to be work since angularjs is not completely served.
I mean, in order to serve an angularjs app you probably need a static server or serve it via node. In this case this doesn't happening so it just like drag the index.html file to the Chrome browser and have it not working at all.
I have searched tons at Google but found just nothing.
Is there any boilerplate working with Cordova + Webpack + AngularJs + Ionic framework's components, working fast with livereload?
As a school project I am making a multi-platform app. I decided to use JavaScript. I thought it would be great to have something like an MVVM pattern with Ionic2 where VM is the Angular2 part of Ionic and I would have two Views. One for mobile(the html/css parts of Ionic), and Electron for desktop. I have a problem though. In a basic Ionic project the View and the Angular part is tightly coupled, I mean they are in the same directory, cannot change the HTMLs easily.
What I thought would be great (although other solutions are welcome) is to have an "ionic" folder and a "desktop" folder, both the same structure same file names.
When building the app for mobile with Ionic I want all the files in the src folder to be copied to a dist/ folder and html,css files from src/ionic copied to their place like in a normal ionic project(the only difference, that it would be under a dist/ folder not src/, so I have to make the www/index.html to include these too instead of src/ which it does normally in ).
And when building for Desktop I just copy all the things the same way but from src/desktop instead of src/ionic.
That way I could have my business logic in "plain" Angular2 and could be reused creating the app both for desktop and mobile.
So my question is can I modify the Ionic build process somehow, to allow me to do this? Can I create my own gulp or grunt file? Or webpack? How to do that?
Finally I wrote my own gulp file, to copy the files to src/.tmp/ and after the copy task is ready I call the original scripts which are used by ionic to serve, build the projects. I could solve everything with this method.
On serve task gulp watches for changes in src/ files excluding src/.tmp and copies the changed files to the src/.tmp folder. Which is watched by ionic and rebuilt everytime something changes.
I was lucky because ionic is built on top of angular, so the builder toolset used by ionic is 100% compatible with plain angular projects.
I am studying Aurelia following the starter kit. In detail, I have selected the option of TypeScript and I complie them in Visual studio 2015. At present, the example applications work well on the local web server, IIS. Now I want to test it on an internet web server where I usually put my static html files and some php and ruby pages. Probably, the server is an apache managed by some IT company.
As I am very new to this field, I just plan to put the top folder of the local file system together with its all sub folders into somewhere in the web file system of the internet server.
Then the question is, will it work normally? I feel other options are too complexed for me to achieve at present. Or is there other simple alternative way?
I read a similar question here, but the anwer instruction is to difficult for me.
This article http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.2.4/doc/article/bundling-your-app-for-deploy teaches how to bundle your app for deployment. In short, it will transform your app in a couple files (usually 1 .html and 2 .js).
To bundle your app, run gulp export. It will create an "export" folder inside the application folder. Then, just copy and paste those files in the server and the app will work normally.
This is my first time develop an app using meteor, I find out there are many js files included in , like files from the default/installed packages and the clients files.
However when I view the in the live sites that created by meteor, there are very little or no js files in there at all. How can do this?
I can't find the information about this topic. Is it because the meteor will hide these js files once the app is deployed?
Yes, when your application will be deployed you'll not see them anymore. Like said by zero298, they will be minified and bundled.
I'm trying to work out the correct way to embed an AngularJS application into another web page (served by another app). I have two apps, running on different servers:
App 1 - PHP app
App 2 - AngularJS app (calendar widget of sorts)
The PHP app is the primary app, into which I want to embed the calendar, which is served from a remote server. I have full access to both servers, and to both apps. The idea is that I want to be able to re-use the Angular app elsewhere, so it needs to be as loosely coupled as possible to the PHP app, preferably embedded in a single line of code.
I am currently using a HTML5 tag, which seems to work well, but I was wondering if there's anything wrong with this approach, or if there's a better means of doing what I'm after.
I should mention that I'm happy to use a HTML5-only solution, I'm no worried about backwards compatibility with older browsers.
No iFrame solutions, unless there's a REALLY valid solution. My ultimate goal is to head towards a microservice-style architecture.
Thanks in advance for your help.
I generally manage all of my client-side dependencies with Bower but you could use any package manager.
This is how I would do it with Bower, which just uses Git to pull down your dependencies. This solution would require you to know how to use Git.
Install Bower—see above link.
Then, create a file called bower.json at the root of your project that points to the Git repository of your project:
{
"name": "my-php-app",
"version": "0.0.0",
"dependencies": {
"my-angular-app": "git#bitbucket.org:MY_BITBUCKET_ACCOUNT/my-angular-app.git#master"
}
}
Then you can run the following command in the root of your PHP project:
bower install
This will create a directory called bower_components at the root. You can configure the default directory.
Your application should be self-contained there. You can import it and all of its dependencies with PHP on the required page.