How to host an angularjs app in domain - angularjs

Currently Learning to create a simple AngularJs App.
This is my first MVC app, so my questions may be very basic.
I understand that we require nodejs to run the Angularjs App, so will the hosting provider have the node.js installed with their server?
If so, which does the hosting provider support: the Angularjs, Emberjs, or Knockoutjs? Currently my client have hostgator and netfirms.
While reading some posts, I learned a few terms which they use with Angular js like Yo, Grunt, Bower, so I just wanted to know what is this used for?.
Can anybody tell how exactly you host the AngularJs app?

If you're deploying a client-side only Angular application (ie. you don't have custom server code), then you might want to check out Firebase Hosting. It's specifically designed for hosting client-side applications that use Angular, Ember, React, etc.
Firebase's Hosting will let you deploy from command line without managing your own servers (no NodeJS), and it handles SSL, CDN, and other best practices for you.
(Disclaimer: I work for Firebase)

AngularJS doesn't require node.js to work, you can even use it from the google CDN without having the script hosted on your server. Node.js is used mostly for the testing, like if you want to do e2e test with Karma for example. It's a good point if you have it, but you can host an app on a simple server without node.js, and test it locally for example
Actually, any server on the internet (a good old apache for example) will be able to host an angular app, as all the work will be done on the client side
Node.js, however, is required for the question 3. Yeoman (the Yo command), grunt and bower are part of the workflow sometimes used to build an angular app. But, these are not required either. It allows you to create quickly a skeleton for a new app, test it an deploy it. It's explained on their website, http://yeoman.io/
Those tools require node.js to work, but they're not a requirement for an angular app to work. It can be useful to have them somewhere if you plan on building many angular app in the future, but you will be able to host thoses apps even without any of these tools.
How to host your angular app ? Like any other HTML page. You can even copy this code and save it to your hard drive :
<html ng-app>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js'></script>
</head>
<body>
{{"hello"+" world"}}
</body>
</html>
then open it, it will work !

NodeJS isn't a requirement for AngularJS. Angular is a client-side library.
Angular's team uses NodeJS to help you do things like test your javascript, or pull down files and set up everything you need to run a little web server.
So all you really need for an "AngularJS app" is 2 files: angular.js and some HTML file.
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body ng-init="what = 'gas'">
Now you're cooking with {{what}}!
</body>
</html>
Beyond that, any web server that will host static files will do for the most part.

I understand that we require nodejs to run the Angularjs App, so will
the hosting provider have the node.js installed with their server?
No, AngularJS doesnot require Node.js to run. It is just that tutorial you are using to learn AngularJS might be using Node.js for their examples.
AngularJS is a client side technology, so it does not need any specific server to run. And since you are using ASP.Net MVC as your development platform, you'll need an ASP.Net hosting for deploying your app.
You can take a look at my recent ASP.Net MVC / AngularJS development here:
http://bipolarapp.bitsstech.com
and this app is hosted at Windows Azure.

Related

deploying basic angularjs app

What do you need to deploy a simple AngularJS app on a server? I have never done any kind of deployment before.
The app is really basic and contains a few html files and one js file which contains the module, config, controller and a few variables. I run the app locally using brackets
What do I need to deploy this app on a server and how do I achieve that?
You should be able to just upload the files to the server...
There are hundreds of articles about deploying an AngularJS application (with minifying, uglifying, etc.) but it sounds like you just want to get your application to a publicly accessible place, so you should be fine to just upload the files.

Hosting an existing Angular website

I am working on a website for a family friend. It's a fairly simple Angular SPA with 3 'pages'. When I'm done, I plan to bundle it into an html, css, and js file. In addition, I own the domain that I'd like to use through google domains.
Currently, I am trying to find a hosting service that will let me upload my 3 files (html, js, & css) and just host it. However, I haven't found any services that let me do that other than AWS. So far, I've tried weebly and squarespace and they make me use their templates and GUI to build the website. If I needed, I could just use their templates. However, I'd prefer to bbuild it from scratch so I can practice my Angular and Node Skills.
Any suggestions for website hosting services that let me upload the html, css, and js files of a website I've already built?
Thank you.
You can do so with any website that supports FTP. If you are looking for something really simple, see:
https://www.bluehost.com/
Amazon, recently launched a service just for this purpose. See:
https://amazonlightsail.com/
Best place to do it : https://pages.github.com/
You can link your domain to gihtub's IP.
If you feel gh-pages are tought. Try others like https://www.hostinger.in/, https://www.hostinger.com/ , https://in.000webhost.com/

Use .NET bundling & minification feature in angularjs - index.html

