Simple Change View Using AngularJS

Submitted by: 
Language: 
Visitors have accessed this post 1745 times.

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

  1. <!DOCTYPE html>
  2. <html lang = "en">
  3. <head>
  4. <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" />
  5. <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css"/>
  6. <script src = "js/angular.js"></script>
  7. <script src = "js/app.js"></script>
  8. </head>
  9. <body ng-app = "myModule">
  10. <nav class = "navbar navbar-default">
  11. <div class = "container-fluid">
  12. <a class = "navbar-brand" href = "<a href="https://www.sourcecodester.com">Sourcecodester</a>
  13. " rel="nofollow">https://www.sourcecodester.com">Sourcecodester</a>
  14. </a> </div>
  15. </nav>
  16. <div class = "row">
  17. <div class = "col-md-3"></div>
  18. <div class = "col-md-6 well" ng-controller = "myController">
  19. <h3 class = "text-primary">Simple Change View Using AngularJS</h3>
  20. <hr style - "border-top:1px dotted #000;"/>
  21. <div class = "form-inline">
  22. <label class = "text-info">Change View:</label>
  23. <select class = "form-control" ng-model = "memberView">
  24. <option value = "member_table.html">Table</option>
  25. <option value = "member_list.html">List</option>
  26. </select>
  27. </div>
  28. <br />
  29. <div ng-include = "memberView"></div>
  30. </div>
  31. </div>
  32. </body>
  33. </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".

  1. table class = "table table-bordered">
  2. <tr>
  3. <th>Name</th>
  4. <th>Age</th>
  5. <th>Email</th>
  6. </tr>
  7. </thead>
  8. <tr ng-repeat = "member in members">
  9. <td>{{member.name}}</td>
  10. <td>{{member.age}}</td>
  11. <td>{{member.email}}</td>
  12. </tr>
  13. </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".

  1. <ul style = "list-style-type:none;" ng-repeat = "member in members">
  2. <li>
  3. <ul style = "list-style-type:none;">Name: {{member.name}}
  4. <li>Age: {{member.age}}</li>
  5. <li>Email: {{member.email}}</li>
  6. </ul>
  7. </li>
  8. </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".

  1. var app = angular.module("myModule", [])
  2. .controller("myController", function($scope){
  3. var members = [
  4. {name: "Juan Dela Cruz", age: "20", email: "<a href="mailto:delacruz@yahoo.com" rel="nofollow">[email protected]</a>"},
  5. {name: "San Juan", age: "18", email: "<a href="mailto:juan@rocketmail.com" rel="nofollow">[email protected]</a>"},
  6. {name: "Lucky Me", age: "47", email: "<a href="mailto:melucky@gogomail.com" rel="nofollow">[email protected]</a>"},
  7. {name: "Sherlocke Holmes", age: "55", email: "<a href="mailto:holmes@24centurymail.com" rel="nofollow">[email protected]</a>"},
  8. {name: "Pedro Loose", age: "20", email: "<a href="mailto:loose@gmail.com" rel="nofollow">[email protected]</a>"}
  9. ];
  10. $scope.members = members;
  11. $scope.memberView = "member_table.html";
  12. });

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!!


Tags: 

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.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.