As I dip my toe in JavaScript frameworks in my learning journey, I come across AngularJS. I had a very brief and unsuccessful run-in with AngularJS and with that failure, I decided to look into what AngularJS was to demystify it and get more comfortable with it. Since my journey of learning Javascript includes learning the many tools of the language, mainly jQuery, I will also be comparing the 2.
Before I get too deep in the weeds of this post, I'd like to insert distinctions between libraries and frameworks. Libraries provide functions that can be used when the developer feels the need to. Frameworks are implementations that have your code used for the details of said implementation. As part of learning the tools of JavaScript, I have come to learn the difference between libraries (jQuery) and frameworks (AngularJS).
AngularJS is a framework that is used to create dynamic web applications. It allows the developer to use an HTML template and "extend its syntax" to display the components of the app. More specifically, AngularJS allows the developer to create cleaner and reusable code for CRUD apps with features such as data binding, modules, and giving DOM elements specific behavior through the templates.
By adding AngularJS to your application, you will first have to create a module, which is essentially a container for your controllers and directives. You can have multiple angular modules in your application tailored to handle specific features or hold certain directives. When you load up your app, the modules inserted will pause the execution of the application to "resolve" dependencies. To create your module, you will call on the module with the module method, pass in a string of the name of your method, and an array that would point to any modules that the module you are creating depends on.
angular.module('myApp', []);
As I mentioned before, modules can contain controllers which can be defined as "a JavaScript constructor function that is used to augment the AngularJS Scope". The controller will define a new scope just like JavaScript functions normally do and with that scope, you can add behavior. This scope's syntax is $scope and is an object, a tangible function "scope" that you can add to. To create a controller, you call the controller method on the module created, pass in the string of the name of the controller, and an array of the initial state of the $scope object.
MyApp.controller('theController, [$scope, function(){}]
To add behavior to DOM elements, you have to add what is called directives to the DOM element that you want to adopt the behavior specified. These directives are inserted similarly to an HTML attribute and have a "ng" prefix.
<div ng-bind="context">
AngularJS comes with some built-in directives but you also can create your own. To create your own directive, you'll first have to have a module to attach it to. Applications can have many modules that handle various features. The general syntax of creating a directive is to give the directive a name and a callback function that describes the behavior.
angular.module('moduleName', [])
.directive('directiveName', function() {
// insert behavior
});
The AngularJS documentation describes data binding as the "automatic synchronization of data between the model and view components," meaning when one component changes, these changes are updated across the board. The use of double curly braces {{}} is indicative of data binding in AngularJS that displays content from the model to the view. This can be used in place of the ng-bind directive.
Data binding and directive take away from the initialization process of JavaScript which makes for cleaner more succinct code. Instead of creating variables that point to various locations of the DOM and initializing dynamic functions that can be used in multiple locations of the web app, you can create the directive that contains the reusable function and insert the directive in the DOM element. Think of when only using JS and jQuery to create a dynamic web app, creating variables that point to DOM elements and writing functions that have sprinkled in jQuery. This can become redundant if you have components with similar needs.
One of the (personal) drawbacks of AngularJS is what comes with learning new frameworks and that is adjusting to the syntax/implementation of the framework. Personally, there is a learning curve with conforming to AngularJS. Another would be that AngularJS is not suitable for every web application. Since AngularJS simplifies the creation of CRUD applications, this means that if your application does not include CRUD programming such as games or business-based applications, AngularJS would not be needed. Also with the increase of abstraction, that means that your code becomes less flexible. As mentioned before, data binding synchronizes the model and view so when one changes, so does the other. This can become worrisome for beginner developers as a separation of concerns is removed.
AngularJS and jQuery share DOM manipulation to an extent so it may be difficult to discern when to use the 2. Since one is a framework and the other is a library, one might opt to use both but their closeness in front-end usage makes it difficult as well as unnecessary to use both. In a post by SynapseIndia, AngularJS would be the better option for large applications with a simple layout but complex structure whereas jQuery can be used for more overall simpler and smaller applications
Top comments (1)
💪