DEV Community: Bethany Jones

Common AngularJS Directives

Bethany Jones — Mon, 13 Jun 2022 00:24:45 +0000

One of the main criticisms of HTML and CSS is that it is static with very little interactivity. Web and app users these days expect to be able to dynamically change elements on a page with a click of a button and seamlessly transition between sections of the site or app. Additionally, many web applications are built as Single-Page-Applications (SPA) and/or use Model-View-Controller (MVC) architecture. All of that can be difficult to achieve with pure HTML, CSS, jQuery, and even JavaScript. Thankfully, there are libraries and frameworks that help address this issue, one in particular being AngularJS (not to be confused with Angular).

MVC & AngularJS

AngularJS uses a MVC approach to build single page apps. If you’re unclear on what MVC actually is, FreeCodeCamp’s sandwich metaphor might help clarify the concept. Essentially MVC architecture splits up your application into the model (data), the controllers (the middle man between the user and the system), and the views (the user interface/frontend that the user sees). While I won’t delve too deep into the benefits of MVC architecture, suffice it to say that AngularJS operates on a similar logic.

AngularJS Directives

The documentation refers to AngularJS as a “structural framework for dynamic web apps”(“What Is AngularJS?” AngularJS.Org). It expands the current HTML syntax through the use of directives that teach the browser new behaviors. It does this by adding new Directive attributes to DOM elements.

AngularJS has both pre-made directives and also allows us to create custom ones as well. While there are some 67+ directives listed on the AngularJS site, we’ll be going over some of the more common ones and breaking down the syntax and how to use them in your own projects.

<!DOCTYPE html> <html lang="en" ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <title>Learning AngularJS Directives</title> </head> <body> <h2>Learning AngularJS Directives</h2> <h5>AngularJS in Action</h5> <p>With just a few extra snippets of code, we can turn a static input form into something dynamic.</p> <input type="text" ng-model="myName" placeholder="enter your name" /> <h5>Hello {{myName}}</h5> <p>Thank you for joining us today on our journey through AngularJS.</p> </body> </html>

Some bootstrap code was removed for brevity and illustration purposes.

The above is a simple illustration of how easily we can incorporate dynamic elements in our applications. With just a few AngularJS directives (and a bit of Bootstrap), we were able to take a standard HTML form input and capture the values as they were typed and render them on the page in real time. Pretty nifty, right? Just wait until you see what else AngularJS can do.

Attribute Directives Syntax

Attribute directives are prefixed with ng- followed by the name of the attribute. These directives are used alongside other HTML attributes. Some common ones you’ll see covered here and elsewhere are ng-app, ng-click, ng-model, among others.

Data Binding Expressions

Similar to how JavaScript uses embedded ${expressions} as placeholders for data and can be used inside of HTML, so, too, does AngularJS. With AngularJS, we simply add an extra pair of curly braces: {{myName}}. Not only are we able to swap in data, we can also evaluate the expressions on the fly like you would in JavaScript. {{5 + 5}} would resolve to 10 and that would be what is displayed for the viewer.

Common Directives

ng-app
In the above example, we initialize the AngularJS app with a ng-app directive in the HTML lang tag, like so: <html lang="en" ng-app>. The ng-app designates the root element of the app allowing us to incorporate further directives throughout the code and using AngularJS as soon as the page is loaded.

ng-model
The ng-model directive is used to bind HTML form elements to a variable in the scope. This directive is only supported by <input>, <select>, and <textarea> elements. So, in the context of our example, we used the directive ng-model with a property name of "myName" to bind the value created by the input field to the {{myName}} expression used later in the code.

<input type="text" ng-model="myName" placeholder="enter your name" />
…
<h5>Hello {{myName}}</h5>

It was this directive that allowed the text to be displayed in the browser in real time as it was typed into the input field.

ng-init
This directive is used as a way to define some initial data, be it an array of names, a primitive value, or an object of key-value pairs. It is useful for demonstrating AngularJS’ capabilities as it allows us to see HTML elements change based on how we manipulate the initial data found in ng-init. However, more often than not, you will be using controllers or modules in the backend to do this instead. For now, let’s see ng-init in use.

