About the Author:

Insert, Remove, Splice and Replace elements with Array.splice()

July 4th, 2018

When you already have an existing array and need to make some edits, the Array.splice() method comes in handy. The splice() method allows you to INSERT, REMOVE, and REPLACE elements from a javascript array.

Before jumping into any examples, let’s start by taking a look at the arguments passed into the splice() method.
Array.splice(start_index, number_of_elements_to_remove);

  • start_index refers to the position in the array where the Insertion or Removal of elements will begin.
  • number_of_elements_to_remove will begin at the start index, and remove an element from array
  • all arguments following number_of_elements_to_remove will get inserted in to the array from the start_index. these arguments inserted into the array can be of any data type including strings, numbers, booleans, objects, functions, null, undefined, etc…

For a more in depth look at the Array.prototype.splice() javascript method parameters check out https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

Let’s start with a simple example demonstrating how to INSERT a number into an array with the Array.splice() method.
Imagine we have the following array [1,3,4] and we want to insert a 2 between the 1 and 3 in this javascript array.
The following code example will INSERT the number 2 between the 1 and 3.


        var my_array = [1,3,4];
        var start_index = 1;
        var number_of_elements_to_remove = 0;
        my_array.splice(start_index, number_of_elements_to_remove, 2);
        console.log(my_array);
        //[1,2,3,4];
    

Take note when using the array.splice() method, the splice() method acts directly on the array. So instead of returning a new array, calling the splice() method on my_array, will update my_array.

Next, let’s take a look at an example of REMOVING an element from an array in javascript.


        var my_array = ["a","b","c","k","d"];
        var start_index = 3
        var number_of_elements_to_remove = 1;
        var removed_elements = my_array.splice(start_index, number_of_elements_to_remove);
        console.log(removed_elements);
        //["k"]
        console.log(my_array);
        //["a","b","c","d"];
    

Take note when using the array.splice() method to remove elements, an array of the removed elements will get returned

Lastly, let’s take a look at REPLACING some elements in a javascript array with the splice() method


        var my_array = ["baseball", "basketball", "tennis", "golf"];
        var start_index = 1
        var number_of_elements_to_remove = 2;
        var removed_elements = my_array.splice(start_index, number_of_elements_to_remove, "boxing", "bowling", "volleyball");
        console.log(removed_elements);
        //["tennis", "golf"]
        console.log(my_array);
        //["baseball", "boxing", "bowling", "volleyball", "golf"];
    

The above example replaces the sports “basketball” and “tennis” with “boxing”, “bowling”, and “volleyball”. The above example may seem a little confusing because of all of the operations that took place. So, let’s break down the operations step by step. First, we tell the splice method to start at my_array[1]. Then, number_of_elements_to_remove is set to 2, so remove my_array[1] and my_array[2]. Lastly, from the start_index my_array[1] insert each of the arguments into my_array one by one.

For more examples of using the splice() method, check out https://www.tutorialspoint.com/javascript/array_splice.htm or https://www.hacksparrow.com/javascript-array-splice-syntax-and-examples.html

The splice() method works well when looking to INSERT or REMOVE values from a javascript array. If your array is already sorted, the splice() method works well to explicitly position new values exactly where you want in the array. The splice() method also works well when looking to remove values from an array by index. Something to pay close attention to is that the splice() method acts directly on the array. Only the values that were removed, deleted, or stripped from the array will get returned.

About the Author:

Ng-if Examples, Use Cases, and Caveats

May 12th, 2016

Ng-if is a built-in Angular directive for adding and removing content from the DOM. Ng-if is extremely handy for showing and hiding buttons, links, text, images, or other types of content on a page. We covered the differences between ng-show, ng-hide, and ng-if here, so this post will focus specifically on ng-if syntax, examples, and use cases.

Explore Angular Courses

Why Use Ng-If at all?

