AngularJS - Basic

First app - Scopeless

by Seetha Chitti

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container" ng-app="myApp" ng-controller="AppCtrl as app">
    
    <h4>{{app.currentDate}}</h4>
    <h4>{{yesterday}}</h4>
    <h5>{{whereIs}}</h5>
    <!-- 1) basic module, no controller -->
    <div ng-controller="MainCtrl">
    <h1 ng-click="showMeScope()">Hello, {{ name }}</h1>
    <h4>{{app.currentDate}}</h4>
    <h4>{{yesterday}}</h4>

    <input type="text" name="name" ng-model="name" placeholder="What is your name?" />
    </div>
    
    <!-- 2) basic controller, no scope -->
    <div ng-controller="MainCtrl as ctrl">
        
        <h1 ng-click="ctrl.showMe()">Hello, {{ ctrl.name }}</h1>
    
        <input type="text" name="name" ng-model="ctrl.name" placeholder="What is your name?" />
        
    </div>
    
</div>

JavaScript

(function () {
    // 1. Adding a module for our app
    var myApp = angular.module("myApp", []);

    // 2. Adding a basic controller
    //myApp.controller('MainCtrl', function() {
    //    this.name = "Ryan Morris";
    //});
    
    myApp.controller('AppCtrl',AppCtrl);
    function AppCtrl($scope,$rootScope){
        $rootScope.whereIs ="Hi";
        this.currentDate = new Date();
        $scope.yesterday = new Date()-1000;
    }

    myApp.controller('MainCtrl', MainCtrl);
    function MainCtrl ($scope) {
        $scope.showMeScope = function () {
         	alert('on the scope!');   
        }
        
        this.showMe = function () {
            alert('here');
        }
        
        $scope.$watch('name',function(newVal,oldVal){
            if(newVal=="test"){
                alert("");
            }
        });
    }
})()