creating single page applications with asp.net & angular js an introduction by mitchel sellers
Post on 19-Dec-2015
219 Views
Preview:
TRANSCRIPT
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=“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/
top related