<div ng-init="arrayName=['cats', 'dogs']"> <p>It is raining {{arrayName[0]}} and {{arrayName[1]}}.</p> </div>

This code would display on the page as “It is raining cats and dogs.”

ng-repeat
Probably one of the more useful directives, ng-repeat lets you repeat lines of code without actually having to repeat lines of code. No more hard-coding <li> elements! It will render a set of HTML a given number of times, but can only be used on objects or arrays.

<div ng-init="array=[‘Birds’, 2, 100, ‘lions’, ‘pizza’]"> <li ng-repeat="element in array">{{element}}</li> </div>

So, as we can see here, we use the ng-repeat directive in the element we want to see repeated, in this case a list item. We connect the directive to the data by using an arbitrary variable name (element), the keyword in, and most importantly the name of the array or object we want to iterate through (array), giving us ng-repeat="element in array". Then we use that same variable name in an expression ({{element}}) located where we want the data to appear. The directive will loop through the array or object until all elements have been rendered. And like magic, we will have a list of these array elements on the page.

**ng-click**
The last directive we will cover is the ng-click directive. Gone are the days of assigning clunky event listeners to key elements on your app. With the ng-click directive we can place it directly on any element we want to monitor for clicks. For example:

<h1 class="smiley">{{count}}</h1> <button ng-click="count = count + '😄'" ng-init="count='😄'">Smile</button>

We used ng-init directive to set the initial value of count to 😄. Everytime there is a click on the button, the ng-click directive is evaluating the expression count = count + '😄' which is simply adding a 😄 to the variable count and reassigning the result to count. That then updates the {{count}} expression in the <h1> tag showing us the parade of emojis marching across the screen upon each button click.

There are dozens of other useful and powerful AngularJS directives for you to explore in more depth. To that end, here are some handy cheatsheets and guides to help you deepen your understanding of this framework. Happy coding out there.

Understanding JavaScript Data Types (Through the Lens of D&D & Other TTRPGs)

Bethany Jones — Sun, 17 Apr 2022 22:35:57 +0000

Humans love to make sense of our world and ourselves through categorization; whether it's understanding biological life through taxonomy, ourselves through identity labels, or even our fictional RPG characters through their "classes," we want to break things down into their smallest components and group them based on certain characteristics and similarities. Computer programming, and JavaScript in particular, is no different.

What Are Data Types & Why We Need Them
Just as the Dungeon & Dragons RPG system has a set of rules that governs how the different character classes behave, programming languages have a type system that classifies how the built-in data structures should behave depending on their "type."

As Aaron Krauss describes it in his blog "Programming Concepts: Static Vs. Dynamic Type Checking":

A type system is a collection of rules that assign a property called type to various constructs in a computer program, such as variables, expressions, functions or modules, with the end goal of reducing the number of bugs by verifying that data is represented properly throughout a program.

In other words, data types refers to the 'type' of value we're working with. It's a way to categorize the information/data that we use so that we interact with our code appropriately.

Every value is associated with a certain data type that falls into one of these *main categories:

Number
String
Boolean
Array
Object
Function
undefined
null
NaN

let partyMembers = 9; // Number
let partyName = 'The Fellowship'; // String
let allSurvive = false; // Boolean

// Array
let partyMemberAges = [87, 38, 2000, 50, 2000, 28, 36, 139, 40]; 

// Object
let partyClasses = {
Aragorn: 'Fighter',
Sam: 'Paladin',
Gandalf: 'Wizard',
Frodo: 'NPC',
Legolas: 'Fighter',
Pippin: 'Rogue',
Merry: 'Bard',
Gimli: 'Fighter',
Boromir: 'Fighter'
}

//Function
function averagePartyAge(array){
let totalAge = 0;
for(var i = 0; i < array.length; i++){
totalAge += array[i];
}
return totalAge / array.length;
}

