HabboWeb Templates

Hello!

I'm in the progress of working on a HabboCMS. I'm trying to replicate the HabboCMS the best I can in every possible aspect.

I don't know anything about Angular or the way it works Apart from knowing it generates the content on the site through templates. I also know that AngularJS is caching the entire site within the two js files (vendor, scripts) so it doesn't have to keep fetching the template files all the time. Which is why the structure of the pages (html) is loading without having to be connected to the net (with the exception of refreshing the DOM)

Anyone here familiar with AngularJS that is able to explain how Habbo have implemented it?

For example. In the scripts.js on Habbo.com, there is templateUrl for each module. That URL is obviously grabbing a template from somewhere, but what is it relative too. Does AngularJS have a variable stating a baseURL or something like that? I have spent hours on it and I can't find anything that is loading these template files.

Can AngularJS or would AngularJS be setup to grab these templates from outside the website directory tree?

I'm just really curious as to how AngularJS is working! :)

Thanks!

The implementation of Habbo's Angular is over AngularJS 1.0, read the docs and you will learn how it works. That isn't something that can be learned through a answer in a forum.

Read the docs here: https://docs.angularjs.org/guide

Also, is really simple how Habbo does it. The code is big so i recommend using a decent IDE like WebStorm. Notepad++ isn't recomendated for that. Ah, if you have any specific dudes, fell free to ask to me.

Quote:

---

Originally Posted by ovflowd

The implementation of Habbo's Angular is over AngularJS 1.0, read the docs and you will learn how it works. That isn't something that can be learned through a answer in a forum.

Read the docs here: https://docs.angularjs.org/guide

Also, is really simple how Habbo does it. The code is big so i recommend using a decent IDE like WebStorm. Notepad++ isn't recomendated for that. Ah, if you have any specific dudes, fell free to ask to me.

---

I understand! Sweet. I'll have a look at those, thanks heaps!

Just a quick question. Can Angular grab its template files from beyond the root directory, or do these HTML, TPL (or w/e extension they are) have to be able to be accessed like a normal file (within the root directory) for AngularJS to include them in its rendering of the page?

Would I be right in assuming no, as they need to be able to be accessed client-side for Javascript to see them?

Quote:

---

Originally Posted by academic

I understand! Sweet. I'll have a look at those, thanks heaps!

Just a quick question. Can Angular grab its template files from beyond the root directory, or do these HTML, TPL (or w/e extension they are) have to be able to be accessed like a normal file (within the root directory) for AngularJS to include them in its rendering of the page?

Would I be right in assuming no, as they need to be able to be accessed client-side for Javascript to see them?

---

Angular templates need be directly injected in your Angular JavaScript file. You can use only pure HTML and CSS. The Angular does the communication through REST + jSON.

Quote:

---

Originally Posted by ovflowd

Angular templates need be directly injected in your Angular JavaScript file. You can use only pure HTML and CSS. The Angular does the communication through REST + jSON.

---

Thanks heaps for your post again!

That makes sense and everything. But do those template files need to be inside the root directory or can they (for example) be outside the root directory. For example:

Root Directory: C:\xampp\htdocs\index.php
AngularJS Templates Directory: C:\xampp\angularjs_templates

That's the only thing I'm unsure of at the moment.

Don't mistake templates with layouts. The Layouts you can put were you want. The templates are built-in inside the Habbo AngularJS file.
In HabboWEB you have templates, layouts and views.
The static page contents like index.php, client.php are the views..
The layouts are the dynamic file contents like Habbo Guide, Habbo Rules, Shop, Safety Quiz, etc. Those layouts use the templates from inside the Habbo AngularJS file. You also can customize the templates.

Quote:

---

Originally Posted by ovflowd

Don't mistake templates with layouts. The Layouts you can put were you want. The templates are built-in inside the Habbo AngularJS file.
In HabboWEB you have templates, layouts and views.
The static page contents like index.php, client.php are the views..
The layouts are the dynamic file contents like Habbo Guide, Habbo Rules, Shop, Safety Quiz, etc. Those layouts use the templates from inside the Habbo AngularJS file. You also can customize the templates.

---

Okay. You're saying there isn't external template files, and that those template files are literally built-in into a function inside the AngularJS file?

There doesn't exists external template files, but beware there exists external layouts and views.

It's Angular routing,

You can use ng-include for a static "template" file, and use routing for the rest of the web pages. Be sure to invest time learning how ng-if works and ng-show, etc. Angular is putting the stress on the client so the end website only has to send JSON data to the client and nothing more. All files used must be inside your root folder, so for you

