Angular 1.5 component demo

by nickadeemus2002

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<div ng-app="demoApp">
  
  <div ng-controller="MainController">
    <pre>{{mainController.test}}</pre>
    <button ng-click="mainController.sayHello()">
      say hello!!
    </button>
    <hr />
    <div ng-class="[class1, 'italic']">
      <p>Simple</p>
    </div>
    <hr />  
    <div ng-class="{ 'not-highlighted': !highlighted, 'highlighted': highlighted }">
      <p ng-click="toggleClass()">Click me to see dynamic class change</p>
    </div>
  </div>  
  <div ng-controller="MainController2">
   <ul>   
    <li>OUTER SCOPE:</li>
    <li>foo: {{ foo }}</li>
    <li>bar.innerProperty: {{ bar.innerProperty }}</li>
    <li>
      <!— ng-if creates a new scope —>
      <ul ng-if="foo"> 
         <li>INNER SCOPE - created by ng-if directive</li>
         <li>foo: {{ foo }}</li>
         <li>bar.innerProperty: {{ bar.innerProperty }}</li>
         <li><button ng-click="foo=2">Set primitive - foo </button></li>
         <li><button ng-click="bar.innerProperty=3">Mutate object - bar.innerProperty</button></li>
       </ul>
      </li>
    </ul>
 </div>
 
 
 </div>

CSS

p {
  font-size: 2rem;
   text-decoration: underline;
}
.italic {
  font-style: italic;
}
.not-highlighted {
  color: #585858;
  opacity: 75%;
}
.highlighted {
  border: 1px solid #ff0000;
  color: #ff0000;
  background-color: #f1f1f1;
  font-weight: bold;
  font-size: 5rem;
}

JavaScript

angular.module('demoApp', ["Controllers"]);
angular.module("Controllers", [])
			.controller("MainController", function($scope){
      /*
        $scope.test = "hi";
        $scope.sayHello = function(){
        	alert('hi');
        };
      */
      
      $scope.class1 = "not-highlighted";
      $scope.class2 = "highlighted";
      $scope.highlighted = false;
      
      $scope.toggleClass = function(){
      	$scope.highlighted = !$scope.highlighted;
      };
     })
     .controller('MainController2', function($scope){
  			$scope.foo = 1;
  			$scope.bar = {innerProperty: 2};
     });
      






/*
var xyzApi = xyzApi || {
	sayHello: function() {
  	return "hey there\n";
  }
};

angular.module('demoApp', [])
	.controller('MainController', MainController)
  .provider('xyzApi', function XyzApiProvider() {
  
  this.$get = function() {
  
  	var xyzApiFactory = {
      otherFunction: function() {
        //$log.log('other function called');
        return 'other function \n';
      }
  	};
    //console.log(xyzApiFactory, xyzApi);
    angular.merge(xyzApiFactory, xyzApi);
    return xyzApiFactory;
  };
});


function MainController(xyzApi) {
	var vm = this;
  vm.test = '';
  
	vm.sayHello = function() {
  	vm.test += xyzApi.sayHello() + xyzApi.otherFunction();
  }
}
*/