Introduction

Hello Everyone!

Today I am here to tell you more about AngularJs. Our goal is to see AngularJS include directive use and implementation with ng-option directive in HTML. As we have already covered many directives uses. In the last lecture “AngularJS multiple views by the help of directives” I told you the use and implementation of ng-option directive. Today I shall use AngularJS include directive with ng-option instead of ng-switch.

It will also show us the dropdown but instead of displaying messages I shall display different pages, when ever the desired option will be selected. So what do we need now to make it happen? I need to make new project, if you don’t know how to make new project do visit my previous lecture “AngularJS Development – Hello Word“.

Before going on further detail I wanted to show that how it works.

Outlines

  • Project
  • Important Points
  • Library source script
  • JavaScript
  • HTML Code
  • AngularJS Include Directive Code
  • Images
  • Precautions
  • Conclusion

Description

These are the outlines on the basis of this sequence we will perform or task. So our main goal is to make a dropdown containing URL’s of multiple pages.

1. Project

So how to make new project? I told this in my previous lecture “AngularJS Development – Hello Word“. Do visit it.

2. Important Points

  • 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.

  • ng-options

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 in javascript. The dropdown will contain this list of items.

  • ng-include

This is our main directive. The ng-include directive will take the URL of the page by the help of ng-model. It don’t switch the element of HTML page, it actually load that page for you. By this you can include HTML file in HTML file.

  • 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 key points which we will use in this lecture. By the help of there points we will be able to make AngularJS include directive code.

3. Library Source Script

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.

4. JavaScript Code

Description

So what do we have here? The above code is showing the javascript containing a module. I named my module as “mymodule“.I placed the module inside a variable as per the same name of the module. Now as you know I needed a predefined 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. Now in the logic portion by the help of “$scope” I made a property named “templatepage“. In this property I passed an array containing two objects. Both the objects contains a temp value and a URL to that value.

Then I made another variable “tempPage” with the help of $scope and stored the first variable in it with ID “0” as default. It means the dropdown will show the value placed on zero ID as default.

5. HTML Code

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

Description

This is a simple HTML file that we needed to make AngularJS include directive 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 select tag contains an option tag, and gave it a property named value equal to empty. It will be the first element in the dropdown. I shall explain it later that why I did this. Now I only need to apply my AngularJS directives to control it.

6. AngularJS Include Directive 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 AngularJS include directive. Now take a closer look, I applied ng-app directive on the body to make it the owner of AngularJS include directive 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 function in it as “x” because it is to be controlled by it. 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 to the statement placed inside the ng-option tag. I wrote “p.temp for p in templatepage” this statement, in it I named the tag as “p” and concatenated it with “temp” value it will make attachment to this name “temp” placed in the array. The statement itself tells what is it doing. It tell to pick the page placed in the array of template page with the name stored in temp.

The after this I placed an “option” tag and stored value empty. This is because when I wanted to display empty page I will click it. Now My goal is, when I select first page or second page I want to load the respected pages based on my selection. For this purpose ng-include will help me. The ng-include will take the URL of the selected page with the help of model. The ng-include will connect with the ng-model.

7. Images of AngularJS Include Directive Code

Now  I shall explain the same thing with the help of images. It will tell you what actually are you doing and wanted to do? Take closer look below.

a) Main View

If you see the below picture? You will notice that “first” page is visible in the window. Why is that so? It is because I passed the ID zero as default in the second logic.

AngularJS include directive

b) Dropdown

So what is this? This is the dropdown we made by AngularJS include directive with the help of ng-options directive. As you can see the empty is at first place because I placed the option tag in the “select” tag. Then in the list first and second pages are displayed. Now on clicking any of them, will show you the required page,

AngularJS include directive

c) Second Page

As you can see I selected the “second” page now, What it did? It showed Me the second page, It loaded it for Me.

AngularJS include directive

d) Empty Page

Now see this I just selected the empty option and what it did? It displayed nothing, because the page is empty.

AngularJS include directive

Description

So from these pictures you can see that What we did? We actually added the HTML pages together and the load on selecting each of them by the help of AngularJS include directive. Normally we make dropdown by the help of multiple option tags in the HTML, but this is the easy way to do this.

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 learn today? We learned how to make dropdown of different pages of HTML by AngularJS include directive and load the pages on selection. We used ng-options tag to create dropdown and ng-include to show the page after selection. Now we don’t need to write multiple options tags for creating the dropdown AngularJS include directive made it easy for us.