htdocs:/ index.html
htdocs:/public/views/home.html

and for folder structure store angular code like

htdocs:/assets/js/angular-min.js
htdocs:/assets/js/controllers/homeController.js


I would advise learning Angular 2 as it's dramatically different (but better)



Edit
Do not attempt to copy Habbo's implementation of it, but work within your own implementation as you go on. It will make it a lot easier when designing an API, and keeping your app code clean.


For a tutorial,
https://scotch.io/tutorials/routing-...mponent-router

Quote:

---

Originally Posted by LeChris

It's Angular routing,

You can use ng-include for a static "template" file, and use routing for the rest of the web pages. Be sure to invest time learning how ng-if works and ng-show, etc. Angular is putting the stress on the client so the end website only has to send JSON data to the client and nothing more. All files used must be inside your root folder, so for you

htdocs:/ index.html
htdocs:/public/views/home.html

and for folder structure store angular code like

htdocs:/assets/js/angular-min.js
htdocs:/assets/js/controllers/homeController.js


I would advise learning Angular 2 as it's dramatically different (but better)



Edit
Do not attempt to copy Habbo's implementation of it, but work within your own implementation as you go on. It will make it a lot easier when designing an API, and keeping your app code clean.


For a tutorial,
https://scotch.io/tutorials/routing-...mponent-router

---

Oh cool! Thanks buddy. I just wanted to work out where Habbo are storing their template files. Obviously they are stored somewhere inside the Document root directory of either habbo.com or their CDN and that would be mentioned somewhere in the Javascript file of Angular.

Quote:

---

Originally Posted by academic

Oh cool! Thanks buddy. I just wanted to work out where Habbo are storing their template files. Obviously they are stored somewhere inside the Document root directory of either habbo.com or their CDN and that would be mentioned somewhere in the Javascript file of Angular.

---

It's easier to manually do inspect element and use Unminify JS, CSS and HTML Code

Quote:

---

Originally Posted by LeChris

It's easier to manually do inspect element and use Unminify JS, CSS and HTML Code

---

I know. That's what I've been doing. I have used jsbeautifier and such to help make it more readable. That's where I have found javascript variables such as templateUrl. But can't see where it is using those variables else where in the file or the site?

The only variable that match up are the keys in certain HTML elements that I can append to the Habbo Web Pages URL to complete and get the HTML file. But can't find the front page template file or register template files. Things like that. Just the habboo.akamaihd/PRODUCTION/common/box_ or w/e the full URL is and nothing else..

Quote:

---

Originally Posted by academic

I know. That's what I've been doing. I have used jsbeautifier and such to help make it more readable. That's where I have found javascript variables such as templateUrl. But can't see where it is using those variables else where in the file or the site?

The only variable that match up are the keys in certain HTML elements that I can append to the Habbo Web Pages URL to complete and get the HTML file. But can't find the front page template file or register template files. Things like that. Just the habboo.akamaihd/PRODUCTION/common/box_ or w/e the full URL is and nothing else..

---

I personally don't know why you're following Sulake's implementation which is over-the-top (very much so) because of what it has to support / do.

I also do not have any clue what a template file is

Inspect element redundantly or not at all

Quote:

---

Originally Posted by LeChris

I personally don't know why you're following Sulake's implementation which is over-the-top (very much so) because of what it has to support / do.

I also do not have any clue what a template file is

Inspect element redundantly or not at all

---

Why you're trying to help him if you don't know about their implementation. stfu. lmfao.

Quote:

---

Originally Posted by ovflowd

Why you're trying to help him if you don't know about their implementation. stfu. lmfao.

---

ddd dd

It reminds of how Azure Web turned out. Shut up if you think he wants some poor choppy implementation from a Brazilian developer who can't write decent PHP.


If you're actually instantiating that you need "the template files" from Habbo, what for? They use Angular's routing with a whole lot of shit added on top of it, and they don't have a "special template file location" besides where the route gets it from. You could take apart their entire controller class and manually find it or rebuild an Angular 2 app which would be better suited for a retro, and just rip the design aspects you need. Habbo's implementation goes where we don't need to, and for many reasons.


Not to mention, @ovflowd I actually made an Angular implementation of Habbo.com without crying like a school girl. He keeps saying template file, "where the bloody hell is this??" when it's literally what is rendered in front of him. The header files, which there are 2 different ones just changed by a quick div addition/subtraction using ng-if if done right.

Of course, only one of us had a proper right Angular implementation and the other tried to make a faulty PHP cms for his faulty C# emulator