AngularJS - Basic

First app - Scopeless

by Jason Aden

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">
    
    <!-- 1) basic module, no controller -->
    <div ng-controller="MainCtrl">
    <h1 ng-click="showMeScope()">Hello, {{ name }}</h1>
    

    <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('MainCtrl', MainCtrl);
    function MainCtrl ($scope) {
        $scope.showMeScope = function () {
         	alert('on the scope!');   
        }
        
        this.showMe = function () {
            alert('here');
        }
    }
})()