JSFiddle - React, Tailwind, and code Playground

by Gajus Kuizinas

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="machine" ng-controller="car">
    <h2>Context</h2>
    
    
    
    <ul>
        <li>{{window || 'Undefined'}}</li>
        <li></li>
        <li>{{foo || 'Undefined'}}</li>
    </ul>
    
    <h2>Forgiving</h2>
    
    <p>In JavaScript, trying to evaluate undefined properties generates ReferenceError or TypeError. In Angular, expression evaluation is forgiving to undefined and null.</p>
    
    <ul>
        <li>{{foo.bar.baz}}</li>
        <li>{{foo.bar.baz || 'Undefined'}}</li>
    </ul>
    
    <h2>No Control Flow Statements</h2>
    
    <p>You cannot use the following in an Angular expression: conditionals, loops, or exceptions.</p>
    
    <p>Apart from the ternary operator (a ? b : c), you cannot write a control flow statement in an expression. The reason behind this is core to the Angular philosophy that application logic should be in controllers, not the views. If you need a real conditional, loop, or to throw from a view expression, delegate to a JavaScript method instead.</p>
    
    <ul>
        <li>{{foo ? 'Foo is defined' : 'Foo is not defined'}}</li>
    </ul>
</div>

JavaScript

angular
    .module('machine', [])
    .controller('car', function ($scope) {
        $scope.foo = 'bar';
    });