Why should we add/remove content from the DOM vs. just hiding/showing it? Why use ng-if at all? It comes down to the way Angular watches for changes in an app. Angular uses a digest loop to watch for changes in an app to make changes in the view or model (two-way data binding). Watches are expensive from a performance standpoint. By removing an element from the DOM, you remove all the watchers on those elements. Having few watches in an app generally allows it to run faster.

Syntax

Ng-if, like most built-in directives relies upon evaluating an expression as true or false. In the case of ng-if, if the expression evaluates false, it removes the element from the DOM entirely (as in, the node is gone). If it’s true, the element gets recreated.

Put more simply, ng-if allows you to display or remove elements based on scope (or model) values. Even more simply: If a value is false in your model, ng-if will remove the appropriate element from the DOM (and vice versa).

Let’s see some examples:

Example #1 – Simple Hide and Show

In the example below, the model is determined by the scope boolean value showDiv. A simple ng-click on the checkbox, toggles whether showDiv is true or false.

If you hop into the developer tools, you’ll that the div is removed entirely when it is toggled off:

Before:

 

 

 

After

Pretty dang straightforward.

See the Pen Basic ng-if examples by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Example #2 – Using ng-if with ng-repeat

Here’s a fun example of ng-if being using within ng-repeat. This was made by developer Nick Moreton. This example completes the requirements for FizzBuzz, which is an old programming interview test. The test is to:

Explore Angular Courses

“Write a program that prints the numbers from 1 to 100. But for multiples of three print “Fizz” instead of the number and for the multiples of five print “Buzz”. For numbers which are multiples of both three and five print “FizzBuzz”.”

Nick shows how this can be done with a simple for loop, ng-repeat and ng-if. The page contains spans for displaying either the number, or ‘Fizz’, ‘Buzz’, or ‘FizzBuzz’. The ng-if expressions on the spans evaluate whether that element of the array is a multiple of three or five and adds or removes the element from the DOM.

See the Pen Angular FizzBuzz ng-repeat by Nick Moreton (@nickmoreton) on CodePen.


If we look again at the html in the developer tools, we can see that the DOM elements aren’t there, only html comments in there place.

 

Example #3 – ng-if with multiple conditions

You might hit a situation where you need to evaluate multiple expressions to add/remove content (effectively hiding/showing).

The JavaScript OR and AND operators (|| and &&) can be used within ng-if expressions. This allows you to test multiple values within ng-if (just like you can in code). This works much in the same way as ng-switch, but with arguably a bit simpler syntax.

The example below evaluates two properties on the model to add/remove the tag. If the person is picky, it shows their more detailed coffee preference.

See the Pen ng-if || quick example by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

Caveat #1: Event Handlers and ng-if

Ng-if will completely removes the element from the DOM/page (vs. simply hiding its visibility). That means that any event handlers attached to those elements will be destroyed when they are removed. When the element is put back into place using ng-if, the event handlers will need to be attached again. However, if you use ng-click to take care of events, Angular will take care of the events for you.

Caveat #2: Child Scope and ng-if

Ng-if creates a new child scope when it adds and removes DOM nodes. The new child scope is going to inherit from the parent scope. So if something doesn’t exist in the child scope, it will then go up the inheritance chain to see if the parent has it. In many cases, you won’t notice the new scope being created. But your code/state could get confusing if you’re not aware that ng-if has create a new scope.

Explore Angular Courses

If you’re curious, Misko Hevery explains here why directives like ng-if and ng-switch create their own child scope.

Summary

Ng-if is a useful directive for adding and removing (therefore hiding/showing) content on a page. It allows for many apps to run faster but it’s not without a few caveats and potential pitfalls

About the Author:

angular.bootstrap Explained in 3 Examples

May 3rd, 2016

By default, an Angular application is initialized automatically by loading the angular.js script and placing the ng-app directive to the root element of your application (e.g. <html> tag), like the following:

<!doctype html>
<html ng-app>
<body>
  ...
  <script src="angular.js"></script>
</body>
</html>

Alternatively, you can also initialize your application manually if you need, using the angular.bootstrap() function. This is especially useful when you want your application to initialize only after a certain period or bound to another event taking place. See this page for further details about the initialization methods in Angular.

