AngularJS Hello World

In this example, we do a very simple AngularJS example.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container-fluid" ng-app="myApp" ng-controller="MyController">
  <div class="row">
    <div class= "col-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
      <!--Card-->
      <div class="card">
        <!--Card image-->
        <img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
        <!--Card content-->
        <div class="card-body">
          <!--Title-->
          <h4 class="card-title">{{woman.name}}</h4>
          <!--Text-->
          <p class="card-text"> 
            <h5>{{woman.field}}{{woman.job}}</h5>
          </p>
        <a href="#!/women/details/{{woman._id}}" class="btn btn-primary">Learn more</a>
      </div>
    </div>
    <!--/.Card-->
  </div>
</div>

JavaScript

// <body ng-app='myApp' binds to the app being created below.
var app = angular.module('myApp', []);

// Register MyController object to this app
app.controller('MyController', ['$scope', MyController]);    

// We define a simple controller constructor.
function MyController($scope) {
    // On controller load, assign 'World' to the "name" model
    // in <input type="text" ng-model="name"></input>
    $scope.women = [{id: 1, name: "test1", image_url: "./img1.png"}, 
                    {id: 2, name: "test2", image_url: "./img2.png"},
                    {id: 3, name: "test3", image_url: "./img3.png"}];
}