AngularJs – first steps

AngBasics01

AngBasics02

<html ng-app="menuApp">
   <body ng-controller="menuCtrl as ctrl">
     <div style="font-family:georgia;color:HotPink;">{{ctrl.WhatsOnTheMenu}}
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
     <script type="text/javascript">
       angular.module('menuApp', [])
         .controller('menuCtrl', [function() {
             this.WhatsOnTheMenu = 'Full English Breakfast';
       }]);
     </script>
   </body>
 </html>

http://plnkr.co/edit/4grWJLeNKWwKFdsREy6D?p=preview

Now bring in a controller that maintains a set of breakfast items (the model is obviously all wrong in that you wouldn’t have a menu consisting of just one dish, but this is fine for the example.):

And I’ve only just noticed I was using the minified version before, and was wondering why the debug was unintelligible – that was why:

AngBasics03

Other stuff in here (much of this would obviously be in separate files –  CSS, controller, app, etc):

  • simple styles
  • currency filter
  • ng-repeat
  • json

 

AngBasics04

<html ng-app="menuApp">
<style>
body {
 font-family: Georgia;
 color:HotPink
}
h1 {
 color: blue;
 margin-left: 0px;
} 
</style>
 
 <body ng-controller="menuCtrl as ctrl">
 <h1>{{ctrl.dish}}</h1>
 <ul>
 <li ng-repeat="item in ctrl.dishItems">
 {{item.Name}} {{item.Price | currency:'£'}}
 </li>
 </ul>
 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script> 
 <script type="text/javascript">
 angular.module('menuApp', [])
 .controller('menuCtrl', [function() {
 this.dish = 'Full English Breakfast'; 
 this.dishItems = [
 {Name:"bacon rasher", Price: 0.9},
 {Name:"fried egg", Price: 1.41}
 ]; 
 }]);
 </script>
 </body>
 
</html>

Now I’ll apply that to a simple list of HTML links:

AngBasics05

 

http://plnkr.co/edit/yNUDCAq5vmRX2cwYzko9?p=preview

AngBasics06

<html ng-app="linksApp">
<style>
body {
 font-family: Arial;
 color:HotPink
}
h1 {
 color: darkorange;
 margin-left: 0px;
} 
</style>
 
 <body ng-controller="linksCtrl as ctrl">
 <h1>{{ctrl.title}}</h1>
 <ul>
 <li ng-repeat="link in ctrl.musicLinks">
 <a href={{link.Url}}>{{link.FriendlyName}}</a>
 </li>
 </ul>
 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script> 
 <script type="text/javascript">
 angular.module('linksApp', [])
 .controller('linksCtrl', [function() {
 this.title = 'Music HTML Pages'; 
 this.musicLinks = [
 {FriendlyName:"Diminished Chords", Url: "https://garyewer.wordpress.com/2012/06/25/working-diminished-chords-into-your-progressions/"},
 {FriendlyName:"Free grand piano VSTs", Url: "http://www.vst4free.com/free_vst.php?id=382"}
 ]; 
 }]);
 </script>
 </body>
 
</html>

Sundry other snippets:
http://plnkr.co/edit/tEYeRhBXlGr6Ou65PzcU?p=preview

http://plnkr.co/edit/54VuqBOuEPnKEL2t6qDo?p=preview

http://plnkr.co/edit/JyJGSrgna7WHJkSG8Fsr?p=preview

Advertisements

One thought on “AngularJs – first steps

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s