If you are new to AngularJS, you will probably worry about numerous things when you initially begin to create web apps. Even though this is one of the easiest web development frameworks that you can use, there are some tricks that you will need to know in order to get through the few first days easily. Even expert web developers have had a tough time on their first days of using AngularJS. However, as soon as you are familiar with all the tricks and tips, you will be creating useful and great applications with so much ease.
The first thing that you should do is invest time into learning these tips and tricks for seamless use. Here is how you can get started.
Learn and understand everything about the scope
The reason why this is essential is because everything in Angular.js is all about the scope. Using directives and controllers, Angular.js creates a hierarchy of scopes. Learn about isolate scopes and the value of scope in a given place. .scope is the method you can use in order to access the scope of every element in Angular.js. Angular.js scope is interesting but only if you understand it better.
Some of the tricks you should learn are:
- $($0).scope() is the code to use if you want to see the scope that is associated with the element and all its properties.
- The properties that have been inherited from the parent scope will not show up, but if you want to see them, you can always type their names.
- To look for the properties of the parent scope, use the code $($0).scope().$parent.
- $($0).scope().$root is the code to use in order to look at the properties of the root code.
- If there is a directive you have highlighted with the isolate scope, you can look at its properties using the code $($0).isolateScope()
- If you have a highlighted element inside an isolated scope, the code $($0).scope() will show what is available
Everything about the scope looks confusing, but it is not hard at all. You just have to master a few pieces, here and there. There is absolutely no harm in trying them all, if you do not know what to use at a particular time. This way, it will be easy to know what works for what and with time, it will all be much easier.
Use of Breakpoints for an easy time
console.log or debugger are the statements to use and they help considerably whenever you are debugging a JavaScript code. They are very useful but not really necessary. What you should learn about are the breakpoints. They are available in every major browser’s inspector.
With the breakpoints, you will not have to go through the entire loop in order to get to your point of interest.
Determining where variables come from
The creation and use of a simple web application using Angular.js can be very easy but the application has to grow after sometime. When this happens, it becomes hard for one to tell where some of the variables in the templates come from. If it was just one directive with an isolate scope, it can be easy to tell where the variable is coming from. But when you start dealing with a hierarchy of directives and controllers, you will have to be smart in order to track down the variables to know where they are coming from.
This is how you can do it:
- Find the element that is using the variable, then determine its scope.
- Inspect its value, for instance using code $($0).scope().foo where the property is called foo.
- If its value has been defined, you will have your answer since the property will come from the controller or directive of that defined level. If not, you have to try another level in the DOM. This should be done until the answer is found.
Figuring out why some elements are not showing up
Sometimes you will not have elements showing up when you search or the inspector if you are using ng-if, ng-switch, or ng-views. This is because these directives add and remove their content totally from DOM on the basis of condition or routes used on them. They are different from ng-show, which shows and hides elements through hiding their visibility.
In angular.js, a comment will be left in the place of the element.
Finding the controller handling a certain section of a page
Many people will find this one easy but then again, many web developers forget about it. ng-controller attribute in the DOM is what you need in order to find out the controller that is handling a certain section of a page.
Finding that attribute in a large HTML will not be easy for many people. However, there is a way out; click on the element, then run $($0).attr(‘ng-controller’). If you do not get anything this way, you might have to click on the parent scope.
jQuery can help a great deal too, in order to find a controller that is close to where you are looking using just one code:
$($0).closest(‘[ng-controller]’).attr(‘ng-controller’)
Understanding the digest cycle
$digest is used in Angular.js to trigger changes. If there are no proxies or object setters, Angular.js will not receive a notification from the objects when their properties change. Digest cycle is therefore used in order to inspect watchers and expressions for any change. Angular.js will run digest when an event that it knows of, happens.
When something happens and Angular.js is unaware of it, for instance a console command, nothing will happen and Angular will not automatically rub digest. You will have to execute digest yourself so that you can get an update.
Like any other programming language, Angular.js is a bit tricky. This trickiness does not last forever though because you can master a few skills and tricks if you are determined to learn and use it for your app development.