How to Use angular.bootstrap

angular.bootstrap is a function component in the core ng module that is used for starting up the Angular application manually, which gives you more control over how you initialize your application. The syntax for angular.bootstrap is as follows:

angular.bootstrap(element, [modules], [config]);

element is a DOM element (e.g. document) that is the root of the Angular application, modules (optional) is an array of modules to be loaded and config (optional) is an object used for configuration options. You can check this page on the official developer guide to read more about angular.bootstrap syntax.

Example 1: Manually Bootstrap Your Angular Application

In the following example, we manually bootstrap our application which displays a welcome message once the user logs in.

<!doctype html>
<html>
<body>
  <div ng-controller="LoginMessage">{{message}}</div>
  <script src="angular.js"></script>
  <script>
  angular.module('example', [])
  .controller('LoginMessage', function($scope) {
    $scope.message = 'Welcome to Members Area!';
  });
  angular.bootstrap(document, ['example']);
  </script>
</body>
</html>

Note how we selected document as the root of the application and how we passed the example module to the angular.bootstrap() function.

Example 2: Bootstrap by Selecting a Specific Element

In the following example, we will display the current year in our application and bootstrap it by selecting a specific element as the application root.

<!doctype html>
<html>
<body>
  <div id="year" ng-controller="Year">{{CurrentYear}}</div>
  <script src="angular.js"></script>
  <script>
  angular.module('example', [])
  .controller('Year', function($scope) {
    $scope.CurrentYear = new Date().getFullYear();
  });
  angular.bootstrap(document.getElementById('year'), ['example']);
  </script>
</body>
</html>

We selected the div element with the id #year as the root of our application.

Example 3: Bootstrap Multiple Applications

Using the angular.bootstrap function, you can bootstrap multiple angular applications on a single page. Let’s say we have two applications (app1 and app2) defined by two div elements:

<div id="app1">...</div>
<div id="app2">...</div>

We use the following code to start up these two applications:

angular.module('app1', []);
angular.module('app2', []);

angular.bootstrap(document.getElementById('app1'), ['app1']);
angular.bootstrap(document.getElementById('app2'), ['app2']);

Before ending this tutorial, we will list a number of things you should pay attention while manually starting your applications using angular.bootstrap.

  • If you use angular.bootstrap to start your application, you shouldn’t use the ng-app directive.
  • You need to create the custom modules before passing them as a parameter to angular.bootstrap().
  • When using multiple bootstraps on the same page, use them cautiously.

About the Author:

ng-class Uses Cases, Examples, and Recommendations

March 25th, 2016

ngClass is a very powerful built-in Angular directive for dynamically changing CSS classes on HTML elements. It does this by allowing us to bind scope values as class names. We can then use the state of our application (what variables are currently assigned to) to assign classes to divs, h2s, you name it.

Summed up, this directive can be used in variety of ways to change styles and hide/show content.
ngClass has a wide variety of syntaxes that take many types of expressions.  With these, you can bend ng-class to style just about anything in Angular. We’ll cover the definitions of each and explain the examples in action.

A quick note on separation of concerns

Developers who use Angular have different opinions on whether you should mix CSS classes into your JavaScript controllers. For some, this violates the principles of separation of concerns (that styling and functionality should be separate) but others are ok with it.  Some of these examples will mix CSS and JS but it’s worth knowing that not everyone does this. With some of syntaxes of ngClass, it’s almost unavoidable.

Syntax #1 – String Syntax

Definition:
The string syntax is very simple to use.  Simply put a string into the ng-class expression and that string will be used as the CSS class.
Example:

See the Pen Apply classes in angularJS using string syntax by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.


This example is pretty straightforward, the scope variable of btnClass is initiated as ‘danger’.  The ng-model of the input field is bound to the that same $scope.btnClass variable.  When a different string is put into it, the expression evaluates and checks changes the background-color if that CSS class exists.

