AngularJS Walkthrough 1

AngularJS Walkthrough 1

by Luqman Rom

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/4.0.2/bootstrap-material-design.css">
<div ng-app="launchgoodApp">
  <div ng-controller="launchgoodController">
    <div class="container">
    
      <div class="row">
        <div class="col-lg-12">
          <h3>Campaigns</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
              <launchgood-campaign title="title" content="content"></launchgood-campaign>
              <launchgood-campaign title="title" content="content"></launchgood-campaign>

        </div>
        
 
      </div>
    </div>
    
    
    
    <script type="text/ng-template" id="launchgoodCampaignTemplate.html">
    
    	<div class="card" style="width: 20rem;">
  			<img class="card-img-top" style="width: 320px; height: auto" ng-src="{{content.image}}" alt="Card image cap">
  			<div class="card-block">
          <h4 class="card-title">{{content.title}}</h4>
          <p class="card-text">
          	{{content.body}}
          </p>
          <a href="#" class="btn btn-primary">Donate</a>
  			</div>
			</div>
		</script>
    
  </div>
  
</div>

JavaScript

var launchgoodApp = angular.module('launchgoodApp', []);

launchgoodApp.controller('launchgoodController', function($scope) {

  $scope.title = 'Save Rohingya';  
  $scope.content = {
  		'title':  "Save Rohingya",
  		'body': 'Please save us.',
      'image': 'http://via.placeholder.com/350x150'
  }
});

launchgoodApp.directive('launchgoodCampaign', function() {

  return {
  		restrict: 'E', // A, E, C, M,
      scope: {
      	title: '=', // @ string, = model,  & method
        content: '='
      },
      templateUrl: 'launchgoodCampaignTemplate.html',
      //template: 'Name: {{customer.name}} Address: {{customer.address}}',
      link: function ($scope) {
      
      	
      
      },
  };

})