Building web apps powered by Angular 2.x using Visual Studio 2017 [w/ subs]



00:00:00 – hello and welcome to this session on
00:00:02 – building web apps powered by angular 2
00:00:04 – using visual studio 2017 so snappy
00:00:07 – little title just rolls off the tongue
00:00:09 – my name is jerimae i'm president and
00:00:11 – co-founder of cranked to 11 we're a
00:00:13 – digital agency that likes to produce
00:00:14 – next-generation experiences we do a lot
00:00:17 – of work with Windows uwp web
00:00:20 – applications and cross-platform mobile I
00:00:22 – myself am a microsoft MVP for Windows
00:00:24 – development and I've got a bunch of
00:00:25 – interests around biking hiking and I
00:00:28 – couldn't get the last one to rhyme
00:00:29 – working out what we're going to be
00:00:32 – talking about today is how we can
00:00:33 – actually leverage angular as part of a
00:00:36 – asp.net MVC core web application and
00:00:40 – bring these things together so we're
00:00:42 – going to talk about how we would get
00:00:43 – started with this some essential tools
00:00:45 – and how we're going to go about creating
00:00:46 – an app we're then going to talk about
00:00:48 – how we can take that template and strip
00:00:51 – it down so we're starting fresh for our
00:00:53 – own particular application we're then
00:00:56 – going to go through some scenarios where
00:00:57 – we're taking an HTML mark and how we're
00:00:59 – going to bring that into angular we're
00:01:02 – then going to incorporate some data
00:01:03 – services into this model that we've
00:01:05 – built and finally we're going to it
00:01:07 – deploy this to Asia once we've done that
00:01:10 – hopefully we'll have a little bit of
00:01:11 – time to wrap things up okay let's sleep
00:01:14 – in so obviously we're talking about
00:01:18 – visual studio 2017 here so it's an
00:01:21 – essential tool for actually building
00:01:23 – this type of application you'll want to
00:01:25 – make sure you've installed the web
00:01:27 – payload for or workload for the asp.net
00:01:29 – web development there's also a reliance
00:01:31 – upon no Jas version 6 or later now
00:01:36 – typically when you're in Visual Studio
00:01:37 – you would go to file new crate project
00:01:41 – and you would select a template in which
00:01:42 – you would create your project the
00:01:44 – versions are the tools that we're using
00:01:46 – right now with the spa templates
00:01:47 – actually come command line only though
00:01:49 – I'm sure they'll be integrated into the
00:01:51 – new project dialog at some point in the
00:01:53 – future why are we going to use the spa
00:01:56 – template what it brings a number of
00:01:58 – benefits first and foremost it solves a
00:02:01 – number of the challenges of bringing
00:02:02 – together the angular client-side system
00:02:05 – with the asp.net core server side system
00:02:08 – so that we can actually have them hosted
00:02:09 – within a single solution it really
00:02:11 – resolves some of the routing issues that
00:02:13 – with both of them trying to take control
00:02:15 – of things it also incorporates a great
00:02:18 – capability called server-side
00:02:19 – pre-rendering the advantage of this is
00:02:22 – that it leverages node on the server to
00:02:25 – create a version of your page that can
00:02:27 – be downloaded very quickly when you
00:02:29 – start the application before the
00:02:31 – JavaScript client side has spoiled up
00:02:33 – and so it gives you much faster
00:02:35 – application launch capability we're also
00:02:38 – leveraging the web pack dev middleware
00:02:41 – the great thing about this web pack tool
00:02:43 – is it runs in the background and is
00:02:45 – constantly monitoring your source files
00:02:47 – and we'll transpile your typescript as
00:02:49 – created and saved that means it's always
00:02:52 – ready to go that ties in very nicely
00:02:55 – with hot model replacing this allows us
00:02:58 – to automatically refresh our browser to
00:03:01 – display new content as we're doing this
00:03:03 – this means that we don't have to
00:03:06 – constantly compile our application hit
00:03:08 – ctrl f5 or f5 to launch it up and run it
00:03:11 – it's actually running all the time
00:03:12 – obviously we'll need to compile if we're
00:03:14 – going to create server side code but
00:03:17 – this is great for rapid development of
00:03:19 – our client-side application the template
00:03:22 – also supports to build modes one which
00:03:25 – is divine rented which makes sure that
00:03:27 – we have source maps that map our
00:03:29 – typescript source to our compiled
00:03:33 – JavaScript so that we can actually do
00:03:34 – debugging and integrate tightly with
00:03:36 – chrome or edge or Internet Explorer of a
00:03:38 – debugging experiences and we also have a
00:03:40 – production mode which leverages
00:03:42 – minification and also doesn't produce
00:03:44 – source maps to keep our deploy code as
00:03:48 – small as possible to really make it
00:03:49 – efficient for downloading you can learn
00:03:52 – a lot more about the spa template itself
00:03:55 – from a great post by Steve Sanderson and
00:03:57 – i've included a short link here to allow
00:04:00 – you to go out to that site so let's talk
00:04:04 – through installing the spa templates
00:04:06 – first and foremost you'll need to verify
00:04:09 – that you have a version of node
00:04:12 – installed on your system that's greater
00:04:13 – than version 6 as you can see I've got
00:04:15 – 7.5 installed on mine you're then going
00:04:18 – to leverage the dotnet command line tool
00:04:21 – and we're going to install those
00:04:23 – templates so don't net you we're going
00:04:24 – to do dash dash install and we're going
00:04:26 – to specify Microsoft
00:04:27 – asp net core dot spar templates colon
00:04:31 – colon star that means grab the latest
00:04:32 – version of these things this is actually
00:04:35 – a fairly lengthy process there's a lot
00:04:37 – of packages that will be downloaded so
00:04:38 – I'm not going to demonstrate that live
00:04:40 – for you however what I will demonstrate
00:04:43 – is actually creating an application
00:04:46 – using those templates so let me switch
00:04:48 – over and show my command line so I'm in
00:04:52 – command line I mean my demos folder so
00:04:54 – your routine for creating these things
00:04:57 – is going to be you want first of all
00:05:00 – most want to make a directory for
00:05:01 – yourself so this is going to be my new
00:05:03 – application directory I'm going to
00:05:06 – change directly into crank bank and then
00:05:10 – I'm going to use the dotnet command and
00:05:12 – I can say new and I can specify dash L
00:05:15 – this will list all of the templates that
00:05:17 – are available for me as we can see here
00:05:20 – here's a list of these templates and
00:05:22 – right here is our angular template
00:05:24 – you'll notice or alia knockout Jas react
00:05:27 – at jer's react Jas and redux are also
00:05:29 – part of these spa replication templates
00:05:32 – that are available for us but as i
00:05:33 – mentioned we're focusing on angular
00:05:36 – right now so let me create my angular
00:05:41 – application and this rapidly expands out
00:05:47 – the template and creates my project and
00:05:51 – as we can see we've got a lot of source
00:05:52 – files here including a CS proj file
00:05:55 – we're going to leverage that in a moment
00:05:56 – what we've done at this point is created
00:05:59 – our project but we haven't actually
00:06:01 – downloaded any dependencies now I could
00:06:03 – open this directly in visual studio
00:06:05 – right now and visual studio will pull
00:06:07 – down nuget packages and would also pull
00:06:09 – down the NPM packages that are required
00:06:13 – the node packages however i actually
00:06:15 – prefer doing this in the command line
00:06:16 – for a couple of reasons the primary
00:06:18 – reason is that I can actually see the
00:06:20 – progress of the NPM installs whereas
00:06:22 – it's a background task and visual studio
00:06:24 – and you just get a little busy icon
00:06:26 – moving in the status bar so let me do
00:06:28 – this soapnet restore and so this is a
00:06:32 – very quick operation and then i'm going
00:06:35 – to say npm install now this is a longer
00:06:39 – operation as it's going to bring down
00:06:40 – all of the various
00:06:41 – packages that are documented within the
00:06:43 – packages JSON file that's part of our
00:06:46 – application environment so I'm going to
00:06:47 – leave that running and come back to my
00:06:49 – slide deck so what we've just briefly
00:06:56 – ran through is a couple of I dental
00:06:59 – tools that's just visual studio 2017 and
00:07:02 – node we've discussed briefly how to
00:07:04 – install the spa template and then we've
00:07:06 – demonstrated the creation of a spar
00:07:07 – template and we're in the process of
00:07:09 – preparing it for opening it in Visual
00:07:11 – Studio what we're now going to look at
00:07:15 – is how we can take the application
00:07:17 – that's been created for us and remove
00:07:20 – some of the components that we don't
00:07:21 – necessarily need if we're building our
00:07:23 – own application effectively what we have
00:07:26 – is we have an application that includes
00:07:28 – some sample components that show you how
00:07:30 – you can use some of the capabilities
00:07:31 – such as cool back into your typescript
00:07:35 – to increment counters fetch data from a
00:07:38 – asp.net Web API service and so on we're
00:07:41 – going to remove those so that we're
00:07:42 – actually ready to go for building our
00:07:45 – own application so let me switch back
00:07:47 – over and let's see if our resources who
00:07:51 – completed so yes they have so we've
00:07:52 – actually finished downloading our
00:07:54 – dependencies so now I'm just going to
00:07:56 – start up visual studio by launching our
00:08:00 – CS proj so this will bring up visual
00:08:03 – studio and obviously it's opening up the
00:08:08 – solution it will do a check for us to
00:08:10 – make sure that we've got our
00:08:12 – dependencies downloaded so we should see
00:08:15 – that happen very quickly and then the
00:08:17 – application itself will start up if I
00:08:19 – hadn't pre-installed our NPM packages
00:08:22 – we'd see something down in the status
00:08:24 – bar and the it would be a little
00:08:26 – sluggish so I actually prefer to do it
00:08:28 – in the command line so now I'm just
00:08:30 – going to hit ctrl f5 so we can quickly
00:08:32 – see the sample application that we have
00:08:38 – installed so this is its spooling up its
00:08:43 – launching I is Express to host our site
00:08:47 – and here's our quick sample application
00:08:49 – we see we've got cranked bank here which
00:08:51 – is the title of the application but we
00:08:53 – have a bunch of components that we
00:08:54 – actually don't need
00:08:55 – to use so let me switch back to visual
00:08:58 – studio and I'm going to show how we
00:08:59 – delete some of these things before I
00:09:01 – jump into that I just want to call out
00:09:03 – startup CS inside startup CS is some of
00:09:08 – the routing magic on the MVC side of the
00:09:10 – house that maps to our home controller
00:09:12 – so we can deliver our first view via MVC
00:09:16 – and also introduces a spar fullback
00:09:18 – route so that everything else gets
00:09:20 – handed over nicely to our angular
00:09:22 – application if I jump into views very
00:09:25 – quickly we can see views homes are
00:09:27 – following the convention there's the
00:09:28 – index dot CSH to l this is the single
00:09:33 – page that will be served by our MVC
00:09:35 – application that will launch our spa
00:09:37 – replication you'll notice we have an
00:09:39 – appt element referenced here this points
00:09:42 – to our app component in angular we are
00:09:44 – also launching our compiled transpired
00:09:48 – minified client j/s to launch our
00:09:51 – application but here is the magic tag
00:09:54 – that actually fires off the server side
00:09:56 – pre-rendering of our application to
00:09:59 – speed application launch just going to
00:10:02 – jump quickly into controllers here's the
00:10:05 – home controller and as you can see it
00:10:06 – does virtually nothing other than turn
00:10:08 – around and say if we've got a request
00:10:10 – for the homepath we're going to return
00:10:12 – the index document which is the view
00:10:14 – which I just showed you which is going
00:10:15 – to launch our application and then we
00:10:17 – have a simple error action we have a
00:10:19 – sample data controller that actually
00:10:21 – we're not going to leverage as part of
00:10:22 – our sample so we're going to get rid of
00:10:24 – that and now we're going to move over
00:10:26 – into the angular world that's hosted
00:10:29 – inside this client app folder we have to
00:10:32 – type script files here that are
00:10:34 – responsible for supporting our hot
00:10:36 – module loading and actually starting up
00:10:38 – our application we won't play around
00:10:41 – with those too much but our application
00:10:42 – itself is inside our app folder here we
00:10:46 – have at module TS so this is the main
00:10:50 – configuration for our application module
00:10:52 – it includes a number of imports that
00:10:55 – bring in the components that we're
00:10:56 – leveraging we have our ng module
00:11:00 – decorator which is a specific type of
00:11:03 – function new to angular 2 that allows us
00:11:06 – to attach metadata to our at much
00:11:09 – as we can see we actually have very
00:11:10 – nothing at all inside our apt module
00:11:12 – it's all being configured through this
00:11:14 – declarative data here here's our
00:11:17 – bootstrap this tells us that we're going
00:11:19 – to be launching our app component as our
00:11:21 – startup component this is a list of the
00:11:23 – components that we're going to reference
00:11:25 – inside our module and down here we've
00:11:28 – got some path configurations that are
00:11:30 – set up the angular routing as we're
00:11:33 – going to be removing some of these
00:11:34 – things let's go ahead and do that so
00:11:36 – we're going to get rid of counter and
00:11:37 – fetch data we're going to come up here
00:11:40 – we're going to delete nav menu counter
00:11:42 – and fetch data here and we're also going
00:11:45 – to remove the imports for those as we're
00:11:47 – going to delete them from our system so
00:11:50 – we've deleted those extra components
00:11:53 – were referencing just the components we
00:11:54 – have so now we can jump in and expand up
00:11:56 – our components folder and we can see we
00:11:58 – have a counter directory we're going to
00:12:01 – delete that component we have a fetch
00:12:04 – data directory we're going to delete
00:12:05 – that component and we have nav menu
00:12:07 – we're going to delete that component now
00:12:11 – we quickly need to modify our HTML just
00:12:13 – to remove any references to things we
00:12:16 – have a router outlet this is where any
00:12:18 – of our routed components are going to
00:12:20 – render their output so we're going to
00:12:22 – take that one and we're going to move
00:12:23 – that up and we're just going to drop
00:12:25 – that inside a bootstrap container it's
00:12:28 – interesting to note that bootstrap is
00:12:29 – included as part of this template which
00:12:31 – allows us to create good UI without
00:12:33 – necessarily having to have a designer
00:12:35 – involved and you'll see that later on we
00:12:38 – look at the home in this home component
00:12:41 – we have a lot of extraneous data so I'm
00:12:43 – just going to strip this down into hello
00:12:45 – world and we're just going to save our
00:12:48 – application now we've been prompted here
00:12:50 – to create a solution file and that's a
00:12:52 – necessary step if we're going to persist
00:12:54 – our solution so we'll just save that so
00:12:57 – now if we switch back to our home page
00:12:59 – we see a number of errors related to how
00:13:02 – we've gone through basically hacked out
00:13:05 – components that the system was expecting
00:13:07 – at this moment in time if we refresh
00:13:14 – we get some additional errors which are
00:13:16 – related to the fact that our application
00:13:18 – has been dramatically changed whilst
00:13:20 – we're running so what I'm actually going
00:13:21 – to do is come back into my application
00:13:23 – in visual studio I'm hitting ctrl f5 to
00:13:27 – relaunch my application this should now
00:13:32 – start us up clean and we should have an
00:13:34 – hello world showing and of course it
00:13:39 – wouldn't be a live demo if we didn't
00:13:42 – have a change so I've just hit ctrl R to
00:13:48 – refresh my browser and remove the cash
00:13:50 – and now we're actually getting our
00:13:51 – application running as expected so we
00:13:53 – have hello world showing which is the
00:13:55 – output of a home component and that is
00:13:58 – being displayed in the position the
00:14:00 – router outlet inside this page okay so
00:14:04 – that's basically got us back to our
00:14:06 – clean point so in summary we've just
00:14:11 – demonstrated how we can quickly remove
00:14:13 – some components and get ready to
00:14:14 – actually create our application so now
00:14:17 – we're going to look at how we can take
00:14:20 – an HTML mark and bring it into angular
00:14:22 – so the scenario that we're in is that we
00:14:26 – have a designer who's created a set of
00:14:28 – HTML files and they said okay go ahead
00:14:31 – and build this we're going to review
00:14:33 – these HTML files and we're going to
00:14:35 – component size them then we're going to
00:14:36 – implement them in angular so i'll let
00:14:39 – you bask in the glory of this highly
00:14:41 – designed application yes I admit I did
00:14:44 – it with bootstrap what we're basically
00:14:47 – showing here is a sample application
00:14:48 – that looks somewhat like a bank account
00:14:50 – we have an initial view that is going to
00:14:52 – show us our account summary and we have
00:14:54 – a detailed view that's going to show the
00:14:56 – activities if I look at the account
00:14:59 – summary page we can break this down into
00:15:00 – a number of components we have a shared
00:15:03 – header component that we're going to use
00:15:04 – across both of our pages we have an
00:15:07 – account summary list component that is
00:15:09 – going to hold a number of instances of
00:15:11 – the account summaries they're going to
00:15:13 – show summary of each the accounts such
00:15:15 – as a checking account saving accounts or
00:15:17 – if we also look at the account detail we
00:15:20 – can see this breaks down in a similar
00:15:21 – fashion we have a shared header
00:15:23 – component we have an account detail
00:15:25 – component
00:15:26 – we're actually going to reuse our
00:15:28 – account summary component from elsewhere
00:15:30 – and we're going to have an account
00:15:33 – activity component now obviously as part
00:15:35 – of this demo I don't have time to create
00:15:37 – all of these things so I'll be dropping
00:15:38 – in some code to get us to that point at
00:15:40 – some point in time one thing other that
00:15:44 – I'm going to be using to help speed
00:15:45 – things along is a useful extension
00:15:47 – that's been published by Matt Mads
00:15:48 – Kristensen out on the video studio
00:15:50 – marketplace this is the angular 2
00:15:52 – snippet pack this contains as you can
00:15:55 – see a very large number of different
00:15:56 – snippets I'm going to be using is
00:15:58 – YouTube component i'll be using ng2 HTTP
00:16:01 – GET ng to pipe and some structural
00:16:04 – components ngf and ng for it's a great
00:16:07 – productivity boost to install this I'm
00:16:11 – also going to be trying to comply with
00:16:12 – the angular style guide this is
00:16:14 – documented out of this URL it provides
00:16:17 – guidance on naming your components and
00:16:19 – naming your files and also on how you
00:16:21 – would lay out your source within your
00:16:22 – application itself so without further
00:16:25 – ado let's jump into creating some of
00:16:27 – these components so one of the things
00:16:31 – that we mentioned was that we have this
00:16:33 – HTML mock site so I've opened this up I
00:16:36 – can actually bring that HTML into my
00:16:39 – visual studio environment and have a
00:16:40 – look and we can see that our designer me
00:16:43 – has marked up this source file so that I
00:16:46 – can easily see the HTML that relates to
00:16:48 – particular components the first one we
00:16:50 – have on this list is header so let's go
00:16:52 – ahead and create header now we're going
00:16:54 – to use convention here which is it each
00:16:56 – area we were actually going to create a
00:16:58 – folder to contain it so I'm going to add
00:17:00 – a new folder and I'm going to call this
00:17:03 – shared inside here i'm going to create
00:17:08 – another folder which is going to be for
00:17:09 – my header if i could spell it correctly
00:17:15 – now inside here i'm going to create two
00:17:19 – files i'm going to create a new item
00:17:21 – which is going to be an HTML file and
00:17:24 – using a convention i'm going to call
00:17:28 – this header dot component and leave the
00:17:33 – HTML extension and then going to add
00:17:37 – another file and this is going to be a
00:17:38 – typescript
00:17:40 – I press ctrl shift a to bring this up
00:17:43 – quickly and this is going to follow a
00:17:46 – similar convention it's going to be
00:17:48 – header again if I could spell it
00:17:51 – correctly doc component TS okay we've
00:18:00 – got default HTML in here so we're going
00:18:02 – to delete that for the time being and
00:18:04 – then we're going to go back into the
00:18:05 – header component and this is where I'm
00:18:06 – going to use my first snippet so ng to
00:18:09 – component tab tab so i'm going to call
00:18:19 – this shared header so this is the
00:18:21 – element that will refer to my HTML when
00:18:24 – i use this we have a inline template
00:18:28 – here well i've already created an
00:18:29 – external file so we don't care about
00:18:31 – this for the time being but now i'm
00:18:33 – going to name this class header
00:18:36 – component one of the great things that
00:18:39 – we have in visual studio is we've
00:18:41 – imported our component decorator here
00:18:45 – and so intel essence– now knows the
00:18:48 – properties that are available to me so i
00:18:50 – can press control space and i can see
00:18:52 – that i have a contemplatin you RL
00:18:54 – property that i can populate so what I'm
00:18:56 – going to do now is specify the path to
00:18:58 – my header component or HTML so what you
00:19:06 – can do very quickly is I'm just going to
00:19:07 – put a paragraph in here that says header
00:19:15 – so we know that that's there now in
00:19:18 – order to leverage this component I need
00:19:20 – to register it with in my app module so
00:19:24 – I'm going to come in here i'm going to
00:19:25 – create a new import statement i'm going
00:19:29 – to leave this empty for the time being
00:19:30 – from / and now what we can see is we
00:19:34 – actually get paths that are prompted for
00:19:36 – us the visual studio understands our
00:19:39 – layout here and so we know we're in
00:19:41 – shared we know we're in header and we
00:19:44 – know inside there is our header
00:19:45 – component if I now come back into here
00:19:48 – and I press control space again it tells
00:19:49 – us these are the exported components
00:19:51 – that are available in that sauce which
00:19:53 – are awesome so now I've got my header
00:19:56 – component imported I need to declare it
00:19:58 – so that it's available for use within my
00:20:00 – environment and can drop this in and now
00:20:04 – let's go ahead and change my app page so
00:20:08 – inside my app component this is where I
00:20:10 – have my router outlet that's going to
00:20:12 – show my routed elements but I want my
00:20:13 – header to be shown all of the time so
00:20:16 – I'm going to move that above here and
00:20:17 – i'm going to create my shared header
00:20:23 – component so i'm going to save that if i
00:20:26 – switch over to here and refresh hit ctrl
00:20:36 – f5 just to refresh my environment
00:20:45 – quick as a flash okay what did I do
00:20:52 – wrong here let's have a look at shared
00:20:53 – header let's come back into my header
00:20:55 – component my I said shared element look
00:21:00 – at that so there you go this is you can
00:21:02 – tell it's live so I save this and come
00:21:05 – back into my page refresh and her are so
00:21:14 – here we have our header up here and here
00:21:16 – is our content our home controller being
00:21:18 – display so now what we want to do is
00:21:21 – actually get our JavaScript in so I'm
00:21:24 – going to come into my JavaScript my HTML
00:21:28 – for my header so I'm going to copy this
00:21:30 – and I'm going to drop it into my header
00:21:32 – component so I'm just going to replace
00:21:33 – this save it and we see that immediately
00:21:38 – this is it refreshed I didn't hit ctrl R
00:21:41 – I didn't have to hit ctrl f5 or anything
00:21:43 – along those lines this is refreshed and
00:21:45 – showing exactly what it is that we wish
00:21:47 – to display but we are missing some
00:21:49 – images so this brings me to our ww root
00:21:52 – folder this is the actual base of our
00:21:55 – delivered web application and so in here
00:21:58 – this is where we would put assets
00:22:00 – associated with images and so on and so
00:22:03 – forth so I'm going to create an assets
00:22:04 – folder here and I'm going to go into my
00:22:07 – HTML mark i also have a fav icon that i
00:22:10 – can drop in that will replace the
00:22:12 – existing one and i can also go into
00:22:16 – assets and grab my logo to SVG and i can
00:22:20 – paste that into assets here so if i
00:22:25 – refresh my page because this doesn't
00:22:29 – cause a new translation to occur we
00:22:31 – won't actually your pick it up
00:22:32 – automatically so I refresh my page until
00:22:34 – we've got our logo and we've got our
00:22:36 – homepage here so that's an example of
00:22:41 – how simply we can actually pull in some
00:22:43 – HTML and get our start of mock out our
00:22:48 – componentry and actually start to build
00:22:49 – out our application what we would do
00:22:52 – right now is we would rinse and repeat
00:22:54 – this process for each one of the
00:22:56 – components that we have in place so
00:22:57 – rather than you watch me do
00:22:59 – and what I'm going to do is I'm going to
00:23:01 – drag in some components that I prepared
00:23:03 – earlier so I'm going to open this in
00:23:06 – file explorer and I've got my just HTML
00:23:10 – folder which is as I say my prepared
00:23:12 – components and I'm just going to grab
00:23:14 – these and I'm going to drop these in
00:23:16 – going to replace those files in the
00:23:19 – destination now what's interesting about
00:23:23 – this is our environment automatically
00:23:27 – refreshes that all of a sudden I now
00:23:29 – have additional folders for account
00:23:31 – summary account list account detail I
00:23:33 – have an account folder inside here I
00:23:36 – have all of the additional files that I
00:23:38 – just dropped in so rather than having to
00:23:40 – do a add to project trying to go on
00:23:42 – those lines this is monitoring the
00:23:44 – directory structure and bringing them in
00:23:45 – something else I should call your
00:23:47 – attention to is how it's nicely nested
00:23:50 – our TS files beneath our HTML files it's
00:23:53 – using a pattern matching there and if I
00:23:55 – was to add a CSS file as well you would
00:23:57 – see that that would nest nicely b*****
00:23:59 – below the HTML so we just dropped these
00:24:03 – things in let's refresh and as you can
00:24:07 – see this has already border our new
00:24:10 – component tree in and we've actually
00:24:11 – updated our display we're getting some
00:24:14 – of the interaction that we expected with
00:24:16 – our mouse over but we're actually not
00:24:20 – able to navigate anywhere so we very
00:24:23 – quickly started to flesh out these
00:24:25 – applications and just to prove that
00:24:26 – there's no smoke and mirrors going on
00:24:28 – here let's have a look at the account
00:24:29 – list component and we can see all it is
00:24:32 – is just HTML that we've dropped in and
00:24:34 – we don't have any magic going on behind
00:24:37 – the scenes in the TS file so it's just
00:24:39 – some static data that we've dropped in
00:24:41 – but what we would like to do is we've
00:24:45 – got our detail component but we actually
00:24:47 – don't have a way to traverse to or
00:24:49 – navigate to our detail component this
00:24:51 – moment in time so what we're going to do
00:24:53 – is add this to our route system so that
00:24:57 – we can actually go under display our
00:25:00 – routing is defined in our app module TS
00:25:02 – so let me bring that up so here are the
00:25:05 – existing routes that we had one thing
00:25:08 – you'll know is we've replaced the home
00:25:09 – route with an account route so that we
00:25:12 – go to our account list
00:25:13 – because we're not actually no longer
00:25:14 – need our home component but what I'm
00:25:16 – going to do now is add in an additional
00:25:18 – ramp and that's going to go to our
00:25:21 – account detail component so we've got
00:25:25 – detail is going to be the name of the
00:25:27 – realm but we also know that at some
00:25:29 – point in the future we're going to want
00:25:30 – to pass in the account ID so I'm going
00:25:33 – to make this a parameterize route that I
00:25:35 – can pass in the idea of the route of the
00:25:39 – account that I wish to show I've already
00:25:41 – imported the account detail up here and
00:25:43 – it's already declared so now all I need
00:25:46 – to do is bring this component in and
00:25:48 – drop it in here now I can save this and
00:25:54 – if I come up here and type in a rout of
00:25:58 – detail / 1 2 3 4 5 because I need an ID
00:26:10 – it should take us straight to our detail
00:26:12 – page which it does a little bit of
00:26:14 – thinking there so this is our detail
00:26:16 – page and I can hit back and we can see
00:26:18 – that the routing system is working well
00:26:20 – and a label moving us backwards and
00:26:22 – forwards between our two views but
00:26:25 – obviously the intent is that we would
00:26:27 – actually be able to navigate based upon
00:26:29 – clicking on one of these items so how
00:26:32 – are we going to go about doing that well
00:26:35 – in order to do that we actually need to
00:26:37 – integrate into our summary and respond
00:26:42 – to a click event so this is one of the
00:26:44 – first things I've talked about which
00:26:46 – require binding so I'm going to actually
00:26:48 – bind to the click event handler in my
00:26:52 – summary and whenever I click on it I'm
00:26:54 – going to invoke a function on my
00:26:56 – typescript navigate to detail if I open
00:27:04 – up my typescript if I create a function
00:27:10 – in here navigate to detail and just so
00:27:15 – we can prove that it's working i'm going
00:27:17 – to say alert and i'm going to show
00:27:20 – detail here i can save this so if i come
00:27:26 – in here now and i click on it up comes
00:27:28 – my alert that says detail so we know the
00:27:31 – magic is working with subscribing to the
00:27:33 – event and so on but actually i want to
00:27:35 – do something where I'm going to navigate
00:27:38 – so in order to do that I need to tie
00:27:40 – into the routing system so I need
00:27:42 – something like this dot router navigate
00:27:47 – and we're going to pass an array of
00:27:50 – parameters I know my route is detailed
00:27:53 – that's what I just created in my module
00:27:54 – and also now I'm supposed to pass in an
00:27:56 – ID so I'm going to put that in place but
00:27:59 – the challenge is how do I get hold of
00:28:01 – the router well the great thing about
00:28:04 – angular is it has a dependency injection
00:28:06 – system the router component is actually
00:28:09 – a core part of the system so that is
00:28:12 – already available and registered as part
00:28:13 – of dependency injection in an effect
00:28:15 – dependency injection says that an
00:28:17 – external container is going to be the
00:28:19 – responsible for the life cycle of the
00:28:21 – component that can be injected
00:28:24 – and it will look at components to see if
00:28:26 – they require an instance of that
00:28:27 – external dependency when they're
00:28:30 – constructed so I've kind of foreshadowed
00:28:33 – there that we can do this by turning
00:28:35 – around and adding a parameter to our
00:28:37 – constructor of type router and I've
00:28:40 – already included in here the import for
00:28:44 – router and inside here I would then
00:28:46 – create a private member member variable
00:28:50 – called router of type router as the type
00:28:54 – in typescript working for us and in here
00:28:56 – I would say this dot router is equal to
00:29:00 – the supplied router as part of the
00:29:02 – constructor that's a lot of typing of
00:29:05 – course and the great guys at the
00:29:07 – typescript group have worked out that
00:29:09 – why not shortcut all of this so we can
00:29:12 – just type private browser up here and
00:29:14 – that will do the same thing as creating
00:29:16 – a private router variable and will then
00:29:23 – make that available from the list dot so
00:29:25 – let's save this jump into my home page
00:29:31 – if I click on it now you can see I
00:29:33 – navigate to my account of course we're
00:29:39 – still showing static data inside here
00:29:41 – but at least we're able to navigate
00:29:42 – around and move between our components
00:29:44 – so that brings me back to the
00:29:46 – presentation so what I've quickly shown
00:29:54 – there is how it's relatively
00:29:56 – straightforward to create a number of
00:29:57 – different components and to import HTML
00:29:59 – in from a series of marks to very
00:30:03 – quickly flesh out the structure of your
00:30:06 – application I've also shown how you can
00:30:08 – create a simple route that we can pass a
00:30:10 – parameter across an ID that we can use
00:30:12 – at some point in the future for pulling
00:30:14 – in data I've also shown an output
00:30:18 – binding to enable us to respond to a
00:30:19 – click event on a div and I've shown how
00:30:22 – we can route via code and how we can
00:30:24 – leverage dependency injection to bring
00:30:26 – that router in what I'm going to talk
00:30:29 – about now is how we can start
00:30:31 – incorporating data into this rather than
00:30:34 – static HTML
00:30:37 – so the objective of this particular
00:30:40 – section is we're going to create some
00:30:41 – data classes we're going to remove the
00:30:44 – hard coded data in the HTML and then
00:30:46 – we're going to display some data using
00:30:48 – bindings and templates so before I jump
00:30:52 – into the code itself let's talk a little
00:30:54 – bit about binding you've got a couple of
00:30:56 – different types of binding that are
00:30:58 – available to us the first is
00:30:59 – interpolation and effectively
00:31:01 – interpolation evaluates expressions and
00:31:04 – you can tell interpolation because it
00:31:06 – has these double curly braces
00:31:08 – surrounding some form of expression for
00:31:12 – the first one here for example we have a
00:31:14 – count name so the outcome of this
00:31:16 – expression would be the values held in
00:31:19 – account name which in this scenario is
00:31:21 – Darren the second one shows that we can
00:31:24 – actually evaluate any JavaScript style
00:31:26 – expression so four plus four would
00:31:28 – evaluate 28 and that's what would be
00:31:30 – displayed there we have another
00:31:33 – capability in here which allows us to
00:31:35 – put a null guard in place so for example
00:31:37 – if account was a undefined trying to
00:31:40 – access the name property of an undefined
00:31:43 – object would create an error for us and
00:31:45 – that would break our templating and
00:31:46 – break our rendering so we can put this
00:31:48 – guard in place to prevent trying to
00:31:50 – evaluate that expression if the account
00:31:53 – is null there's actually other ways of
00:31:55 – doing this using structural ngf and so
00:31:57 – on and so forth to prevent us from even
00:31:59 – trying to evaluate expressions and I'll
00:32:00 – show that in a while input binding so
00:32:04 – we're using square braces here and this
00:32:06 – indicates that the value of the account
00:32:09 – property is going to be input into the
00:32:13 – property on the associated element and
00:32:16 – we'll be demonstrating that shortly
00:32:17 – we've already seen an example of output
00:32:20 – binding where we subscribe to the click
00:32:23 – event and that causes our navigate
00:32:24 – details function to be invoked there's
00:32:28 – another type of binding two-way binding
00:32:29 – that we actually won't be demonstrating
00:32:32 – as part of this but it's well known
00:32:35 – because of its the new money that people
00:32:37 – use to remember which order the braces
00:32:39 – go it's the banana in the Box binding
00:32:41 – where you have the square brace with a
00:32:42 – parentheses inside it which is upset
00:32:45 – essentially the banana in the box and
00:32:47 – that illustrates that we both input and
00:32:49 – output binding on a property
00:32:50 – so without further ado let's leap into
00:32:55 – starting to add data into our
00:32:57 – application so we're back in visual
00:33:03 – studio so before we can actually start
00:33:06 – showing data we have to have some way of
00:33:07 – have creating data and storing data so
00:33:11 – I'm going to go into my shared folder
00:33:12 – and I'm going to create a data type so
00:33:15 – this is going to be a new type script
00:33:17 – file and we're going to create account
00:33:20 – summary type so again we're following a
00:33:26 – naming convention here you're using
00:33:28 – dashes to split the words of the class
00:33:31 – name and with specifying the type of the
00:33:34 – file which happens to be type in this
00:33:35 – instance as part of this so now we have
00:33:38 – our account summary so let's open that
00:33:40 – up we're going to create a class that's
00:33:42 – going to be available elsewhere so we're
00:33:43 – going to export it so count summary and
00:33:48 – we're going to have a number of
00:33:49 – properties on here we're going to have
00:33:50 – account number which is typed as a
00:33:54 – string we're going to have tape which is
00:33:58 – going to be an enumeration type which we
00:34:01 – haven't created yet so we'll put that in
00:34:03 – place we'll come back to that we're then
00:34:05 – going to create the name of the account
00:34:06 – which is going to be a string and then
00:34:09 – we're going to have the balance of the
00:34:10 – account which is going to be a number
00:34:12 – that will make sense so let's quickly
00:34:15 – create the enumeration so we're going to
00:34:19 – add a new type script file this is going
00:34:23 – to be account type II nam TS make sure
00:34:31 – we've got that so again we we're
00:34:33 – describing what i type is here we're
00:34:35 – going to export the enum it's going to
00:34:37 – be an enum looks account type we are
00:34:45 – then going to add in here the types of
00:34:47 – account so we've got checking we've got
00:34:49 – savings and then we have credit so if I
00:34:57 – come back into my account summary
00:35:00 – I wish I had a dollar for everytime i
00:35:02 – double-clicked on something and ended up
00:35:04 – trying to move it in my in Visual Studio
00:35:05 – imports we're going to import our
00:35:09 – account type and then we're going to
00:35:14 – bring it in from the account summary
00:35:17 – type oh I put that in the wrong place
00:35:21 – let's put that into account summary
00:35:27 – there we go I know there's many of you
00:35:34 – shouting it's in the wrong place out
00:35:36 – there fortunately I heard you apparently
00:35:37 – okay so we bought in account and I've
00:35:44 – brought in the wrong type so now it
00:35:45 – needs to be typed inna that's the
00:35:49 – wonderful thing about intellisense and
00:35:50 – these squigglies and so on tells you
00:35:52 – when you're going wrong so it makes it
00:35:54 – much easier ok so we've got our account
00:35:58 – type and we've got our account summary
00:36:01 – now we want to leverage that data so
00:36:03 – let's go back into our accounts list
00:36:05 – component and this is where we're going
00:36:08 – to if we look at the HTML we have a list
00:36:11 – of cash accounts and we've hard-coded
00:36:13 – that we're going to show two of our
00:36:16 – account summaries and down here with
00:36:18 – hard-coded that we're showing one of
00:36:19 – those well that doesn't make any sense
00:36:21 – so we want to work out some way of
00:36:24 – having the system actually generate
00:36:26 – these based upon what we need so we want
00:36:28 – something like and I'm going to use
00:36:32 – another slip snippet here in g2 we're
00:36:35 – going to use the ng for structural comp
00:36:37 – construct which says we can loop through
00:36:41 – every account that since a cash accounts
00:36:45 – and it's going to repeat this element
00:36:49 – for every instance it discovers within
00:36:52 – the cash accounts and the same thing
00:36:55 – down here that we're going to do this
00:36:58 – inside the credit accounts but wait a
00:37:02 – minute you say we don't have any credit
00:37:04 – accounts right now you're absolutely
00:37:06 – right so let's create those so we're
00:37:07 – come into account list and we're going
00:37:10 – to import
00:37:13 – you know we need account summary because
00:37:16 – that's our data type and I spell it
00:37:19 – correctly will be even more successful
00:37:20 – and we're going to bring that in from
00:37:25 – our shared account summary type we also
00:37:32 – going to need our type because we're
00:37:34 – going to want differentiate between the
00:37:36 – types of the accounts and so we're going
00:37:39 – to bring in our enumeration okay so now
00:37:46 – let's create some member variables so
00:37:48 – we'll do call these cash accounts and
00:37:51 – that's going to be a type account
00:37:54 – summary array and we're going to have
00:38:00 – credit accounts there's also going to be
00:38:07 – an account summary array
00:38:12 – so if you view our page right now we can
00:38:15 – see that this is empty makes sense we
00:38:18 – haven't put anything inside our array so
00:38:19 – all of this stuff is trying to hang
00:38:20 – together but obviously that's not an
00:38:22 – ideal display so maybe what we can do is
00:38:24 – we can do use ngf to show something in
00:38:27 – case this occurs so maybe I'm going to
00:38:29 – put a paragraph in here that says no
00:38:32 – cash accounts and I'm going to control
00:38:36 – whether that's displayed based upon
00:38:38 – another structural directive which is ng
00:38:40 – if so use a snippet it really doesn't
00:38:44 – save me that much but what I'm saying is
00:38:45 – if we have cash accounts as undefined
00:38:49 – we're going to display that and i'm
00:38:52 – going to copy this down here and i'm
00:38:53 – going to drop this in here and i'm going
00:38:56 – to say if credit accounts I'm not
00:39:02 – defined we're going to say no credit
00:39:03 – accounts okay so we've got those set up
00:39:11 – let's have come back in here and we can
00:39:13 – see that the magic is just working that
00:39:14 – because those are undefined we're
00:39:16 – displaying these things okay well let's
00:39:18 – get some test data to actually inject in
00:39:21 – there so I'm going to create this in the
00:39:24 – constructor I point this out because
00:39:25 – this is actually a bad idea creating
00:39:28 – content in the constructor means that
00:39:30 – any time your component is being created
00:39:33 – it's going to be injected into your
00:39:36 – component if you're running unit tests
00:39:40 – you're having the static data created
00:39:42 – there's actually lifecycle events on an
00:39:43 – it that will leverage once we're
00:39:45 – actually doing this more properly but
00:39:46 – for the time being let's quickly create
00:39:48 – this so we're going to cash account
00:39:51 – equals going to create a new array and
00:39:55 – we're going to create a new object now
00:39:57 – the great thing about all of this is
00:39:59 – that we have intellisense it understands
00:40:04 – because I've declared what cash account
00:40:05 – is it and this should be this cash
00:40:07 – account that's what the squiggly is
00:40:09 – telling me because I've declared that
00:40:12 – cash account is an array or cash
00:40:14 – accounts goodness is an array of
00:40:17 – accounts summaries it knows that the
00:40:18 – objects is expecting should be a account
00:40:22 – summary so I immediately get intelli
00:40:24 – sense to allow me to create
00:40:26 – the correct shape of object that's the
00:40:28 – wonderful thing about the type system
00:40:29 – with in typescript so the account number
00:40:32 – let's call this one two three two three
00:40:33 – four four five six seven and we're going
00:40:38 – to have a balance and we're going to
00:40:42 – give it a balance of one two three four
00:40:43 – point five six we're going to give it a
00:40:46 – name of let's just call this checking
00:40:50 – and we're going to give this a type of
00:40:54 – account type dot checking so it copy
00:41:02 – this and let's do different numbers here
00:41:07 – two three four four five six one two
00:41:16 – three or four and we'll make this one
00:41:17 – 5234 this is going to be savings and
00:41:25 – we're going to have this as a savings
00:41:26 – type and we're just going to quickly
00:41:30 – rinse and repeat cleat one of these
00:41:32 – things this is going to be credit
00:41:34 – accounts and let's put a credit card
00:41:42 – style number in here so one one one dash
00:41:44 – two to two dash three three four four
00:41:48 – four and we call this credit and we're
00:41:56 – going to say this is a type credit
00:41:57 – focused all that correctly okay so we've
00:42:04 – got that now if you flick back over to
00:42:05 – here bang all of a sudden we now have
00:42:08 – these instances displayed but they're
00:42:09 – actually not showing the right data
00:42:11 – because we're not not passing it into
00:42:13 – our summary component at all so let's
00:42:15 – quickly look at how we can approach this
00:42:17 – if we come back into our account HTML
00:42:20 – we've got account summary here and we've
00:42:23 – got this account variable that's being
00:42:25 – said but we're actually not consuming it
00:42:26 – anywhere so let's assume that we're
00:42:29 – going to have an input on our account
00:42:32 – summary that's going to take that
00:42:35 – account value
00:42:37 – and we have the same down here so now
00:42:48 – what we've got is we're passing in a
00:42:49 – parameter but that's causing a problem
00:42:51 – because we actually don't have a
00:42:53 – property on account summary that accepts
00:42:55 – this so let's jump to account summary
00:42:57 – and rectify that so the first thing
00:42:59 – we're going to do is we're going to
00:43:01 – import the input and every time I type
00:43:04 – in out we type input and we're going to
00:43:07 – create a property on here that's going
00:43:10 – to be decorated with the at input
00:43:14 – decorator and this is the account
00:43:17 – summary propriety and that is going to
00:43:21 – be a type account summary so we know
00:43:26 – we're going to need to import that so
00:43:28 – let's import account summary and we're
00:43:36 – importing that in from our shared
00:43:44 – summary type so now we know we've got
00:43:50 – the count summary and if we come into
00:43:55 – our HTML although this is saved so we
00:44:01 – can see that was still showing rubbish
00:44:03 – basically so let's change this now so
00:44:05 – now we're going to start showing this is
00:44:07 – going to be our name so let's use our
00:44:10 – interpolation binding and we're going to
00:44:12 – show account summary dot name save that
00:44:17 – look at our home page
00:44:24 – hit refresh there is a little bit slow
00:44:28 – and picking up so we can now see that
00:44:29 – checking savings and credit being
00:44:31 – displayed so we can jump down to here
00:44:33 – and show account summary dot account
00:44:44 – number save that and here we can drop in
00:44:51 – account summary balance okay so now we
00:45:02 – can see we're actually getting live data
00:45:03 – shown in here I hold on just a second
00:45:05 – we're showing all of the digits of our
00:45:07 – account number and in our demo app
00:45:21 – you know a demo app he says repeating
00:45:23 – himself we are showing just the last
00:45:27 – four digits let's bring it back up again
00:45:29 – so we're just showing the last four
00:45:31 – digits and we're also showing a currency
00:45:34 – formatted output for our balance whereas
00:45:37 – in our application itself we're just
00:45:39 – showing the raw numbers so let's show
00:45:40 – quickly how we can go about doing this
00:45:42 – so what we're going to do now is we're
00:45:45 – going to quickly add in a formatter so
00:45:49 – if we look at our balance we're going to
00:45:51 – use a built-in pipe and the purpose of a
00:45:54 – pipe is to transform output into a new
00:45:56 – format and we actually have a built-in
00:45:58 – currency type that takes a parameters
00:46:03 – and it uses a colon to separate it and
00:46:04 – we're going to say we're going to use US
00:46:06 – dollars here we're going to say true we
00:46:08 – want to show the symbol not the string
00:46:11 – and we're going to supply a format which
00:46:13 – is we're going to show a minimum of one
00:46:15 – integer element we're going to show a
00:46:17 – minimum of two fractional components and
00:46:21 – we going to shower maximum to fractional
00:46:23 – component so if I do a quick save on
00:46:25 – here what we can then see is we've got
00:46:29 – updated and we're now showing our
00:46:30 – currency we have a desire to actually
00:46:37 – reformat our account account number here
00:46:40 – so we actually want to have a pipe that
00:46:43 – would take this and actually strip out
00:46:45 – the last two so i'm going to show you
00:46:46 – very quickly how we can create a custom
00:46:48 – pipe component so again another dollar
00:46:51 – i'm going to add a new item type script
00:46:56 – file and in this type script file it's
00:47:00 – going to be
00:47:03 – we're going to cool this format dash
00:47:10 – account number dot pipe and we're going
00:47:18 – to use another of our snippets again
00:47:21 – another dollar in g2 won't use pipe so
00:47:27 – we get creating our pipe and our pipe is
00:47:29 – going to be short name format format
00:47:35 – account number and we're going to a
00:47:41 – class name is going to be format format
00:47:47 – account number we know we're actually
00:47:52 – gonna pass in a type string to our
00:47:54 – transform method we don't need to pass
00:47:57 – in any additional parameters and we're
00:47:59 – going to return a type of string
00:48:07 – so we're going to quickly put a quick
00:48:09 – garden here that says if the value is
00:48:14 – undefined we're just going to return an
00:48:16 – empty string and then we're going to
00:48:22 – return ellipses plus and then we're
00:48:30 – going to have a ternary expression that
00:48:31 – says if the value length is greater than
00:48:35 – 4 then we're going to return the value
00:48:39 – got sub string value length minus 4
00:48:46 – otherwise we're just going to return the
00:48:50 – value because it's less than four
00:48:51 – characters long anyway so we're going to
00:48:54 – drop that in now we need to make sure
00:48:55 – that we go and import and declare it
00:48:57 – inside our module goodness gracious me
00:49:07 – just hit enter okay so now what we're
00:49:11 – going to do is we're going to import
00:49:12 – that pipe and we're going to make it
00:49:17 – available so the pipe is located out in
00:49:20 – the shared location so it's in
00:49:27 – components shared format account number
00:49:32 – pipe have that there and we're going to
00:49:36 – import our account number pipe we're
00:49:43 – going to declare it make it available
00:49:44 – and then we're going to remember that
00:49:51 – our name is format account number pipe
00:49:55 – so we come back up into our summary
00:49:57 – component and then we're going to add
00:49:59 – this onto our account number and we've
00:50:07 – now truncated our account so this shown
00:50:10 – how we can do binding but what we
00:50:12 – haven't done is yet is we haven't bought
00:50:13 – in any data from the server side so let
00:50:17 – me show you how that we can do that
00:50:20 – so rather than the right a whole bunch
00:50:22 – of code here I have prepared our data
00:50:29 – scenario and so what I'm going to do is
00:50:32 – come back into our app and I'm going to
00:50:34 – drop in components and app modules and
00:50:39 – I'm going to paste these in and replace
00:50:40 – those files and so what we've done here
00:50:46 – is we've actually integrated a bunch of
00:50:48 – components that are going to interact
00:50:50 – with our service we've created a website
00:50:54 – a service component that we're
00:50:56 – leveraging inside our typescript inside
00:50:58 – our angular application that is going to
00:51:01 – use HTTP to pull down our response and
00:51:04 – map it map the JSON as that and cast it
00:51:07 – as an account summary array so we can
00:51:09 – inject it back into our components we've
00:51:11 – also got the ability to get details
00:51:13 – which will cover it in a little while in
00:51:16 – order to achieve that we've had to
00:51:18 – create the ability to inject our account
00:51:22 – service so what we've done is we've
00:51:24 – added a provider's element to our ng
00:51:27 – model decorator and on our app module
00:51:31 – noun understands that account service is
00:51:34 – available for injection that is being
00:51:36 – leveraged inside our account list
00:51:40 – component using the same constructor
00:51:43 – injection that we talked about before
00:51:44 – hand so now what we have is we're going
00:51:47 – to cool on our account service get
00:51:49 – account summaries we're going to get
00:51:51 – those accounts and we're going to filter
00:51:53 – based upon the type and load them into
00:51:55 – our cash accounts and that's going to
00:51:57 – bring those things in but what we're
00:51:58 – missing is a Web API that's going to
00:52:01 – satisfy this requirement so if we come
00:52:04 – over to our controllers what we're going
00:52:06 – to do is we're going to add a new
00:52:07 – controller and I'm going to search for
00:52:10 – the web api controller and we're going
00:52:16 – to add this as a bank controller
00:52:21 – I don't need any of these existing
00:52:26 – routes in here but what we've got here
00:52:29 – is this is basically saying that if we
00:52:33 – access a route of API / bank then this
00:52:38 – controller is going to be addressed what
00:52:42 – we're now going to do is add in our
00:52:44 – server snippets so we're going to bring
00:52:48 – in some types so these types actually
00:52:51 – align with the types that we have on our
00:52:54 – angular client side so we've got account
00:52:59 – summary as you can see that's very
00:53:00 – familiar account transaction that shows
00:53:02 – on the detail account detail and we also
00:53:06 – have the account type enumeration we
00:53:09 – also are going to have the get account
00:53:11 – summary method so we're not actually
00:53:14 – going to connect to a database here
00:53:15 – we're going to have some static data
00:53:17 – declared in our service but again this
00:53:18 – looks very similar to what we had in our
00:53:21 – account list component and so this get
00:53:25 – account summary is returning an object
00:53:27 – result of account summary the reason
00:53:29 – we're returning object result is it also
00:53:31 – allows us to return things such as not
00:53:32 – found if we run into situation where we
00:53:35 – request IDs of a component that's not
00:53:37 – already available to us we will also
00:53:41 – bring in the get account detail method
00:53:43 – so this one is a little bit more
00:53:47 – complicated it just creates or some
00:53:49 – random transactions that we can display
00:53:50 – so because we've now changed the server
00:53:54 – side we actually do need to compile and
00:53:56 – build this particular application so
00:53:59 – that's sitting there up and running hit
00:54:01 – ctrl f5 and bring it up and run
00:54:08 – so now we're starting up that
00:54:10 – application and now we can see we're
00:54:15 – actually returning values from the
00:54:17 – server we've got the server effects that
00:54:19 – we put on there that's the day that's
00:54:20 – coming from the server we can click into
00:54:22 – here and we're now getting our list of
00:54:24 – transactions they've been randomly
00:54:25 – generated so that's showing how we can
00:54:28 – integrate our data backwards and
00:54:30 – forwards I just want to dive quickly
00:54:31 – into the service to talk a little bit
00:54:35 – about promises and observables so inside
00:54:39 – our accounts service what we have is
00:54:42 – we've got this HTTP GET which we're
00:54:44 – getting injected into us from the
00:54:46 – angular environment this is our api path
00:54:49 – to get the account summaries and you've
00:54:50 – seen how that maps into our controller
00:54:53 – this map as I say takes the response and
00:54:57 – projects it as a type account summary
00:54:59 – we're bringing that in and then
00:55:03 – basically we are leveraging the to
00:55:06 – promise operation to convert our
00:55:09 – observable to a promise I just have a
00:55:11 – practice where I prefer to have a
00:55:13 – service leveraging observables and
00:55:17 – return promises back to my UI components
00:55:20 – we're importing reactive extensions here
00:55:23 – right now and that's what allows us to
00:55:25 – do this map backwards and forwards so
00:55:29 – that in a nutshell is how we actually
00:55:30 – integrate the data into our application
00:55:32 – what I would like to show is how we can
00:55:35 – very quickly deploy this out to Azure so
00:55:38 – if I jump through to my Azure deploy so
00:55:44 – we've got a number of different options
00:55:47 – available to us to deploy our
00:55:48 – application out to Asia we can use
00:55:50 – continuous integration and CI builds and
00:55:53 – they just can be supported through
00:55:54 – visual studio com if you have your
00:55:56 – project on there you can attach it to
00:55:58 – monitor a github repository or any sort
00:56:01 – of git repository to be honest or even
00:56:03 – in one on visual studio and it will
00:56:06 – detect changes and automatically push
00:56:07 – those out you can also actually
00:56:09 – configure local get deploy that you
00:56:11 – could add your as your site as a remote
00:56:14 – on your local get and you could do a
00:56:17 – push to that and that would deploy it or
00:56:18 – you can do a direct published from
00:56:20 – Visual Studio
00:56:21 – that's what I'm going to demonstrate
00:56:22 – right now so I'm in my solution if I
00:56:29 – right click on my crank back Bank
00:56:31 – project i have this publish option if i
00:56:34 – select publish it's going to bring me up
00:56:37 – this UI it's going to say do I want to
00:56:40 – do I is ftp folder and so on well I'm
00:56:43 – actually going to deploy through a month
00:56:45 – at Microsoft Azure app service I'm going
00:56:47 – to slap that and I'm going to hit
00:56:48 – publish I've got create new selected so
00:56:51 – this is going to reach out and look at
00:56:55 – my subscription and it's also going to
00:56:57 – generate for me an app name now I'm
00:56:59 – going to just run with this because this
00:57:02 – is basically perfectly fine for this
00:57:04 – scenario but it's pulled down my
00:57:06 – subscription and it's also pulled down a
00:57:08 – number of default resource groups and so
00:57:10 – on I do have the option of creating new
00:57:12 – resource groups if I want and also a new
00:57:16 – service plan so I could select free if I
00:57:19 – wanted to a free service plan or
00:57:20 – whatever but I've already prepared one
00:57:22 – so I'm going to go into west central
00:57:24 – plan as an example this is going to
00:57:27 – create my deploy profile so it's pulling
00:57:33 – down all the various data the various
00:57:35 – keys necessary to be able to transfer
00:57:37 – this across to Asia always seems to run
00:57:42 – quicker when you're not live and now
00:57:46 – we've created a tower published profile
00:57:48 – and it's actually in the process now
00:57:49 – I've creating a build and this is going
00:57:51 – to use if you recall before talking
00:57:53 – about webpack where we have a production
00:57:54 – deploy this is running through the
00:57:56 – production deploy scenario so it's going
00:57:58 – to push out an app that's representative
00:58:00 – of our production environment so now
00:58:04 – it's publishers started we can see it's
00:58:06 – actually running through on the output
00:58:07 – here the packages that is pulled down it
00:58:10 – should be doing a build should be
00:58:13 – reaching out them starting to upload to
00:58:15 – Azure and we'll start to see some of
00:58:16 – that activity shortly
00:58:23 – whilst it's doing that let me quickly
00:58:26 – rego and recap as a whole we've covered
00:58:37 – an awful lot of ground in this
00:58:38 – particular session we showed how we
00:58:40 – could get started with some essential
00:58:41 – tools we showed how you could refresh
00:58:43 – the template and actually start with a
00:58:46 – pretty clean environment we've shown how
00:58:48 – you can take HTML mocks and bring them
00:58:51 – across into angular and we've shown how
00:58:53 – you can incorporate data services and of
00:58:56 – course here we go my publishers just
00:58:57 – succeeded and it's actually bringing up
00:58:59 – the application in Asia obviously knew I
00:59:02 – wanted to show that over and above my
00:59:04 – presentation quick as a flash obviously
00:59:09 – the initial startup is always the
00:59:11 – longest and here we are here's our app
00:59:15 – out running on Asia the navigation the
00:59:18 – data generation everything's working as
00:59:20 – your side so it's as simple as that to
00:59:22 – deploy to measure deploy to Asia as
00:59:26 – we've just demonstrated and obviously
00:59:28 – we're wrapping up right now so I hope
00:59:31 – this gave you some insight into the
00:59:32 – value and power that the angular spa
00:59:35 – template brings to developing
00:59:37 – applications and how it's very very easy
00:59:39 – to create an angular application that's
00:59:41 – hosted within an asp.net MVC core
00:59:44 – application and how you can easily live
00:59:46 – leverage ASB core web AP is as part of
00:59:51 – your angular application I hope this is
00:59:53 – useful to you have a good day


Video Url:
http://youtu.be/RPsXD9yPc9E

Comments

comments