Syntax #2 – Array Syntax

Definition: The array syntax is very similar to the array syntax except it allows for adding more than one class.  The array gets put right into the quotes in the ng-class expression.  This is helpful if you need to apply multiple classes.  You’ve probably seen a <div> with multiple classes like ‘dialog-settings template modal’.  The array syntax can be useful for this.
Example:
See the Pen AngularJS – ngClass Example by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.


Here’s a very simple example of the array syntax. By adding classes into the input boxes, you can add classes to the array thereby changing that actual CSS class on the <p> element.

Syntax #3 – Map Syntax

Definition:
Ok, here’s where it gets a lot more interesting.  The map syntax will change a CSS class according to how values get evaluated in an object.  The CSS class changes according to whether the values evaluate to a value or often to truthy/falsey.  So what the heck does this actually look like in action?
Examples:
Imagine you have this in your controller:

$scope.firstcssclass = false
$scope.secondcssclass = true
$scope.thirdcssclass = true

Then you have this in your template:

<div ng-class="{large: firstcssclass, red: secondcssclass, clear: thirdcssclass}"></div>

This would evaluate to:

<div class="red clear"></div>

So that’s a pretty basic example.  Here’s a more interesting example from a codepen by Jason McGovern.
See the Pen AngularJS ng-class conditional by Develop Intelligence (@DevelopIntelligenceBoulder) on CodePen.

How does this particular ng-class example work?  Let’s walk through these expressions.

ng-class="{clearance: item.clearance, new: item.salesStatus === 'new'}"

So, if you notice in the CSS, both clearance and new are CSS styles.  Item.clearance and item.salesStatus are properties on the item in the ng-repeat.  In this case, they are properties in the objects in the array $scope.products in the controller.
Here’s how these will evaluate: the items will get a class of clearance if the property of clearance is true (aka truthy).  The items will get a class of new if the property of salesStatus equals (===) true.

Syntax #4 – Ternary Syntax

The conditional ternary syntax exists in most major programming languages. In JavaScript, the syntax looks like this: condition ? expr1 : expr2.  Think of the ternary operator as a shortened way of say if (true) { do this } else {do this }.  It quickly returns a value on whether something is true or false.
The ternary syntax in Angular (released in 1.1.5, eons ago!) does a similar thing.  It is a syntax for assigning one class if an expression is truthy, and another class if the expression evaluates falsey.

ng-class="valuethatisTrueorFalse ? 'css_class_iftrue' : ‘css_class_iffalse’”>

(Mind the use of double and single quotes).
A quick example of this is this nifty bit of code from StackOverflow user Ikrom:

<span> {{userType=='admin' ? 'Edit' : 'Show'}} </span>

Here’s what this code is doing.  If the usertype of admin is true, it evaluates to the class of Edit (likely exposing something an admin would need to see).  If the admin property is set to false, the class becomes Show.  The ternary operator is helpful for examples like this where CSS classes need to be toggled.
Here’s another toggling jsfiddle example from Alex Paluzzi:

As you can see, ng-class has a lot of power in both its syntaxes and the expressions you can use in them.  It’s definitely one of the most powerful tools to have in your Angular toolkit.

About the Author:

Working With Promises in AngularJS Services

February 5th, 2016

Let’s talk about working with promises in AngularJS. To start, $q is a great implementation of promises, allowing you work with deferred objects and be more efficient with Ajax calls.

$q api has few useful methods, first one is to create new deferred object using $q.defer(), so this object could be resolve in the future using $.q.defer().resolve and also to be reject using $.defer().reject methods.

Explore Angular Courses

When executing Ajax calls from AngularJS services, usually we use $http which return by default a promise object which we can attach “then” method to for result notification.

But when the service should fetch data from the backend and allow more than one AngularJS controllers to use, it doesn’t make the make the most sense to fetch everything from the server every time. Then, we should save the data in local variable inside the service.

So when the AngularJS controller calls the service api to get the data, it could be a promise from the Ajax call or the data stored from previous call. The AngularJS controller should be able to differentiate between the cases, so thats not an ideal practice.