let bestMember; // undefined
let worstMember = null; // null
let middleEarth = partyName * allSurvive; // NaN

These data types have various properties and methods associated with them that allow the JavaScript interpreter to correctly handle this data. For example, the interpreter treats numbers differently from strings, so while 2 + 2 and '2' + '2' look very similar, they are actually different data types: Numbers and Strings, respectively. Without understanding their type, the interpreter would not be able to execute this code correctly. So, now that you know why we need these data types, let's talk about each of the data types in turn.

Number
The Number data type represents all numeric values (both positive and negative). Categorizing these numeric values as Numbers allows us to use the static properties and methods attached to that data type. We are also able to perform calculations on Number data types by using arithmetic operations.

let currentXP = 6; // resolves to the number 6
let previousXP = 1000; // resolves to 1000
let totalXP = currentXP + previousXP; // resolves to 1006

currentXP and previousXP are Number data types because they have a numeric value and are not written as strings, which means we are able to add these values together.

String
The String data type is a collection of characters between either single or double quotes. Strings allow us to represent data in text form.

let moreExperience = 'Your character gets 500 more xp!'; 
let xpUpdate = '500'; // resolves to a string of '500'

The variables moreExperience and xpUpdate are strings, despite also having numbers in them. If you were to try and add xpUpdate + currentXP, the JavaScript interpreter would type coerce currentXP as string rather than adding the values together to create a sum. So, instead of outputting 506 as you might expect, it would concatenate these values as a string and return 5006.

Arithmetic operations cannot be used on this variable unless it is first converted to the number data type.

Boolean
Booleans hold only one of two values: true or false. Booleans are most useful when storing values with clear binaries, such as yes/no or on/off. When only one of two values are possible, Booleans are usually used.

let haveSpellSlots = true;
let spellsCount = 0;
if(spellsCount <= 0){ 
haveSpellSlots = false; // change to a Boolean of false
}
console.log(haveSpellSlots); // prints => false

The variable haveSpellSlots is assigned to the Boolean true, denoting that yes, we have spell slots available to use. If the value of spellsCount is less than or equal to 0, however, the haveSpellSlots is reassigned to a Boolean of false.

Array
The array data type categorizes objects that can store a collection of items in an indexed list. These data types can be expanded, and thus are also considered complex data types. Arrays are denoted by the use of [brackets] when assigned a variable.

let characterTraits = ['1', 5, [], true, 'Adora', 'Druid']; 
console.log(typeof(characterTraits)); // prints => 'object'
console.log(Array.isArray(characterTraits)); // prints => true

The variable characterTraits is assigned to an array containing 6 elements.

Object
The object data type is used for storing a collection of keyed data and other data types (like functions). Essentially objects are variables that can store a multitude of values. Like arrays, objects are also considered a complex data type.

const dndCharacter = {
    class: 'Druid',
    level: 1,
    cantrips: ['Guidance', 'Mending', 'Shillelagh'],
    lvlSpells: ['Cure Wounds', 'Healing Word'],
    haveSpells: false,
}

The above dndCharacter object has keys of class, level, cantrips, lvlSpells, and haveSpells, each of these containing different types of values.

Function
The function data types denote a block of statements that perform some task or calculation. Functions are a complex data type.

function whoIsDM(name){
console.log(`${name} is the Dungeon Master`);
}

whoIsDM('Chris'); // calls the function

'Chris is the Dungeon Master' // logged to the console

undefined
The undefined data type represents undefined values or values that have not been initialized.

let nextCampaign; 
console.log(nextCampaign); // prints => undefined

The nextCampaign variable is declared, but has not been assigned to any value, thus when it is later called, it returns undefined.

null
The null data type represents none or the absence of value. These occur when the programmer intentionally initializes a piece of data to null.

let empty = null; // assigned a variable to null
console.log(empty); // prints => null

NaN
NaN is a special number type that stands for Not-A-Number. NaN happens when an arithmetic operation is applied to a invalid or undefined value.

console.log('Do not split the party!' / 9); // prints => NaN

