angular/index.html

<!DOCTYPE html>
<html lang="en" ng-app="basicDraw"> <!-- ng-app is used to initialize the application -->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic Drawing App</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">

  </head>
  <body class="container">
    <h1>Basic Draw App - <small>AngularJS</small></h1>
    <div class="row">
      <!-- Canvas view, we us ng-controller to associate the view with the controller code. -->
      <div id="canvasView" class="col-xs-6" ng-controller="CanvasCtrl">
        <div>
          <!-- Using ng-class we can dynamically set and remove the HTML class of the HTML objects based on the evaluation of the values. For instance, the buttons bellow will get "active" class when the expression "activeShape == 'ellipse'" is true. Furthermore on the click of the button (ng-click) we set the activeShape value. -->
          <button class="btn btn-sm btn-default" ng-class="{active:activeShape == 'ellipse'}" ng-click="activeShape = 'ellipse'">
            Ellipse
          </button>
          <button class="btn btn-sm btn-default" ng-class="{active:activeShape == 'rectangle'}" ng-click="activeShape = 'rectangle'">
            Rectangle
          </button>
          <button class="btn btn-sm btn-default" ng-class="{active:activeShape == 'segment'}" ng-click="activeShape = 'segment'">
            Segment
          </button>
        </div>
        <!-- In the SVG we create a template for each shape type and use Angular ng-repeat to iterate over all shapes in model and create their instances according to the template. The biding between model values and SVG attributes is achieved using ng-attr and {{}}.  -->
        <svg ng-mousedown="startDrawShape($event)" ng-mouseup="stopDrawShape()" ng-mousemove="updateDrawShape($event)">
          <ellipse ng-repeat="shape in shapes | filter:'ellipse'" ng-attr-cx="{{shape.x+shape.w/2}}" ng-attr-cy="{{shape.y+shape.h/2}}" ng-attr-rx="{{Math.abs(shape.w/2)}}" ng-attr-ry="{{Math.abs(shape.h/2)}}" style="fill-opacity:0;stroke:black;stroke-width:1" ng-click="setSelected(shape)"/>
          <rect ng-repeat="shape in shapes | filter:'rectangle'" ng-attr-x="{{shape.x}}" ng-attr-y="{{shape.y}}" ng-attr-width="{{Math.abs(shape.w)}}" ng-attr-height="{{Math.abs(shape.h)}}" style="fill-opacity:0;stroke:black;stroke-width:1" />
          <line ng-repeat="shape in shapes | filter:'segment'" ng-attr-x1="{{shape.x}}" ng-attr-y1="{{shape.y}}" ng-attr-x2="{{shape.x + shape.w}}" ng-attr-y2="{{shape.y + shape.h}}" style="stroke:black;stroke-width:1"/>
        </svg>
      </div>
      
      <!-- Form view, we us ng-controller to associate the view with the controller code.  -->
      <div id="formView" class="col-xs-6" ng-controller="FormCtrl">
        <div class="col-xs-6">
            <select id="shapeList" multiple class="form-control" size="10">
              <!-- Similar as with SVG, we use ng-repeat to create each option in the shape list. Furthermore ng-click maps the click action to setSelected() function in the controller -->
              <option ng-repeat="shape in shapes" ng-click="setSelected(shape)">{{shape.type}}:{{shape.x}}, {{shape.y}}, {{shape.h}}, {{shape.w}}</option>
            </select>
        </div>
        <div class="col-xs-6 form-horizontal">
          <!-- In the input elements we use ng-model to achieve the bi-directional binding. In other way, the model will be changed when the value in the input changes.  -->
          <div class="form-group">
            <label for="x" class="col-sm-2 control-label">X</label>
            <div class="col-sm-10">
              <input ng-model="selectedShape.x" type="number" class="form-control" id="x" placeholder="Enter x coordinate">
            </div>
          </div>
          <div class="form-group">
            <label for="x" class="col-sm-2 control-label">Y</label>
            <div class="col-sm-10">
              <input ng-model="selectedShape.y" type="number" class="form-control" id="y" placeholder="Enter y coordinate">
            </div>
          </div>
          <div class="form-group">
            <label for="x" class="col-sm-2 control-label">Width</label>
            <div class="col-sm-10">
              <input ng-model="selectedShape.h" type="number" class="form-control" id="w" placeholder="Enter width">
            </div>
          </div>
          <div class="form-group">
            <label for="x"class="col-sm-2 control-label">Height</label>
            <div class="col-sm-10">
              <input ng-model="selectedShape.w" type="number" class="form-control" id="h" placeholder="Enter height">
            </div>
          </div>
        </div>
      </div>
    </div>
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <!-- Include angular -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
    <!-- Include our application, model and controllers code -->
    <script src="js/app.js"></script>
    <script src="js/services/shapeModel.js"></script>
    <script src="js/controllers/canvasCtrl.js"></script>
    <script src="js/controllers/formCtrl.js"></script>

  </body>
</html>