The way of doing it is to wrap the data stored in AngularJS service with another $q api called $q.when which can treated as a promise for both cases, so when the $q.when receive a promise it will be resolved when the promise will and if it receive a real data it will be resolved immediately.

That is transparent to the controller and this is a good practice.

Here’s a full code snippet below based on the above overview.

(function() {
  'use strict';

  angular
    .module('testApp')
    .service('testService', testService)
    .controller('testCtrl', testCtrl)
    .controller('testCtrl2', testCtrl2);

  function testService($http, $q) {

    // will hold backend posts
    var posts = undefined;

    // fetch all posts in deferred technique
    this.getPosts = function() {

      // if posts object is not defined then start the new process for fetch it
      if (!posts) {

        // create deferred object using $q
        var deferred = $q.defer();

        // get posts form backend
        $http.get('https://jsonplaceholder.typicode.com/posts')
          .then(function(result) {
            // save fetched posts to the local variable
            posts = result.data;
            // resolve the deferred
            deferred.resolve(posts);
          }, function(error) {
            posts = error;
            deferred.reject(error);
          });

        // set the posts object to be a promise until result comeback
        posts = deferred.promise;
      }

      // in any way wrap the posts object with $q.when which means:
      // local posts object could be:
      // a promise
      // a real posts data
      // both cases will be handled as promise because $q.when on real data will resolve it immediately
      return $q.when(posts);
    };

  }

  function testCtrl($scope, testService) {
    $scope.getPosts = function() {
      testService.getPosts()
        .then(function(posts) {

          console.log(posts);

        });
    };

    $scope.getPosts();
  }

  function testCtrl2($scope, testService) {
    $scope.getPosts = function() {
      testService.getPosts()
        .then(function(posts) {

          console.log(posts);

        });
    };

    $scope.getPosts();
  }

})();

Explore Angular Courses

About the Author:

The Difference Between Ng-show vs. Ng-if

September 4th, 2015

There are a variety of built-in Angular directives for showing and hiding content on a page. Ng-show/ng-hide and ng-if are commonly used directives for doing this. Ng-switch and ng-class could also be used to do this (albeit in different ways). This post will explain how ng-show and ng-if differ in their means of hiding content on a page.

https://embed.plnkr.co/eWQTdAsApBdFmvtD2ZEv/

There are two buttons in this html but only one is showing at a time. Each button has an ng-show directive on it. One button will show if the variable $scope.mute = true and the other if $scope.mute = false. This is because ng-show takes an expression as an attribute. If the expression is truthy, it shows that element on the page (and vice versa). Clicking the button there calls a function muteToggle (using ng-click) which toggles $scope.mute to true or false.

This same example could have been written with ng-hide, but with the true/false expressions reversed.

If you look at the HTML in the chrome developer tools, both buttons are there:

ng-if ng-show

You’ll notice the hidden one is set to display:none;

Screen Shot 2016-06-08 at 11.02.41 AM

Watch what happens to this same HTML if you use ng-if (which appeared in Angular 1.2) instead of ng-show.

