Getting Started With Angular.js: Manually Boot-Strapping Your Application (Part I) | blog.kevinchisholm.com

HTML

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<header>
    <img src="http://sub1.kevinchisholm.com/blog/images/angularjs-logo-small.png" class="logo" >
    <hgroup>
      <h1>Getting Started With Angular.js<span>Manually Boot-Strapping Your Application<i>(Part I)</i><span></h1>
      <h2>Working Example</h2>
      <h3><a href="http://blog.kevinchisholm.com" target="_blank">blog.kevinchisholm.com</a></h3>
    </hgroup>
  </header>
  <div id="main">
    <h2>Type Something In the Text-Box.</h2>
    <button id="bootAngular">Boot Angular</button>
    <input type="text" ng-model="myData" />
    <p class="content"><b>The Value of "myData" is:</b><span class="val">{{myData}}</span></p>
  </div>

CSS

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  }

h1,h2{
  margin:20px 0;
}
button{
  display: block;
  height: 50px;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: bold;
}
hgroup h1{
  color:#b82934;
  font-size:42px;
}
hgroup h1 span{
  display:block;
  font-size:22px;
  color:#444;
}
hgroup h3 a{
  font-size:22px;
  color:#ccc;
}
header{
  width:60%;
  margin:10px auto;
}
img.logo{
  display:block;
  float:left;
  margin-top: -20px;
}

#main{
  clear:both;
  margin:20px auto 0;
  width:80%;
}

.child{
  float:left;
  width:40%;
  position:relative;
  margin-right: 0;
  padding:10px;
  border:3px solid #444;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;  
}

.child h2{
  color:#e52a3a!important;
  font-weight:bold;
}

.child input{
  width:90%;
  padding:5px;
  font-size:22px;
}

.left{
  margin-right:5%;
  background-color:#B0E0E6;
}

.right{
  background-color:#556B2F;
}

select{
  margin:20px 0;
}

.content{
  font-size:22px;
  color:#e52a3a;
}

.content b{
  font-weight:bold;
}

.val{
  margin-left:10px;
  background-color:#e52a3a;

  font-family:Georgia,Times,Serif;
  color:#fff;
  font-weight:bold;
}

JavaScript

function bootAngular(){
    var myMod = angular.module('myApp', []);
    
    angular.bootstrap( $('body'), ['myApp']);
};

$(document).ready(function(){
    $('#bootAngular').click(function(){
        bootAngular();
        $(this).attr('disabled',true);
    });
});