Angular JS

by rupesx

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="mainController">
    hello {{name + '. How are you'}}!
    <div>
      <label for="">what is your twitter handle?</label>
      <input type="text" ng-model="handle">
      <br />
      <div class="alert" ng-if="handle.length !== characters">
        Must be 5 Characters
      </div>
      
      <div class="alert" ng-class="{'alert-warning': handle.length < characters, 'alert-danger': handle.length > characters}" ng-hide="handle.length === characters">
        Must be 5 Characters
        
        <div ng-show="handle.length < characters">
          you have less then 5 characters
        </div>
        
         <div ng-show="handle.length > characters">
          you have more then 5 characters
        </div>
        
      </div>
      
      <hr>
      <h1>Rules</h1>
        <ul>
          <li ng-repeat="rule in rules">
            {{rule.rulename}}
          </li>
        </ul>
      <h1>twitter.com/{{handle}}</h1>
      <h1>twitter.com/{{lowercasehandle()}}</h1>
    </div>
  </div>
  
</div>

JavaScript

var myApp = angular.module('myApp', []);
myApp.controller('mainController',['$scope', '$timeout', '$log', '$filter',  function($scope,$timeout, $log, $filter){
	console.log($scope);
	console.log($log);
  $log.log("hello");
  $log.info("this is some info");
  $log.warn("warning!");
  $log.debug("some debug information");
  $log.error("this was an error");
  $scope.name = 'john';
  $scope.formattedname = $filter('uppercase')($scope.name);
  $log.info($scope.name);
  $log.info($scope.formattedname);
  $timeout(function(){
  $scope.name="Everybody";
  },4000);
  $scope.handle='';
  $scope.lowercasehandle = function(){
  return $filter('lowercase')($scope.handle);
  }
  $scope.$watch('handle', function(newValue, oldValue){
  	console.info('Changed!');
    console.log('old:' + oldValue);
   	console.log('new:' + newValue); 
  });
  setTimeout (function(){
  	$scope.$apply(function(){
    	$scope.handle = 'yourtwitterhandle';
      console.log('Scope Changed!');
    });
  }, 3000);
  $timeout(function(){
  	$scope.handle = "mytwitterhandle";
    console.log("scope changed again!")
  }, 6000);
  
  $scope.characters = 5;
  $scope.rules = [
  	{rulename: "Must be 5 characters"},
    {rulename: "Must not be 5 used elsewhere"},
    {rulename: "Must be crazy"},
  ]
  
}]);