Down to the basics: AngularJS!
AngularJS has become one of the more robust application frameworks since its development in 2009 and subsequent support by Google in 2010. There’s a very high chance you have used at least one, if not all, of a few of the most notable AngularJS users today: Netflix, Paypal, and Youtube. Although all of us are familiar with web-based applications living in these modern times, the vast majority have little to no clue what precisely a framework is or what is happening behind the scenes. Frameworks are software developed and used by developers to build applications, thus providing developers a base structure to work with when developing dynamic web-based applications.
Known and referred to as a SPA, Single Page Application, AngularJS extends HTML attributes with ng-directives, and binds data to HTML with Expressions. Referred to as a SPA because the application logic and interactions occur on the same page, this single page will also dynamically load new content and data. Data model binding and features such as dependency injections will help you condense the code you will need to write. Having the Karma unit testing capabilities for Angular allows you to build your code into smaller, easier-to-test parts.
Having the MVC design, Model-View-Controller, Angular allows you to follow the pattern of separating the logic layer, data layer, and presentation layer into separate sections. Model represents the data layer, and within this layer can be representative of anything. The syntax for the main model is applied with the ng-app directive as follows:
<body data-ng-app=”AngularJS”>The primary model is linked to the HTML body because the application itself is the main model, thus telling AngularJS anything found within the body element will be part of our application.
Controllers are JavaScript objects, created using JavaScript object constructors. These controllers, for a lack of a better term, control the applications made by AngularJS. Using the ng-controller directive allows you to define the controller. The controller will be invoked with a $scope object, setting the input field of First Name to be “Caleb” and the input field of Last Name to be “Roberts”.
<div data-ng-app=”myApp” data-ng-controller=”theControl”>First Name: <input type=”text” data-ng-model=”firstName”><br>
Last Name: <input type=”text” data-ng-model=”lastName”><br>
<br>
Full Name: {{firstName + “ “ + lastName}}</div><script>
var myApp = angular.module(‘myApp’, []);
app.controller(‘theControl’, function($scope) {
$scope.firstName = “Caleb”;
$scope.lastName = “Roberts”;
});
</script>
Lastly, we have Views, which represent the presentation layer provided to the end-users. The combination of routes and views help bind different views to controllers. The ability to divide the application into different views, using routing to load other parts of the application, allows the user to have access to two views on the same page, rather than two separate web pages, keeping with the spirit of the MVC framework.
AngularJS offers many built-in services, which are functions that are available to you within the AngularJS application. Because of the constant supervision by AngularJS, the use of built-in services allows for changes and events to happen properly, making them preferred by AngularJS over objects that are already in the DOM.
There you have it, a brief and basic overview of AngularJS. There is so much more to learn, and I barely scratched the surface with what I covered today. In my experience, getting your hands dirty and messing around with the code is the best way to learn and understand the many nuances of AngularJS. With time and practice, the complexities of the software will unravel, so go out and code!
