1. Creating Single Page Applications with ASP.NET & Angular JS An introduction by Mitchel Sellers

2. About Your Speaker  Mitchel Sellers  CEO/Director of Development @ IowaComputerGurus, Inc.  Microsoft C# MVP/DNN MVP  Contact Info  Blog: www.mitchelsellers.comwww.mitchelsellers.com  Email: msellers@iowacomputergurus.commsellers@iowacomputergurus.com  Twitter: @mitchelsellers  LinkedIn: www.linkedin.com/in/mitchelsellers

3. About this Session  A high level overview  Progressively walking through examples  ASP.NET MVC Project available for download  Focused on AngularJS/MVC not backend DB

4. Why? Other Options?  Speed development of UI elements  Support binding & testing on the UI layer  Other Options  KnockoutJS  Backbone  Ember

5. Angular The Basics  Change HTML Node   Add reference to Angular JS   Add a binding to an input element  <input type=“text” placeholder=“Enter your Name” ng-model=“yourName”  Display the value using a simple expression  {{yourName}}

6. Working with the Basics  What can you do with just the basics?  Tie fields together  Update other elements  Practice working inside of ASP.NET  Demos!

7. Understanding Expressions  Expressions – Output of data  {{firstName}} – simple output  {{yourName + “ “ + firstName}} – Simple string manipution  {{ names[1]}} – Arrays work normally (Will get to this)

8. Understanding Directives  Directives – Additions/Extensions  ng-app – Applied to an element to make it the “owner” of an app  ng-init – Initialization process (not often used)  ng-init=“firstName=‘John’”  ng-model – Binds a HTML control to application data  ng-repeat – For repeating elements  ng-controller – Defines the relationship to the controller (Business process)  ng-submit – Intercept form submission  ng-click – Intercept click event (links)  ng-disabled – Disable when conditional is true

9. Deep Dive: ng-repeat  Basic structure  ng-repeat=“myItem in Items”  Will display the list as the list is  With Sorting  ng-repeat=“myItem in items | orderBy:orderControl”  Will display the list, but sort using the attribute identified by orderControl from the model  With Filtering  ng-repeat=“myItem in items | filter:filterQuery”  Will display the list, but filter using the supplied query  If filter query is a text string, ANY match will show  Can limit more using different names  to limit to a column  for anything

10. Shopping List Demo  Load values from ASP.NET MVC when loading the page  Give users a “Save” button  All SPA based otherwise.

11. Additional Learning  https://angularjs.org/ https://angularjs.org/  http://www.w3schools.com/angular/default.asp http://www.w3schools.com/angular/default.asp  http://www.angularjshub.com/ http://www.angularjshub.com/