Introduction

Hello Everyone!

Today I am here to tell you more about AngularJS directives. Today My goal is to see what and how does ng-switch ng-options directives works? Why we use it? So the main thing is that, these directives help us to create multiples views inside one page. We are able to create more then one view. Before going on further details I wanted to tell you our main requirements for “AngularJS multiple views“.

Outlines

  1. Important Points
  2. AngularJS Library Source
  3. The JavaScript
  4. HTML
  5. AngularJS Multiple Views Full Code
  6. Images of AngularJS Multiple View Code
  7. Precautions
  8. Conclusion

These  outlines will help you by providing the step sequence for AngularJS multiple views code.

1. Important Points

  • ng-option

As you all know in normal coding we use option tag to generate multiple options. But instead of that I shall use ng-option, This directive will generate multiple files stored in the array. The dropdown will contain this list of items. The dropdown will show the data which I shall pass in the array stored in javascript.

  • ng-switch

This always takes model of your controller. It makes ng-option to work, without it the ng-option want works. The ng-switch is basically a collection of ng-switch-when.

  • ng-switch-when

It contains the values which are passed in the array stored in the script. It makes a loop type of structure. It will switch when ever the other option be selected. It will show you the details based on the new selected item.

  • ng-app

It is the main directive required for every app of AngularJS. I described it in previous lecture “AngularJS Development – Hello Word“. Do visit them.

  • ng-controller

It is also defined in previous lecture “Controller directive in AngularJS with scope inheritance“. The controller which controller the module of javascript.

  • ng-model

As you know before, what is the function of this directive. If you don’t, do visit my previous lecture “AngularJS ng-change directive use with simple script“. It will help you in detail.

  • Javascript

As you know AngularJS is the library of javascript. So It requires so script to handle it’s code. It contains a module and a controller function for controlling this module. Inside the controller function a new function containing the logic. $scope will be passed in this function for writing the logic.

  • $scope

It is a predefined object of AngularJS as I explained it in my previous lecture “Controller directive in AngularJS with scope inheritance“. Do visit it.

Description

These are the most important points which I shall use in my AngularJS multiple views code to make it work properly.

2. AngularJS Library Source

As you know we need AngularJS library source in every AngularJs app to make it work properly. So The below script is the source of AngularJS library to make AngularJS multiple views work.

Description

This script must be added in the header so that the could can get the source and work properly. If you don’t add this the code will not work at all.

3. The JavaScript

AS you all know we needed the javascript to control or HTML file containing AngularJS multiple views code. The script is shown below.

Description

So what do we have here? The above code is showing the javascript containing a module. I named my module as “mymodule“. If you see I placed the module inside a variable as per the same name of the module. Now as you know I needed a controller function to handle my module. I named my controller function as “x“. You can give names what ever you like to but remember them while reusing them.

Now inside the function I created another function and passed $scope object init. Now I am able to write my logic in this function. Well as you can see I created an array named “point” with the help of javascript. This is a simple javascript array. As you can see I placed “4” elements inside my array, these are those values which I wanted to show in the list.

Then I created another property same with the help of $scope named as “selectedpoint“. Take a closer look, I placed this property equal to the first property and in the array I only place the ID of second array item as default. SO it will display me the value on ID “1“.

4. The HTML

As you all know AngularJS only works inside the HTML file. So we needed the HTML for AngularJS multiple views code. The required HTML code is shown below.

Description

This is a simple HTML file that we needed to make AngularJS multiple views file. In this code you can see, I placed a div tag inside the body tag. Then I placed a select tag and another div tag init. The inner div tag contains four more div tags. Now I only need to apply my AngularJS directives to control it.

5. AngularJS Multiple Views Full Code

As you all know our main goal is to create AngularJS multiple views so take a closer look on the below code.

Description

As you see in the above code, I placed the AngularJS library source in the head of HTML file. Then I placed my javascript in it which will control my functions of my AngularJS directives. Now take a closer look, I applied ng-app directive on the body to make it the owner of AngularJS multiple views code and I passed the name of the module to make a bond.

In the div tag I applied ng-controller directive and placed the name of the controller in it because it is to be controlled by the controller function.

The select tag contains ng-model and ng-options tags at a time. The ng-model contains the second property I wrote inside the logic portion, which contains the default selected value from the array list.

Now take a closer look, in ng-options directive I wrote “item for item in point“. My this statement says that I am picking one item at a time from point variable containing the array. On every select new array value will appear which you have selected. It will basically generate a dropdown. Then I just wrote a statement and placed my expression.

Now you can see I passed “ng-switch” directive inside the dive tag and gave it the same property as I gave to module so basically what am I doing here? I am making a connection between ng-switch and ng-module. When any different point will be selected inside the module the ng-switch directive will switch to that one. ng-switch is actually the collection of “ng-switch-when”. So when ever the point is selected. The values in ng-switch-when should be the same to that I passed into the array list. You can say it as a simple query connection on which where condition is applied.

But in this case when ever the point will be selected this ng-switch-when will display the result or required view. In this same way all the vies will become visible on their selection.

It’s actual display is provided below have a closer look.

AngularJS multiple views

As you can see the dropdown list is shown. When you will select any point it will display the message stored in the div.

6. Images of AngularJS Multiple Views Code

If you see the pictures I wanted to show you below will explain much about how these two directives ng-options and ng-switch works. Have a fast look below.

AngularJS Multiple Views

In this above picture you can see “point2” is selected by default because I passed the ID “1” in the selectedpoint property as you remember. So that’s why ti is selected before and it is printing the message I placed in the div in which I passed ng-switch-when directive.

AngularJS Multiple Views

Now if we see this picture “point1” is selected so it’s message appeared in front.

AngularJS Multiple Views

Now if we see this picture “point3” is selected so it’s message appeared in front.

AngularJS Multiple Views

Now if we see this picture “point4” is selected so it’s message appeared in front.

Description

So what we got from these pictures? When got when the point is selected then ng-switch will check it as it is linked to the module and it will return the required data.

Precautions

Always place the script tag of source of AngularJS. Must define the ng-app directive. Always place “;” at the end of every statement inside the script. Be careful with the names you provide, they are care sensitive.

Conclusion

So what do we got today? We learned how to do AngularJs multiple views in a single file. We learned the use of ng-options , ng-switch , ng-switch-when. We learned to make dropdown in AngularJS. The images will help to check what are we doing or wanted to do.