Templates - AngularJS

Angular JS

by Felipe Santos

HTML

<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" ng-app="showApp" ng-controller="mainController">

    <div class="page-header text-center">
       <h1>MXCursos</h1>
    </div>
 <div class="row">
    <div class="col-xs-6 col-sm-4 course-block" ng-repeat="course in courses">
        <a href="{{course.link}}" target="_blank">
        <img ng-src="{{course.image}}" class="img-responsive" />
        <p>{{ course.title }}</p></a>
    </div>
</div>

   
 </div>

CSS

.course-block{ text-align: center; }
.course-block img{ margin: 0 auto 10px auto; }

JavaScript

var showApp = angular.module('showApp', [])

.controller('mainController', function($scope) {
    $scope.courses = [
      { 
        title: 'Wordpress Professional - Treinamento Essencial',
        link: 'https://mxcursos.com/wordpress-professional-treinamento-essencial',
        image: 'https://mxcursos.com/image/cache/data/NewThumbs/219_WordPress_Professional_Essencial-223x134.png'
      },
      { 
        title: 'CodeIgniter PHP Framework - Treinamento Essencial',
        link: 'https://mxcursos.com/codeigniter-php-framework-treinamento-essencial',
        image: 'https://mxcursos.com/image/cache/data/NewThumbs/220_Codeigniter-223x134.png'
      },
      { 
        title: 'Curso de AngularJS - Treinamento Essencial',
        link: 'https://mxcursos.com/curso-de-angular-js-treinamento-essencial',
        image: 'https://mxcursos.com/image/cache/data/NewThumbs/58_angular_js-223x134.png'
      },      
    ];
});