Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular 2 for .NET Developers

Angular 2 for .NET Developers

Pawel Gerr

May 20, 2016
Tweet

More Decks by Pawel Gerr

Other Decks in Programming

Transcript

  1. Motivation Why should we look into Angular 2? Do we

    have to rethink everything we learned? Live Coding Testing Going Native Talking Points 2
  2. • WPF (Windows Presentation Foundation) • UWP (Universal Windows Platform)

    runs on Windows 10+ only • Xamarin supports mobile devices basically (at the moment) What about WPF/ UWP / Xamarin? 3
  3. Web applications are accessible on all devices in a browser

    … if we have access to the network • HTML, scripts and styles have to be downloaded • Unless we are using Application Cache that is deprecated • Service Workers whose specification isn’t finished yet • The views are rendered on the server, in general ASP.NET applications are usually not designed to run completely offline What about ASP.NET? 4
  4. Fortunately, we don’t have to … Do we have to

    rethink everything we learned? 5
  5. Macro Architecture 6 Server Web API STS API Controller (Facade)

    Business Logic Ressource / Data Access (EF) SQL Server MySQL Sqlite WS Files Angular + HTML + JS Browser Cordova iOS Android Electron Win MacOS Linux CefSharp .exe Win 8 & 10
  6. Compose desired user control Usage Components in WPF 10 <UserControl

    ... > <Grid> <StackPanel> <DockPanel> <Label>Name:</Label> <TextBox Text="{Binding Path=Name}"></TextBox> </DockPanel> </StackPanel> </Grid> </UserControl> <StackPanel Margin="10"> <local:CustomerForm></local:CustomerForm> </StackPanel>
  7. Child Actions (MVC 5) or ViewComponents (MVC 6) Usage Component

    in ASP.NET 11 [ViewComponent] public class CustomerFormViewComponent : ViewComponent { public IViewComponentResult Invoke() { var customer = new CustomerViewModel() { Name = "Customer name"}; return View(customer); } } @using (Html.BeginForm()) { @Html.Label("Name:"); @Html.TextBoxFor(model => model.Name); } @Component.Invoke(typeof(CustomerFormViewComponent))
  8. Create and export a component Usage Components in Angular 2

    12 @Component({ selector: 'customer-form', template: ` <label>Name:</label> <input type="text" [(ngModel)]="name" /> ` }) export class CustomerForm { public name: string; constructor() { this.name = 'Customer name'; } } <customer-form></customer-form>
  9. WPF • XAML ASP.NET MVC • HTML (Razor Engine) •

    Server-side rendering Angular 2 • HTML (Built-in Parser) • Client-side rendering by default • Open rendering architecture (can be done on server or in mobile native environments) Declarative View Definition 13
  10. XAML • One-Way • Two-Way ASP.NET • One-Way • Two-Way

    not applicable because the rendering happens on server Angular 2 • One-Way • Two-Way Data Binding 14 <TextBox Text="{Binding Path=Name, Mode=OneWay}"></TextBox> <TextBox Text="{Binding Path=Name, Mode=TwoWay}"></TextBox> @Html.TextBoxFor(model => model.Name) @Model.Name <input type="text" [ngModel]="name" /> {{name}} <input type="text" [(ngModel)]="name" />
  11. .NET • Yes, .NET offers compile-time type safety  •

    Razor markup is type safe as well Angular 2 • Uses TypeScript that is a typed superset of Javascript Type Safety 15 @Component({ … }) class CustomerForm { public name: string; constructor() { … } public submit(): void { … } }
  12. .NET • Libraries: Ninject, AutoFac, Unity, … • Supports: Constructor/property/method

    injection Angular 2 • Build-in dependency injection • Supports: Constructor injection Loose Coupling via Dependency Injection 16
  13. .NET • Unit and integration tests with the help of

    dependency injection • Libraries: MSTest, nUnit, Moq, FluentAssertions, … Angular 2 • Unit and end-to-end tests • Libraries: Jasmine, Karma, Instanbul, Protractor Testing 17 describe(‘getCustomers', () => { const service = new CustomerService(); it('should return 3 customers', () => { var list = service.getCustomers(); expect(list.length).toBe(3); }); });
  14. Here are some tools you should look at • Package

    Manager: NuGet => NPM • Building Projects: MsBuild/„F6“ in Visual Studio => Gulp • [Optional] Testing: MsTest/nUnit etc. => jasmine and karma • [Optional] Debugger: Visual Studio => Chrome Dev-Tools • [Optional] IDE: Visual Studio => WebStorm Tooling 18
  15. Angular 2 • https://angular.io • https://angular.io/docs/ts/latest/guide/ architecture.html Angular 2 –

    Unit Testing • https://medium.com/google-developer- experts/angular-2-unit-testing-with- jasmine-defe20421584#.gii2d4r29 Bootstrap • http://getbootstrap.com AdminLTE 2 • https://almsaeedstudio.com/themes/Ad minLTE/index2.html WebStorm • https://www.jetbrains.com/webstorm/speci als/webstorm/webstorm.html Cordova • http://cordova.apache.org/ Electron • http://electron.atom.io/ Gulp • http://gulpjs.com/ Demo App • https://github.com/PawelGerr/angular2- todolist/tree/usergroupevents Resources 22