[iframe src=”https://embed.plnkr.co/EfLFDVCgAEu8Ea66smIU” width=”100%” height=”450″]

Here’s the specific part of interest in the dev tools pane:

Screen Shot 2016-06-08 at 11.00.40 AM

Only one button shows up in the HTML now. Just like the directive sounds, that particular element (in this case, a button) will only show up if the expression is true.

Ng-show/hide can show or hide an element on a page.  They will still be in the DOM either way. Ng-if determines whether the element is actually added or removed from the DOM.

The potential problem with using ng-show/hide comes from Angular $digest loop. Ng-show can hide something from a user but not from the Angular $digest loop and watches. This can slow down performance if enough things are being watched on a page. By using ng-if, the DOM element will be removed and any watchers or event handlers with it.  The major caveat to ng-if is that it brings in its own child scope into the app. Keeping track of scopes can be confusing at times, so be warned about that part of ng-if.

There might be cases when you need to still work with things (like event handlers) that are attached to hidden elements. This would be a use case for ng-show/hide.

But the general rule of thumb here is don’t load/keep anything into the DOM that you don’t need. You should generally use ng-if unless you explicitly need ng-show/hide.

 

About the Author:

Front-End Development Explained for Non-Developers (part 1)

September 2nd, 2015

Front-end development is defined, by Wikipedia, as the “practice of producing HTML, CSS and JavaScript for a website or web application so that a user can see and interact with them directly.” Most people can make sense of basic HTML, CSS, and JavaScript (and that used to be enough). But in the last 5-10 years, front-end development has evolved and splintered into a miscellany of frameworks, libraries, build-tools, command line tools, and new languages.

This plethora of technologies makes it challenging for developers and next to impossible for lay people to follow this field. This post will attempt to explain the landscape of front-end development technologies (as of mid-2015) for a non-developer audience.

Part 1 will cover Libraries and Frameworks. Part 2 will cover build tools, command line tools, and new languages. Part 3 will provide 3 pieces of recommended reading.

Libraries

There’s an organization in Denver, Colorado called the Denver Tool Library. For a subscription fee, they let members borrow some of their 2000 different tools. People can come in to chisel wood, test circuits, or maybe take a tool out to use in their garden. The library offers specific tools with specific functionality that can be used as many times as members need.

Programming libraries work very much in the same way as a physical tool library. Libraries like jQuery, Handlebars, Underscore or Backbone give developers specific functions, methods, and objects they can use to achieve a particular task in their code. With one command or <script> tag, developers can bring a library in and have immediate access to its tools.

The library that has had the largest impact on web development in the last 10 years is jQuery. Among other things, jQuery simplifies creating JavaScript across browsers.

Handlebars is a “semantic web template system”. Template systems make it easy for developers to put dynamic content into a static page a user sees. {{ Curly Brackets }} (aka sideways mustaches) are put into the HTML for dynamic content. Handlebars swaps out values between the curly brackets with content from the program. An example of this in action:

This HTML table…

<tbody>

{{#users}}

<tr>

<td>{{fullName person}}</td>

<td>{{jobTitle}}</td>

<td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>

</tr>

{{/users}}

</tbody>

…will become this table with the help of Handlebars. The brackets get filled in with dynamic content:

Underscore takes a different spin on the tool library metaphor. Underscore used to call itself ‘a utility-belt library’ for JavaScript. Underscore gives developers shorter, faster ways of doing common tasks like looping over an array or object (which are collections of data in JavaScript). Normal JavaScript provides a way of doing this but a library like Underscore (or Lodash) provides a shorter/simpler way of doing so.

Backbone is a library that makes it easier to better organize applications. Backbone is usually used with Underscore and jQuery, and sometimes with Handlebars to form a complete application framework. An application framework usually handles a lot of the common tasks in web development like handling HTTP requests, routing, organizing business logic, and views the clients will interact with. We’ll go over frameworks in the next section in more detail.

React is the hot library of 2015. React came out of Facebook’s struggle to get the Like Button count to work well. When people would push it, it was hard to get the like count right. React offers a new (and faster way) to create data-driven interactive user interfaces. It is actually used in production for hundreds of millions of users (Instagram/Facebook) so even though it’s new, it has been thoroughly ‘battle tested’.

Photo, Phone, Android, Instagram, User, Smartphone

React in action

The Frameworks

A framework is typically something that provides a structure or way of organizing something. A web application framework, like Ember or Angular, saves developers from having to set up common web development structures/tasks on their own.

Think of a framework like a prefab home. Prefab homes come with the most of the ground plan laid out. The electrical wiring, framing, drywall, and plumbing are generally installed and ready to go. The homeowner then customizes the home’s interior suit their tastes (colors, textures, floors, appliances). The homeowner still could tear down the walls and rework the structure but generally they will go with the defaults.

This metaphor has its limitations but think of a web framework as providing a starting structure and set of defaults within which the developer can make an application.

Angular has become, by far, the most popular JavaScript framework in use (as of 2015). Angular handles tasks like connecting to a database, allowing the user to interact with information on the page, and handling the URL routing (in the address bar). Angular makes it simple to create what are called Single Page Applications (SPAs). If you’ve used Google Maps or Gmail, you’re used to a using a page that updates without refreshing the entire page. It does this by using a technology called Ajax.

Ember is another JavaScript framework that gives developers a scaffolding and structure to develop applications. Ember has a number of ‘opinions’ (conventions) that are meant to increase developer productivity. In theory, this should make it easier for developers to join an Ember project than an Angular project. The tradeoff of this is that some feel restricted by it’s enforced structure.

Bootstrap and Foundation are front-end frameworks that focus on the look and feel of a site. Both can be utilized to easily develop good looking sites that work well across different screen sizes. Each gives you pre-defined CSS and HTML components. A Bootstrap component would be a something like this piece of HTML:

<ul class="nav nav-pills"> 
<li role="presentation" class="active"><a href="#">Home</a></li> 
<li role="presentation"><a href="#">Profile</a></li> 
<li role="presentation"><a href="#">Messages</a></li> 
</ul>

This allows a developer to quickly get a navigation menu that looks like this:

By using Bootstrap/Foundation, developers can avoid having to reinvent the wheel when they need something common like a navigation menu, progress bar, or drop-down menu.

Bootstrap is now used on nearly 10% of internet sites. You can see a variety of sites that use Bootstrap at their showcase site.

Summary

This post gave a high level explanation on libraries and frameworks. Hopefully, you have a better sense of how each work now. Part 2 of this blog series will explore and explain how build tools, command line tools, and new languages work in front-end development.

About the Author:

How To Get Started With AngularJS

July 13th, 2015

AngularJS is the one of the most powerful framework present for front end developing. You can develop a complete application with it. It features less boilerplate code. AngularJS is maintained by Google.

In today’s lesson I will show you a basic example of AngularJS and in this example you can observe the effectiveness of this framework.

Basics of Getting Started

AngularJS is a JavaScript framework. It is a library written in JavaScript. The first step you need to download or link to the AngularJS library.

In my case I am linking to the AngularJS URL https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js

Or you can download it from www.angularjs.org.

Good thing is you can embed it in your existing HTML code.

The ng-app directive states an AngularJS application. The ng-app directive tells AngularJS that the <div> element is the “owner” of an AngularJS application.


The ng-model directive binds the value of the input field to the application variable name. AngularJS starts automatically when the web page has loaded.

[cta id=”3157″ align=”none”]

Take a look at this example and see the magic:

The first thing you’ll notice in this template is the use of expressions (“{{“ and “}}”) to return variable values. In AngularJS, expressions allow you to execute some computation in order to return a desired value. Ultimately, they’re full blown JavaScript expressions.

In this example, {{name}} will return the value of input field having ng-model=”name”.

Looking to learn more about AngularJS for your team? Check out our custom group training options today.

About the Author:

Diving Into The Details of Two-Way Data-Binding with AngularJS

July 8th, 2015

Before we get into the details of two way data binding, let’s talk about the life cycle of an AngularJS application. So what happens when an AngularJS App loads in the browser? Well, there are three phases that it goes through:

  • The Bootstrap Phase – This is the first phase which starts when the AngularJS library (JS File) is downloaded to the browser. Now AngularJS initializes its modules and necessary components. The dependencies injected inside the module are made available to it.
  • The Compilation Phase – During the compilation phase, AngularJS replaces the static DOM (Document Object Model) with a dynamic DOM. This involves traversal of static DOM for collecting the directives, in order to link them with the scope for dynamic view.
  • The Runtime Phase – This is the final phase which lasts until the browser window is refreshed or closed. The first two phases are hardly visible to the user, and most of the time we use an Angular application, it’s in the runtime phase.

(more…)