With the rise of Single Page Applications (SPAs), the demand for front-end developers adept at handling application logic (models, views, controllers), XMLHttpRequests (XHRs), animations, styles, structure, SEO, performance and integration with external services are ever increasing. This is because combining all the aforementioned concerns we get user experience (UX) as the result and that always needs to be of utmost priority.
AngularJS has emerged as a very powerful framework aimed at making the development process simpler for JavaScript developers which have led to its widespread adoption. However, this has also resulted in several pitfalls such as developers committing some mistakes, few of them listed below:
Not assigning functions and objects to variables
This is not a grave mistake and it has more to do with style aspect rather than avoid AngularJS error messages. If you first define a function and then pass it into Angular internal’s declarations you would be benefited in many ways. Firstly, if your functions and objects are assigned to a variable, you would be able to manipulate and mutate them easily. Secondly, by keeping this practice you are actually enhancing the maintainability of your code as it looks cleaner for it can be split into files.
NG-model does not have a dot
You might have often heard that AngularJS ng-model should have a dot. See below ng-model=”itemToAdd” does not have a dot.
While in the next example, we have a dot in the value of ng-model, for example, ng-model=”data.itemToAdd”.
Although, in simple apps the code may work either way but in complex apps it may not. Hence,
AngularJS Experts recommend you to put a dot in the value of ng-model as a good practice.
Accessing the scope via the DOM rather than the console
In order to boost your production it is recommended that you disable debug info. The setting DebugInfoEnabled defaults to true and permits you to access the scope through DOM nodes. Instead you can do this through the JavaScript console by selecting a DOM element and accessing its scope with:
angular.element(document.body).scope()
But remember not to use it outside the console because if you call .scope()on a DOM node when $compileProvider.debugInfoEnabled is set to false, it will return undefined. If you still want to access the scope during production call angular.reloadWithDebugInfo() from the console and the application will work accordingly.