Introduction to AngularJS Architecture Series
Ready to start learning about AngularJS Application Architecture? This lesson series is for you. Let's talk about what you will learn.
[00:01] Hello. Lukas Ruebbelke here, and welcome to the Eggly Architecture Series.
[00:06] In the previous series, we introduced a lot of AngularJS functionality over the course of building out Eggly, our bookmarking application. The end result is that we had a really neat application that essentially exists in two files, with all of the JavaScript living in a single controller.
[00:31] This is entirely appropriate for introducing new concepts and for illustration purposes. Eventually, we need to apply this to real-life scenarios.
[00:41] In this series, we are going to shift our focus from functionality to architecture, and how to architecture AngularJS application in the "real-world". We are going to cover four main topics that will help you create AngularJS applications that will scale and not fall apart as the demands and complexity increases.
[01:04] The first thing that we're going to cover is file structure. How do you actually structure your files and folders in a way that you can add in new features without getting lost in hierarchy?
[01:20] Then, once we've established that, we're going to talk about submodules and how to use submodules to organize your code into, essentially, containers so that the end result is that your main application is really just a composition of smaller, more specific pieces of code.
[01:43] Then, from there, we're going to learn how to actually navigate the unique states of our application using UI-Router.
[01:52] Then, from there, we are going to use services and models to abstract out our business logic and domain model into a place that the rest of our application can use, but it's not encumbered by that. What I mean is that your business logic is in the model, allowing your controllers and views to be lightweight and very specific.
[02:16] I'm absolutely thrilled to spend the next series of lessons with you, as I'm confident you're going to learn some great techniques that you can start to use immediately on your own projects and with your own team. I look forward to seeing you in the next video.
Hi Saurav --
The code is linked in the next lesson.
What is the editor that you're using? Would be helpful if you can add the tools used in the getting started series as well to newcomers!
Hi Santosh! Great suggestion!
In the meantime, I am using WebStorm from JetBrains. It comes with an incredible Angular plugin right out of the box that saves me a ton of time. There are too many features to list but trust me... it is excellent!
is this course still up date on best practices for organising AngularJS applications?
how the code should look like if we work with a real JSON API, what things needs to be change?
Hi, Victor -- this concepts covered are still applicable to Angular 1.x applications. The main points are to organize by feature, keep your controllers small and your models fat.
Also, you can see a pretty simple pattern for hooking up $http a real REST API in this series which starts here http://onehungrymind.com/build-simple-rest-app-angularjs-part-1-node-api-strongloop/
Hope that helps!
What do you think about create course about ng1 all written in typescript ? It could be very helpful.
I think that is a great idea! :D
I would love to see one!
Where can I get the source code for this tutorials?