AngularJS application from embedded

82 views
Skip to first unread message

Alain Mouette

unread,
Nov 20, 2015, 11:34:14 AM11/20/15
to AngularJS
I want to use Angular with an embbedded application...
My idea is to serve only index.htm (8.3 names) from the embbedded device and implement the RESTful API too.
All other files should come from my server (somewhere in the cloud).

what I expect is:
1) being index.htm and the API in the same place, I can use the API without CORS or other complex implementations. (I hope this is true, correct me if I am wrong)
2) Easy to update all files, except index.htm, without updating the embedded device. And index.htm should be as basic as possible so that it will not impact on the upgrades

I know that loading libs and scripts can be easely loaded with an fqdn, but what about the other html files?
Please, point me in the direction to go. Is there an easy way of doing it?

PS: I have only taken a few one-night courses about Angular and built an application in each of them (hands on). But my knowledge of Angular is still basic...

Thanks very much for any clue :)
-- 

Alain Mouette
=== Projetos especiais: <http://lnkd.in/dEu8cNq> ===

Sander Elias

unread,
Nov 21, 2015, 1:25:02 AM11/21/15
to AngularJS
Hi Alain.

I do not know how powerful your embedded platform is, and how good it's interpretation of HTML and JS is.
When both are ok, and there is some processing power, my index.html would look something like this:

<script src="preloader.js"></script>

That's it. 
Then in preloader.js you can build up whatever you want. Probably something like this:

fetch('realIndex.html)
  .then(extractHTML) // this processes the fetch result, and returns just the html content of the file
  .then(html => document.innerHTML = html)

By splitting out that part to a separate .js file, you can easily change the way you load stuff. 

From here on, it's just a normal app. It might be that you need to manually boot AngularJS, but I don't think that's needed.

Does this help you a bit?
Regards
Sander


Alain Mouette

unread,
Nov 23, 2015, 1:07:06 PM11/23/15
to ang...@googlegroups.com
Hi, I was a little shy at reponding that I didn't understand, so this weekend we had a meeting and I asked 3 friends for help :)

What we could figure out is in this plunker. The problem is that the script.js is not getting executed, while style.css seems to be ok.
In my understanding is that would be the way to load Angular and the rest of the App...

How can I load the scripts and execute them? maybe load them from original index.js if I can get a list of them somewhere...

Just to clarify: my embedded platform is quite powerfull, but I am programing at the socket level in C++.
I am able to serve some files but have no JS at all.
Uptate is possible but it is a real PITA and requires fisical intervention :(



Alain Mouette
=== Projetos especiais: <http://lnkd.in/dEu8cNq> ===
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Alain Mouette

unread,
Nov 23, 2015, 2:31:33 PM11/23/15
to ang...@googlegroups.com
Hi Sander,

I thing I got it working... It's in the plunker (link below), do you thing this is acceptable for an Angular application?


Alain Mouette
=== Projetos especiais: <http://lnkd.in/dEu8cNq> ===

Sander Elias

unread,
Nov 23, 2015, 2:41:14 PM11/23/15
to AngularJS
Hi Alain,

Looks god to me. Do not forget to remove your script out of the 'realIndex.html' and into the scriptlist.
This way you never need to replace your index.htm and you are very flexible in loading.
Perhaps if you have a lot of things to load, insert a spinner into the mix.

Regards
Sander

Sander Elias

unread,
Nov 24, 2015, 3:14:15 AM11/24/15
to AngularJS
Hi Alain,

I forgot all about document.write.... This would be an place where it is appropriate to use it!

<html>
<head>
    <script>
        // Fetch real insex.html from external server
        fetch('realIndex.html')
            .then(function(response) {
                return response.text()
            }).then(function(body) {
                document.open();
                document.write(body);
                document.close();                
            });
    </script>
</head>
<body>
    <h1>Test: index.html</h1> You are being redirected...
</body>
</html>


I think this is an even more elegant solution isn't it? 

Regards
Sander

Alain Mouette

unread,
Nov 24, 2015, 1:31:13 PM11/24/15
to ang...@googlegroups.com
Y-E-S ! ! !
that works perfectly :)

I implemented it in a pluker: http://plnkr.co/edit/4v7oZg

Now I only have to test if it can call the API as "same origin", ah! and make it with CORS ;-)

Thanks

Alain Mouette
=== Projetos especiais: <http://lnkd.in/dEu8cNq> ===

Alain Mouette

unread,
Nov 25, 2015, 5:47:03 PM11/25/15
to ang...@googlegroups.com
Ok, I got it working with two servers using Hapi.js

First I have to use Cors, then I have to make all URL absolute...

But now comes the Angular question: To make it work I need to use
-----
var aplicacao = angular.module("SISCONTATOS", ["ngRoute"])
    .config(function($sceProvider) {
        $sceProvider.enabled(false);
    });
-----

But I should be using:
-----
trustAsResourceUrl("http://192.168.0.218:3000");
-----
But I cannot figure out from the Docs how to use it, or even where to use it :(

Thanks for your help,

Alain Mouette
=== Projetos especiais: <http://lnkd.in/dEu8cNq> ===

Sander Elias

unread,
Nov 26, 2015, 12:55:05 AM11/26/15
to AngularJS
Hi Alain,



Regards
Sander

Alain Mouette

unread,
Nov 26, 2015, 9:34:40 AM11/26/15
to ang...@googlegroups.com
Hi,
that was definetly the right page to read, works as a charm :)

Now I have what might be the last question for now:
For this to work, all my scripts need an absolute address in index.html, I have to change this:

----
    <script src="App/inicializacao.js"></script>
----- to this -----
    <script src="http://192.168.0.218:3000/App/inicializacao.js"></script>
-----

That might be annoying because the address may change, like test and deply or even moving server...

Is there any way to do it in index.html itself or should I try something like Handlebars to change it dinamicaly (or at build time)?

Thanks for your patience,

Alain Mouette
=== Projetos especiais: <http://lnkd.in/dEu8cNq> ===
Reply all
Reply to author
Forward
0 new messages