title: have trouble understanding angularjs components. Only used directives before
body: <p>So I've been using one controller one view, and using only Directives for parts that I want to use repeatedly.</p>
  
  <p>Now Im going for an interview and I am asked to learn about component, which I never know existed. I'm trying to replace directive with it but can't even pass a simple object into the component from the parent controller.</p>
  
  <ol>
  <li>(first question) I've been using $scope for everything. Now that I'm reading on component, I see $ctrl used everywhere, what's the different?</li>
  </ol>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var myApp= angular.module('bigMoveApp', ['ngRoute', 'testerModule']);
  
  myApp.config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
  
      when('/', {
          templateUrl: 'app/Views/main.html',
          controller: 'ctrlMain'
      }).
  
      otherwise({
          redirectTo: '/'
      });
  
  }]);
  </code></pre>
  
  <p><strong>ctrlMain.js</strong></p>
  
  <pre><code>myApp.controller('ctrlMain', ['$scope', function ($scope) {
   //code
       $scope.paragraphToWrite = { text: "let's write something" };
   //code
  }])
  </code></pre>
  
  <p><strong>main.html</strong></p>
  
  <pre><code>&lt;div id="main-body-wrapper"&gt;
  &lt;...&gt;
      &lt;paragraph-Component obj="paragraphToWrite"&gt;&lt;/paragraph-Component&gt;
   &lt;...&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>paragraphComponent.js</strong></p>
  
  <pre><code>    function paragraphController($scope, $element, $attrs) {
          var ctrl = this;
          ctrl.user = $scope.$parent.textFields.whatWeDo.title;
          var x = ctrl.obj;
      } 
  
  
      myApp.component('paragraphComponent', {
          templateUrl: '/app/Views/paragraphCom.html',
          bindings: {
              obj : '='
          },  
          controller: paragraphController 
      })
  </code></pre>
  
  <ol start="2">
  <li>(second question), what am I doing wrong here, I cant even pass in a simple object to the component</li>
  </ol>
  
  <p>Please help, I need to wrap my head around component before end of today, I've been reading on this for the whole night yesterday and still don't quite grasp it. I don't even understand the benefit of component, when directive can do more from my understanding</p>