How to make an existing AngularJS SPA plugable to other projects - angularjs

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

Related

Reload AngularJS web app when file changed

I'm trying to create web using AngularJs framework, and I want to watch my changes on sass, js and html file (auto refreshing browser).
How can I do that?
You can use Yeoman generator for your Angular projects. This will provide
Provides a directory structure geared towards large Angular projects.
livereload for your project etc
cg-angular documention

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.

Sails Angular Frontend

Ok so I have looked around and cannot find the exact answer I am looking for. When developing a Sails app (which I am new to) it appears that by default it creates its own frontend using EJS.
Is this correct?
If this is correct then why is there an npm for sails generate frontend
If I want to use an Angular frontend is sails-generate-frontend-angular the best route to go?
Thanks!
First you need to separate server templating (EJS) from angular.
Just because sails defaults to an EJS template engine does not mean that you can not still put angular is your asset library and create and angular app. EJS is (the default but not the only option) what sails uses as a programming language for building its templates on the server that then get delivered to the client. Angular templates are used once delivered to the client to display information and perform tasks specifically already in the client machine.
1.) See above
2.) Sails-generate-frontend helps to setup your asset pipeline. It creates grunt tasks to copy image files and setup your javascript libraries such as ANGULAR.js, jQuery ect for use in your front-end.
3.) It could be. It depends, what a lot of people do is setup 2 projects. They use Sails as their API and then setup a second project for their Angular app (especially if its a SPA).
If instead your just using angular is specific places in your app (think jQuery style), then you would use a something like generate-front-end to take the angular library from someplace (like bower_compenents) and place it in your assets when you lift your app. It also makes it avaiable so that it can be placed in your html to be included in your app.
I on the other hand, use sails templates (I use Jade instead of EJS) to create and modify my angular templates on the server before they reach the client. This is a slightly advanced practice and can get confusing if you don't understand the difference between generating html on the server vs client.
An alternate method of thinking about this would be creating your index page on the server. This page would include your css and scripts. It would possibly be the only page on your server and everything else would be angular templates rendered on the client asking for JSON calls. In this scenario you would be using SAILS (ejs, or jade or whatever) to render only a single page INDEX.js and that might be the only server template you have.
However, this being said. Sails ships with this stuff already. You don't need sails-generate-frontend. Its is already inside a standard sails app.

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.

EntryPoint Classes & Modules in GWT

GWT code structure is really getting hard for me to follow :(.
As per my understandings,
Modules references Entry Point classes.
When a module is loaded entry point classes referenced on it get initiated, and onModuleLoad() of corresponding classes will get executed
HTML host pages need to include a nocache.js file (only if it needs to work with entry point classes)
If my understandings are correct,
In standard web development platforms like asp .net an aspx page refer to a servlet. Here mulitple html pages can refer to a single entry point class.Why?(and this is much complicated?)
When I can expect a module to load? If multiple modules & html pages are there, how we can assign modules to html pages, so that a particular module will load when user requests an html page?
I have an Async service call implemented at onModuleLoad(). And want to call this only for index.html page. But How can I identify the html page at onModuleLoad()?
Why Google proposes GWT for GAE app development?
I am newbie in GWT. I want to follow a good programmig structure for GAE app development. Corrections and suggestions are expecting...
Pls see this to understand how a GWT project is organized: https://developers.google.com/web-toolkit/doc/latest/DevGuideOrganizingProjects
(Bootstrap is also described there, how application loads from the html page)
I think the main thing is that everything compiles to one javascript file.
The app runs in a single page.
In .gwt.xml you define the entry-point of your app.
Also you specify what other modules you inherit.
This is very similar to java or .net applications where you specify what other packages you need. The modules are like libraries. For example if you needed to use JSON you would inherit the json module. Also I don't think to you are obliged to use GWT on the front

Resources