Primitive vs. Complex Data Types
In addition to the above categories, cata can can also be classified as either primitive/simple or complex data types. We can use the typeof operator to help us determine what type a piece of data is.

Primitive/Simple data types include: Numbers, Strings, Booleans, NaNs, undefined, and null. These data types are considered simple because they are atomic and immutable, which means they do not aggregate other values (like arrays and objects).

Also, simple data types are copy by value meaning that any code that acts on these data types would simply be working with a copy of the original, rather than modifying the original value itself.

So, manipulating a primitive data type would result in an entirely new simple value. Variables can hold the actual values of primitive types, but this necessitates that simple data types be a fixed size.

Complex data types include: Objects, Arrays, and Functions. Unlike simple data types, complex data types can collect and add to the values contained within. These data types are store as a reference, meaning that we can act directly upon the original, thus changing it. Because complex data types can be added to and manipulated, they have an indefinite size.

let characterName = 'Adora'; 
let druidName = 'Adora';

The variable characterName is a simple data type with a string. The value 'Adora' cannot be mutated or altered directly. druidName is an entirely new variable with a new value with no relationship to the above variable. Because strings are immutable, you cannot use methods to alter the original. You can see this demonstrated below.

druidName.toUpperCase(); // nothing happens
console.log(druidName); // prints => 'Adora'
druidName = 'Adora Mossweather'; // reassigned
console.log(druidName); // prints => 'Adora Mossweather'

Nothing happens to druidName as it cannot be directly altered with these methods. However, variables can be reassigned, as shown by the variable druidName which has taken on a new value.

Unlike Strings, Numbers, and Booleans, Objects can be mutated by using an object method on the original. For example:

const dndCharacter = {
    class: 'Druid',
    level: 1,
    cantrips: ['Guidance', 'Mending', 'Shillelagh'],
    lvlSpells: ['Cure Wounds', 'Healing Word'],
    haveSpells: false,
}

dndCharacter.name = druidName; // adds druidName property 
console.log(dndCharacter); // prints => updated object

Because dndCharacter is an object, we are able to include a new property called name with the druidName as its value.

Copy by Value vs Copy by Reference
All primitive data values are copied by value, while all complex data types are copied by reference. What that means is a variable can reference another variable, but the value stored is merely a replica of the original, as demonstrated below.

characterName = druidName; // points to a copy of druidName
console.log(characterName); // prints => 'Adora Mossweather'

characterName = 'Adoria Mossy'; // reassigns to a new value

console.log(druidName); // prints => 'Adora Mossweather'
this variable was not affected by the above variable's reassignment

console.log(characterName); // prints => 'Adoria Mossy'

The druidName variable was not affected by the characterName variable's reassignment.

Complex data types, however, are copied by reference which means that the original object, array, or function can be modified directly.

dndCharacter.lvlSpells.push('Barkskin', 'Flaming Sphere', 'Moonbeam'); 
// adds 3 more elements to the spells array located in the dndCharacter object


console.log(dndCharacter); // prints => object with the values

{
  class: 'Druid',
  level: 1,
  cantrips: [ 'Guidance', 'Mending', 'Shillelagh' ],
  lvlSpells: [
    'Cure Wounds',
    'Healing Word',
    'Barkskin',
    'Flaming Sphere',
    'Moonbeam'
  ],
  haveSpells: false,
  name: 'Adora Mossweather'
}

let dndParty = dndCharacter;
console.log(dndParty); // prints => same object as dndCharacter

dndParty.companions = ['Percy', 'Roark', 'Vox']; 
console.log(dndCharacter.companions); // prints => array

dndParty = {};
console.log(dndParty); // prints => {}

The variable dndParty points directly to the same object as the variable dndCharacter. Because of copy by reference, when we add a new key property to dndParty, dndCharacter is updated as well. It is only when we reassign dndParty to a new empty object that it is no longer referencing the object stored at dndCharacter.

And, that, in a nutshell is what JavaScript data types are and how you can identify them in your own code.

*BigInt and Symbols are also a data type, but we will not be touching on those in this article.