Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Prerequisites for Using AngularJS

DZone's Guide to

Prerequisites for Using AngularJS

Interested in learning AngularJS? First you'll need to understand functions for encapsulation, using modules for functions, global variables, and more.

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Angular JS is an open-source JavaScript framework from Google and can be downloaded from https://angularjs.org/.

Important concepts  before start playing with AngularJS

Angular is  based on the following concepts:

  • Using function expression instead of the function declaration
  • Functions for encapsulation
  • Using modules for functions
  • Avoid using global variables

Function Expressions vs. Function Declarations

Function declaration

  • A variable declaration starts with var. A function declaration starts with function.
  • The JS object created is the same as a function name. In following case an object with the name myFunction created.
  • A function declaration is parsed and executed before any other expressions.
function myFunction(){console.log (“I am in myFunction”);}

Function expression

  • Assign a function to a variable.

  • By doing this, you can dynamically change the call to the function.

  • Use inside functions to create encapsulation and make your code more modular:

var myWork=function(){
console.log(“myWork Invoked”);
};

Function expressions are of two types:

1) Anonymous function expression:

var myWork=function(){
console.log(“myWork Invoked”);
};

2) Named function expression:

var myWork=function myWorkFunction(){
console.log(“myWork Invoked”);
};

Functions for Encapsulation

Function expressions are good for encapsulation.

Consider the following simple example:

//Step 1: – concentrate on implementation logic: -Function expression with global variable myProcess
var myProcess=function myProcessF(){

var preProcess=function(){
console.log(“in preProcess”);
};

var postProcess=function(){
console.log(“in postProcess”);
};

var doProcess=function(){
console.log(“in process”);
};
// Some private function which  used internally
var somePrivateFunction=function(){
console.log(“some internal function”);
}

//Expose functions and variable which  used outside this function: Good example of encapsulation
return{
//Aliasing
preProcessing:preProcess,
postProcessing:postProcess,
doProcessing:doProcess
};
};

//Invoke Function
var process =myProcess();
process.preProcessing();
process.doProcessing();
process.postProcessing();


When this code executed it gives the following output:

js_example






Avoid Creating Global Variables

By looking at above example, we can see that myProcess, process are  global variables. These types of variables are available across the whole page (i.e. to each JS) hence they are susceptible to overriding.  One needs to avoid creating global variables with the help of IIFY:

(function() {
// The code here  executed once in its own scope
}());


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
angular js ,javascript

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}