I have a web site with angularjs framework for front-end using index.html and .net REST API services.
I need to achieve something one of followings:
1. I can create a dummy MVC view and write #Scripts.Render(...) to render all the bundled script and whatever I can see chrome developers tool e.g.
/bundles/angular?v=asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1
I can take this to index.html and put in a way
<script src="/bundles/angular?v=asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1"></script>
2. This is possible on my local, however I am not sure, if I publish to another server, there random key asIfVCRZ0mozQeQR34C1aw1HwLnnZATyODNO8bNn1mY1 will remain as is.
So questions here are:
Is there any setting to keep this key unchanged?
OR simply handling bundle & minification feature of angularjs-index.html page? note- I do not want to use any of npm packages

How to make an existing AngularJS SPA plugable to other projects

I have an AngularJS app (myApp) currently used only by my own ASP.NET MVC app. The AngularJS is working well in my app. Now other MVC apps also want this as an add-on (plugin). Is this possible to do without modifying my original AngularJS app, and been too intrusive to other apps?
I thought is like this:
distribute the myApp.js to an in-house CDN to be included the BundleConfig.cs by other apps
add a <DIV data-ng-app="myApp"> in pages of other apps so that my original AngularJS can be injected.
Far too many unknowns about how your app is configured for a precise answer but any module can be dependency injected into another module.
For simplicity sake assume that you have all the templates needed to run your app converted to javascript strings and use $templateCache() to register them and all the code for your app is in one file then anyone would be able to inject your module into theirs and use whatever components you have available.
All they would need would be a script tag that points at location for your app file ... and that location could be any server, cdn or local download directory

How to use Ionic Framework for Web App Development?

Is it possible to use ionic frameowork for regular Web Applications rather than wrapping it in Cordova?
This is possible if you include the components of www/lib/ - This folder contains the core of ionic(the ionic framework + angularjs) and you can proceed from there.
However it's important to note that ionic was built on top of angularjs, specifically with mobile in mind. To get better results for web app development, you should consider using core angularjs(for functionality) and bootstrap3 (for UI).
V2
Ionic now supports PWA(web apps) and support for desktop is coming too soon
Ionic build browser
V1
Ionic can be used for regular web development. If all you need is web dev stop here. But if you want your app & web to serve from the same codebase read further
Step 1
Create a copy of index.html inside merges/browser/ (merges is at the root level i.e myApp)
include
<script>
var is_browser = true
</script>
&
<body ng-app="myApp" class="platform-website">
Step 2
Remove unnecessary js files like cordova.js from index.html
Step 3
add in app.js
var is_app = (typeof is_browser === 'undefined' && !ionic.Platform.is('browser')
&& ionic.Platform.isWebView());
Now use css hide/show or angular hide/show using these
While I don't believe there is much support for anything but hybrid web apps in Ionic, you can check out Mobile Angular UI for a very similar alternative with support for the mobile web.
Orane is right.
When You "node app.js" your app runs a server. We need to provide this server with all files we want. With Ionic Application it's basically www folder. In following example i put all contents of www folder to my public folder.
My root folder has app.js file and public folder. That's how app.js looks like:
var express = require('express');
var app = express();
var server = require('http').createServer(app);
app.get('/', function (request, response) {
response.sendFile(__dirname + "/public/index.html");
});
app.use(express.static(__dirname, 'public'));
In public folder i have all frontend css and js. We included the whole folder public in code above. Now in index.html of public You should include files with public/, like this:
<script src="public/lalala.js"></script>
All the best, anybody, feel free to ask anything about Node.js+Ionic Framework
Depending on the complexity of the app it is absolutely possible to use the Ionic Framework for regular web applications!
When you create your app there is a /www folder that contains all your HTML, JS, and CSS. That's the front end for your web app.
Most web apps are simple interfaces that access data with only a little bit of logic in between. In most cases you can put that logic in your JS and let the clients handle the workload.
Data can be handled by a Backend-as-a-Service (BaaS) solution like Firebase or Parse. I like Firebase because it ties in nicely with Angular and Ionic.
If you need to connect to services that require secrecy, like credit card payments, you can hook in to a service like Zapier.
For hosting there are a number of static app hosters that have popped up specifically for serverless apps. I prefer divshot even though they don't seem to be actively pushing out new features anymore.
The solutions I've outlined here will help you maintain the consistency across platforms that makes Ionic great!
Our choice for hybrid mobile apps is the ionic framework, however for the web applications front-end part is not in the ionic framework.
For example, we do web application part in pure Angular or Kendo UI for Angular AngularJS UI.
It is more efficient when the same team can be productive on both platforms (mobile and web).
Hope it helps.

Resources