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 Add reference to Angular JS <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 With Sorting With Filtering 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 <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/