AngularJS Matrix MVC

AngularJS, Meet the MVC

  • Published on Thursday, 27 March 2014 03:11
  • Hits: 1951
User Rating:  / 0
PoorBest 

Jquery is a javascript library, AngularJS is a MVC Javascript Framework (embedded in HTML).

So this is the second huge difference. AngularJS separates the:

  •  Model = The data structure as well as the data itself (your DB, XML data, JSOn Data, ...)
  •  View = Output layer (in this case HTML code), the Interface with the User.
  •  Controller = Message transfer layer between the Model and the View. The business Logic

As soon as you master your skills as AngularJS, you will find really useful this model. You can use totally different Views for two totally different devices for the same application.

Let's use the previous example, and reorganize the code a little bit so the MVC software pattern:

The View: index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My HTML File</title>
  <link rel="stylesheet" href="/css/bootstrap.min.css">
  <script src="/js/angular.min.js"></script>
  <script src="/js/controllerMatrix.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Smile!</th>
      <th>Name</th>
      <th>Character</th>
     </tr>
   </thead>
   <tbody>
     <tr ng-repeat="actor in app.actors">
     <td>{{$index + 1}}</td>
     <td><img alt="{{actor.name}}" src="/{{actor.img}}"></td>
     <td>{{actor.name}}</td>
     <td>{{actor.character}}</td>
     </tr>
   </tbody>
</table>
</body>
</html>

The Controller: controllerMatrix.js

var app = angular.module('app', []);
 
app.controller('AppCtrl', function ($http) {
	var app=this;
      $http.get('./matrix.php')
	  .success(function (data) {app.actors=data;})
});

The Model: matrix.php

<?php
echo('[{"name":"Keanu Reeves", "img":"./img/NeoSm.jpg", "character":"Neo"},
  {"name":"Laurence Fishburne", "img":"./img/MorpheusSm.jpg", "character":"Morpheus"},
  {"name":"Carrie-Anne Moss", "img":"./img/TrinitySm.jpg", "character":"Trinity"},
  {"name":"Hugo Weaving", "img":"./img/AgentSmithSm.jpg", "character":"Agent Smith"},
  {"name":"Joe Pantoliano", "img":"./img/CypherSm.jpg", "character":"Cypher"}]');
?>

Check the Code:

hmmm, now the code starts to look cleaner and we are adding style to the results. What's next??. Next thing is time for you to forget accessing the DOM!!, ..it seems not feasible but you will check how possible and cool it is. That will happen next week!!

Follow up this Mini Great Tutorial:

  1. AngularJS, Get in the Matrix
  2. AngularJS, Meet the MVC
  3. AngularJS, No more Dom Manipulation
  4. AngularJS, Build your App!!
  5. Animate your App!!
STORY BY:
Sepelka

Sepelka (JL Castellano)

FreakZion founder and Fortune 500 Company IT Manager. Developer, Consultant, Dreamer and passionate to get full potential for everything from a single project to a whole company with leadership, creativity and commitment.
Technology by itself is useless, but in our hands can turn dreams into reality, the forbidden into the affordable, boreness into fun and projects into businesses.

Check my LinkedIn Profile
Website: http://www.freakzion.com

Music You like..

IT News to be aware of ..

Most Visited...

AngularJS, No more Dom Manipulation

Hits:6268

AngularJS, No more Dom Manipulation

You love to access the DOM, to change the information in it. You just love it!!!, ..but that is because you are using JQuery. It is like using assembly language,...

Read more

QR Codes: The best 9 QR Code Generators

Hits:39735

QR Codes: The best 9 QR Code Generators

Last week we talked a little bit about how the QR Codes are becoming very, very popular and a bit of its history which is always good to know :)...

Read more

Famous, the most beautiful javascript Li…

Hits:3591

Famous, the most beautiful javascript Library

Yes, now there a couple of ways of becoming famous, ..the first one is following your dreams and becoming the best in class developer with a great idea, or use...

Read more