Download presentation
Presentation is loading. Please wait.
1
Creating Single Page Applications with ASP.NET & Angular JS
An introduction by Mitchel Sellers
2
About Your Speaker Mitchel Sellers
CEO/Director of IowaComputerGurus, Inc. Microsoft C# MVP/DNN MVP Contact Info Blog: LinkedIn:
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
<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}}
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 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
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/
Similar presentations
