If you are wondering how many days passed since new JavaScript framework came out, you can always check THIS counter. :) However, the question is, is it still worth to learn Angular 1 when we know that the first official Angular 2 stable release came out few weeks ago? At the moment I'm writing this, it is still definitely one of the best choices for creating a Single Page Applications. If you are new in a subject and do not know how to start, here is a very quick guide what and when you should start to learn.
Beginner's steps
So, here you are. You finally decided to learn Angular. But, before you start developing your first app, it's a good idea to try to understand MVC (Model-View-Controller) concept. It isn't hard to find good descriptions of MVC that are filled with information, images, and excellent examples so, just in a nutshell:
- every app user sees View,
- to navigate/manipulate an app you have to use Controllers,
- Controller is manipulating Model,
- Model updates the View, and again user sees a result of his action.
This approach keeps your code elegant, clean and very readable for you and other developers. Now, take a look at other available design patterns, check the differences between them and choose one, because Angular is an MVW (Model-View-Whatever) framework, where "Whatever" means "whatever works for you". It might be confusing, but in the end, everyone gets it. :)
Next step – official guide and documentation. There is no better way to learn a new technology than directly from its creators.
If you want to make an AngularJS app, you have to:
- know how to bootstrap AngularJS app using <ng-app> attribute (recommended) or angular.bootstrap function directly in the .js file, which is both the easiest and the most important,
See the Pen mAdqxo by Artur Kasprzyk (@Azrt) on CodePen.
- Understand the life cycle of Angular, which has three phases:
- the bootstrap phase - when Angular starts initializing its components,
- the compilation phase - when web page and DOM tree is fully loaded, and a static page is replaced by a dynamic one, which represents the Angular View,
- the runtime data binding phase - when any changes in the $scope are immediately reflected in the View.
- know what interpolation and two way data binding are, what Controller in Angular is and how it corresponds with the View by using $scope or via "controllerAs" syntax. Official documentation says that "Scope is the glue between application controller and the view".
See the Pen ZpEagv by Artur Kasprzyk (@Azrt) on CodePen.
- know what Dependency Injection is and how to communicate between controllers through Services. Later on, you'll learn more about other possibilities, how to share data or hot to use $rootScope, but for now stick with the Services.
See the Pen ALBbdo by Artur Kasprzyk (@Azrt) on CodePen.
- know common, useful directives that Angular provides. You've already learned few of them ("ng-app", "ng-controller"). Later on, you should be able to create your own directives, which will make your code cleaner and can be reused not only within your app but also in every app you'll make.
- learn and understand the digest cycle. It will help you to understand how data binding in Angular actually works and why you have to run digest loop manually.
Controller, Service, Module, Filter, Directive
At the beginning, there is a lot to learn about Angular and it's terminology. If you want to know Angular well, you have to spend some time on documentation and code examples. Every component is important when it comes to making a robust application. Let’s have a quick tour and see what those components do.
Controller
We already saw Controllers in action and how they correspond with the view by using $scope. You're initializing controller in a view by using "ng-controller" directive and adding controller name to it. You can sleep well when your Controller doesn't have many lines of code, because there is a big probability that you know what separation of concerns is and how to place logic into a Services, rather than keeping it in a Controller. If suddenly it is getting bigger, maybe there is a way to refactor it?
Service
As you already know, services are the best places to share data within your app. There are few types of Services that differ from each other. If you want to store only a single value (or a single object), you should think about storing it in a 'value' service. It is self-explanatory: you need to use one object/value, use 'value' service.
Another type of a service is a 'constant'. 'Constant' is the only object (or value) that can be placed anywhere in a project, even in a config modules.
'Provider' is the most configurable service and the only one (besides 'constant'), that can be placed in a 'config' function of a module and which runs during the compilation phase of an application. It expects to return a function '$get'.
'Provider' functions may be complex, so if you only want to retrieve data from the database or share methods between controllers, you should use 'factory' or 'service'. The difference here is delicate but meaningful. Service is just a constructor function that will be called by using a 'new' keyword, while factory returns an object.
You can see them in action below:
See the Pen GjRQOy by Artur Kasprzyk (@Azrt) on CodePen.
Using Dependency Injection, we are adding a constant of 'CONSTANT_NAME' key to a provider called 'myValues'. Then we are replacing provider's "firstValue" private variable using "setFirstValue" method and setting it to a constant value on a compilation phase using 'config' function. At the very end we are injecting factory, service, and provider to a controller called 'myController', assigning their data to a controller properties using 'controller as' syntax and finally using them in the View.
Directive
Directives are special components in your DOM which can be represented as an attribute, element name, CSS class or comment. AngularJS provides few built-in directives that help you manipulate DOM, like "ng-class", "ng-if", "ng-repeat" . Every built-in directive uses "ng" prefix, so you can easily find out which directives are built-in (unless you start naming directives with the same "ng" prefix, which is of course not a good idea).
Module
Taking from the official Angular documentation, module is just a container for all components of your app, such as directives or controllers. Thanks to that approach you can have multiple modules in the same application, so there might be separate modules for each feature, reusable component and application level module for application initialization.
Filter
Filters help formatting values in a non-destructive way, so they can be displayed to the user however you want. There are few on them provided by default,for example'currency' or 'filter', but a process of creating your own filters is very easy. To apply a filter on a value just use pipe '|' in a View. Alternatively, you can use it directly inside the Controller.
See the Pen ALWvyY by Artur Kasprzyk (@Azrt) on CodePen.
Angular 1.5 - a big step to modularity
Since 2012, when first stable version of Angular was released, it changed some concepts of building SPA. Angular 1.5 introduces new modules called 'components' which are basically extended directives that force you to start thinking about your app structure in more of a modular way. If you have ever seen a React based app, you should be familiar with this concept. You split your app into smaller pieces to make it more scalable and flexible. Read more about components here.
Two way data binding, event if it’s a really cool concept, has some disadvantages and unnecessary watchers that may slow down your app. That's why Angular 1.5 introduces new way of binding – one way binding, where values are passed in one direction - only from parents to children.
Angular 1.5 is also similar to React when it comes to lifecycle hooks. Now you can watch your components lifecycle and make some actions every time it has been created, changed or destroyed thanks to $onInit, $postLink, $onChanges or $onDestroy hooks. Read more about it here. If you get familiar with all new Angular 1.5 concepts, then future transition to an Angular 2 should be less painful.
The right and the wrong way of developing an AngularJS app
- There are multiple free tutorials and courses. Picking one will definitely help you learn basics of an Angular nature and let you craft your first simple app. When choosing a tutorial always remember to check when was it originally released, because there is a huge probability that some provided information are outdated and based on an older version of Angular.
Best free sources that describe AngularJS are:
- AngujarJS official tutorial
- CodeSchool interactive tutorial
- Egghead video tutorials (some of them are for users with pro membership only)
-
It is a good practice to look into other people's code to see how some problems may be solved differently and how other developers are organizing their code. Try GitHub to find multiple projects based on Angular or check out this list.
-
After you get a solid understanding of how Angular works, try to standardize your code. Learn and use in your future projects John Papa's Angular styleguide. It is a spectacular list of best practices that will make your code cleaner.Thanks to that, not only you, but also every developer who will have to look into your application, should be able to quickly understand how your project works.
-
Learn Angular's anti-patterns. Thanks to articles like this and this you can try to avoid common mistakes that make your code less predictable. Antipatterns, once implemented and not refactored, may be cause of frustrating problems when your app will grow. They might be not visible on the early stage of development but, for example, because of lots of unnecessary AJAX requests or events, might slow it down drastically.
Do not reinvent the wheel
During development of an application, there will be a time when you have to make a functionality that might be common for many different apps. Instead of creating one from scratch, why not find a ready-made, fully functional example and adapt it to your needs? That's very tempting and reasonable solution, but you have to be aware that even popular modules may have some bugs and in some circumstances not behave exactly how we wanted. Before you use someone else's code, find it on a GitHub and check other developers feedback. The more stars, forks or feedback, and the bigger documentation, the better.
When writing same repetitive code over and over again, it starts to be annoying and only slows you down. It may mean that it's time to find some good boilerplate (or create one). Learn it and stick to it (until you find a better one). Another way to create basic app structure is the usage of a Yeoman generator. Thanks to Yeoman it's easy to generate controllers/routes/views using simple commands which will save your time and help you focus on more important tasks than writing and registering new modules.
Stack Overflow to the rescue!
Are you stuck, have a meaningless error in a console and want to figure out why something is not working? You're probably not the only one who had a similar/identical problem with Angular, so why not try to search an answer on Stack Overflow? If you have a really bad luck and the problem is so unique that no one ever had it before, just ask for help - it doesn't hurt. :)
Let's get to work
So that’s it. I just gave you few really important tips on how to start working with Angular. There is still a lot to learn about this super cool framework and you'll probably find your own ways of getting familiar with it, so I'm going to stop here and, at last, let you start coding!