Creating Single Page Applications with ASP.NET & Angular JS

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

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

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

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

Angular The Basics • Change HTML Node • <html ng> • Add reference to Angular JS • <script src=“//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js” ></script> • 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}}

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!

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

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

Deep Dive: ng-repeat • Basic structure • ng-repeat=“myItem in Items” • Will display the list as the list is • With Sorting • ng-repeat=“myItemin 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 • <input ng-model=“filterQuery.ColumnName” /> to limit to a column • <input ng-model=“filterQuery.$” /> for anything

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

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

Creating Single Page Applications with ASP.NET & Angular JS