AngularJS - Basic

Multiple apps - Bootstrapping

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 id="container" ng-app="myApp">
    
    <h1>Angular Basics</h1>
    
    <div class="main" ng-controller="MainCtrl">
    
        <!-- lets use the controller in this space -->
        
        <p>My favorite color is {{color}}</p>
        
        <input type="text" placeholder="What is your fav color?" ng-model="color" /> <br/>
        <input type="button" ng-click="logToConsole()" value="Log to Console" />
        
    </div>
    
</div>

JavaScript

// Step by step setup
// 1. JS: Create a module for your app
//        ! Don't forget the Dependencies array
// 2. HTML: Link the module to your app space (ng-app)
// 3. JS: Create a controller function in the module
// 4. HTML: Link your controller to a portion of markup (ng-controller)
//        ? Are you using $Scope or Controller As syntax?

// Have at it!
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function($scope) {
    //console.log($scope);
    $scope.color="Red";
    
    $scope.logToConsole = function() {
        console.log("My fav color-", $scope.color);
    }
}]);