Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

The logic of Angular JS web applications

Saturday, November 7th, 2015 by Servage

angularMany developers new to Angular JS (or client-side Javascript development in general) are often struggling a bit with the understanding of the conceptual logic behind the development workflow and how things work together. Especially developers used to traditional server-side rendering will have to completely change their mindset.

API-based

The first thing to really understand is that client-side Javascript development is essentially an API-based development, because you are building a stand-alone Javascript application for the browser, which relies on data endpoints on your server. Essentially this is the same way of thinking when building native apps, or any other integrations. Forget about a traditional request which triggers a server-side script, which then renders and returns a complete HTML page.

API benefits

The great advantage of building an application with Angular is that you are essentially creating the foundation for other API based services, like other native apps mentioned above. This allows integration of different front ends, but also mitigates easier transition between front ends, for example during new application development. You could in practice exchange your front end, native apps, or backend independently from other components of your project.

What is loaded?

Whenever an Anuglar JS app is loaded, you basically load three different things. First of all, the main HTML page including the Angular JS wrapper. This can actually be a super simple and short HTML page, because typically an Angular JS app simply resides in a main container, covering the entire page, and building everything else from other templates. The HTML template also loads the stylesheets and main application’s Javascript files, whereafter the Angular JS app is initialized.

What happens thereafter is highly individual and depending on your application. A typical approach would be that Angular automatically loads template files from your server whenever needed. However, this approach may lead to many small HTTP requests, and therefore you can use techniques to preload common templates during the initial loading.

Application structure

Normally Angular JS applications are residing in a public folder. E.g. if your sites web root is /path/to/root, then your application could be put directly in there, or into a subfolder. Sometimes developers are leaning on traditional MVC framework structures when building their folder and file structure, but it actually makes more sense to group files by feature. It makes navigating through folders much easier during development.

MVC approach of file structure:

app/controllers/feature.js
app/views/feature.html
app/css/feature.css

Feature-based approach of file structure:

app/feature/controller.js
app/feature/view.html
app/feature/style.css

The above is a primitive example of the reversed thinking and you could easily adopt a different way. The point is that there are no rules when it comes to folder structure, and you can do it however it is most convenient for you.

 

The logic of Angular JS web applications, 5.0 out of 5 based on 5 ratings
Categories: Guides & Tutorials

Keywords: , ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.