AngularJS - Basic

First app - Scopeless

by Ryan Morris

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">
    
    <!-- basic controller usage -->
    <div ng-controller="OneMainCtrl as ctrl">
        
        <h1>Hello, {{ ctrl.name }}</h1>
    
        <input type="text" name="name" ng-model="ctrl.name" placeholder="What is your name?" />
        
    </div>
    
</div>

JavaScript

// 1) we could also have just defined a function
// but it is better to organize it within your module
function OneMainCtrl() {
    
    this.name = "Ryan Morris";   
    
}

var myApp = angular.module("myApp", []);

// 2) Adding a basic controller
myApp.controller('TwoMainCtrl', function() {
    
    this.name = "Ryan Morris";
    
});

// 3) Best practice is array-notation for dependencies
myApp.controller('ThreeMainCtrl', [function() {
    
    this.name = "Ryan Morris";
    
}]);