Simple Change View Using AngularJS

Dikzak · Wednesday at 9:41 PM

In this tutorial, we will create a Simple Change View Using AngularJS. AngularJs is a structural framework for dynamic web application for a better programming tools. Its extend the culture of HTML syntax to make the application clearly and interactive. So let's start coding...

Creating The Mark Up Form
This is where the value is displayed. To create a form open any kind of text editor(notepad++, etc..). Then copy/paste the code below and name it "index.html".

<!DOCTYPE html>
<html

lang

=

"en"

>
<head

>
<meta

charset

=

"UTF-8"

name

=

"viewport"

content

=

"width=device-width, initial-scale=1"

/

>
<link

rel

=

"stylesheet"

type

=

"text/css"

href

=

"css/bootstrap.css"

/

>
<script

src

=

"js/angular.js"

></

script

>
<script

src

=

"js/app.js"

></

script

>
</

head

>
<body

ng-app =

"myModule"

>
<nav class

=

"navbar navbar-default"

>
<div

class

=

"container-fluid"

>
<a

class

=

"navbar-brand"

href

=

"https://www.sourcecodester.com"

>

Sourcecodester</

a

>
</

div

>
</

nav>
<div

class

=

"row"

>
<div

class

=

"col-md-3"

></

div

>
<div

class

=

"col-md-6 well"

ng-controller =

"myController"

>
<h3

class

=

"text-primary"

>

Simple Change View Using AngularJS</

h3

>
<hr

style

- "border-top:1px dotted #000;"

/

>
<div

class

=

"form-inline"

>
<label

class

=

"text-info"

>

Change View:</

label

>
<select

class

=

"form-control"

ng-model =

"memberView"

>
<option

value

=

"member_table.html"

>

Table</

option

>
<option

value

=

"member_list.html"

>

List</

option

>
</

select

>
</

div

>
<br

/

>
<div

ng-include =

"memberView"

></

div

>
</

div

>
</

div

>
</

body

>
</

html

>

The code above will display the data from the angularjs directives. The ng-include directive includes HTML from an external file.

Note: ng-include won't work for cross-domain requests on all browsers and for file. The ng-include doesn't worked well in chrome, but in firefox it totally working fine.

Table Data
This is the data in a table view. Copy/paste the code below then name it "member_table.html".

table class = "table table-bordered">
<thead

>
<tr

>
<th

>

Name</

th

>
<th

>

Age</

th

>
<th

>

Email</

th

>
</

tr

>
</

thead

>
<tbody

>
<tr

ng-repeat =

"member in members"

>
<td

>

{{member.name}}</

td

>
<td

>

{{member.age}}</

td

>
<td

>

{{member.email}}</

td

>
</

tr

>
</

tbody

>

List Data
This is the data of the list view. To create this copy/paste the code below then name it "member_list.html".

<ul

style

=

"list-style-type:none;"

ng-repeat =

"member in members"

>
<li

>
<ul

style

=

"list-style-type:none;"

>

Name: {{member.name}}
<li

>

Age: {{member.age}}</

li

>
<li

>

Email: {{member.email}}</

li

>
</

ul

>
</

li

>
</

ul

>

AngularJs Directives
This is where the data is stored in an array, and return the value to the form when the directives is called. Copy/paste the code below then name it "app.js".

var

app =

angular.module

(

"myModule"

,

[

]

)
.controller

(

"myController"

,

function

(

$scope)

{
var

members =

[
{

name:

"Juan Dela Cruz"

,

age:

"20"

,

email:

"[email protected]"

}

,
{

name:

"San Juan"

,

age:

"18"

,

email:

"[email protected]"

}

,
{

name:

"Lucky Me"

,

age:

"47"

,

email:

"[email protected]"

}

,
{

name:

"Sherlocke Holmes"

,

age:

"55"

,

email:

"[email protected]"

}

,
{

name:

"Pedro Loose"

,

age:

"20"

,

email:

"[email protected]"

}
]

;
$scope.members

=

members;
$scope.memberView

=

"member_table.html"

;
}

)

;

The code above will display the data when the directives is called.

There you have it we created a simple change view using AngularJS. I hope that this tutorial help you. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.

2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Download

You must upgrade your account or reply in the thread to view the hidden content.

Simple Change View Using AngularJS

More options

Dikzak

452,292

324,736

324,744