Consume Rails API (JSON) with Angular 2 Front-end App – 3/3 [w/ subs]



00:00:00 – so in the previous video were able to
00:00:03 – consume Kairos API of jet the JSON
00:00:08 – objects that was purchased by Rios was
00:00:12 – able to consume that in angular2
00:00:14 – application so we've been able to
00:00:17 – successfully stout the list of post
00:00:21 – which was supplied by rails and now in
00:00:25 – this video we're going to be working on
00:00:27 – routes and having disposed to show using
00:00:33 – the Heidi on their own page on their own
00:00:36 – pages so say for example displaced as an
00:00:40 – ID of one we need to be able to click on
00:00:45 – this post and avid show and its own page
00:00:48 – that we in future videos we'll be able
00:00:52 – to walk on it may be commenting on each
00:00:56 – of this post and also editing each of
00:00:59 – this post
00:01:00 – so let's work on the show action of this
00:01:05 – post's now in this video so the first
00:01:10 – thing we need to do is to open to other
00:01:12 – applications and sublime test
00:01:20 – I decided to put them in one single
00:01:22 – workspace for easier navigation
00:01:37 – and I will never defended the rules API
00:01:40 – project for their in the app and inside
00:01:43 – the controller we create a short action
00:01:47 – for our posts but will create a show
00:01:50 – method and then render the post
00:01:58 – now we create a private method to say
00:02:00 – the poster
00:02:04 – the name of the method will be called
00:02:05 – set post what this does is it square is
00:02:10 – the database with the ID of each
00:02:13 – particular post twenties click or needed
00:02:18 – the next thing we do is set before
00:02:20 – action filter which ensures that the
00:02:23 – post is set before an action in the
00:02:26 – controller is initialized in our case
00:02:28 – the show action
00:02:35 – now that we're done with the show action
00:02:37 – let's close out of the API application
00:02:39 – and go back to angle application
00:02:46 – we're going to the post service does the
00:02:48 – TS file and create a function to place a
00:02:52 – call to the show action and rails
00:02:55 – application or use the idea of which
00:02:58 – post to play the cultural particular
00:03:00 – post
00:03:12 – once the getpos function is created to
00:03:15 – create a new file let's name it
00:03:17 – post-show component this is where we're
00:03:20 – going to be using the guest post
00:03:21 – function that we just created in the
00:03:24 – post service and just like any other
00:03:25 – companies in angular2 application we're
00:03:28 – going to need some inputs so let's copy
00:03:31 – that from our post least component that
00:03:33 – we created before winter important my
00:03:35 – library from the umbilical for de it is
00:03:38 – called input and input is the decorator
00:03:41 – used inside of a child component that
00:03:42 – allows data to flow from parents
00:03:45 – component to child component in this
00:03:47 – library input from the anger out of
00:03:49 – order is activated route and programs
00:03:52 – activity drought contains the
00:03:54 – information about the route associated
00:03:57 – with a compliment loaded in an outlet
00:03:59 – while the program's is an observable of
00:04:03 – the matrix parameters scoped to this
00:04:06 – world
00:04:12 – so once all the important done will
00:04:15 – create a company in the carrito expert
00:04:17 – the class with the name post-show
00:04:19 – component and implement the on init
00:04:22 – method and also with the selective
00:04:25 – post-show and when initialize the engine
00:04:29 – in it
00:04:30 – declare an ID variable for our post ID
00:04:33 – and around ID and create a constructor
00:04:36 – for the HTTP mode the routes and post
00:04:41 – service and now go to the post for their
00:04:45 – and create a new file its name it goes
00:04:48 – to show that b**** that component HD mo
00:04:51 – clothes out of that for now and come
00:04:54 – back to it later and i would create a
00:04:57 – new component we need to import it in
00:04:59 – the app model the TS file so now we're
00:05:02 – going into the app that model ts file
00:05:04 – and input the posture component that we
00:05:07 – just created and added as part of the
00:05:09 – declarations of application
00:05:14 – what that is don't we save update is out
00:05:17 – of that far i'm going to the app routing
00:05:19 – model to activate the route for the
00:05:21 – post-show company we also need to import
00:05:23 – the post your compliments so let's just
00:05:25 – quiet and copies from the app that
00:05:26 – Moodle TS file after the posture
00:05:29 – component input that we said that for
00:05:32 – closeout and then go back to the engine
00:05:34 – in its model to finish up the
00:05:37 – initialization inside eng only need
00:05:40 – lifecycle oak which is the problems of
00:05:42 – sellable to extract the ID parameter
00:05:45 – value from the activity route service
00:05:47 – and use the poor service refresh the
00:05:49 – post with that ID
00:05:52 – the post ID is a number of parameters
00:05:55 – are always strength so we commend the
00:05:59 – route parameter value to a number with
00:06:01 – the JavaScript plus up rado
00:06:04 – we're starting to get each piece from
00:06:06 – the post service so we're going to use
00:06:08 – the method that we created area they get
00:06:10 – post and we'll get hard this post and
00:06:12 – save it in this variable called post
00:06:14 – request
00:06:28 – and now is the perfect time to use the
00:06:30 – input the Creator you remember we
00:06:33 – imported that earlier from the angular
00:06:35 – core library whenever a nested component
00:06:38 – wants to receive input from its
00:06:40 – component its most explosive properties
00:06:42 – yesterday to an input decorator and this
00:06:45 – exposé property then gets pine to a
00:06:47 – value in the parent company different
00:06:50 – components in this situation is going to
00:06:52 – be the post least component now we need
00:06:55 – to navigate into the post components
00:06:57 – well we'll create a function we named it
00:07:00 – go to show and passing a parameter of
00:07:03 – post which were then used to navigate to
00:07:05 – the post page a good show measured
00:07:08 – navigate speech then yr this matter with
00:07:11 – an event by need to post this using the
00:07:14 – HTML and attack
00:07:21 – we also need to import around them we do
00:07:23 – from the router library and also
00:07:25 – declared as part of the constructor
00:07:28 – now that is done let's navigate to the
00:07:31 – course list component that HTML file we
00:07:34 – got this all out and put in an uncle
00:07:36 – attack inside the ankle tag we're going
00:07:39 – to use the go to show function and bind
00:07:42 – it to a click event
00:07:48 – now we can test the template from before
00:07:52 – into our uncle tab
00:07:56 – and I want to click on the post in the
00:07:58 – post list page sticks to the particular
00:08:00 – page of the post so let's take this out
00:08:03 – by creating a template in the post-show
00:08:04 – component hdmi far as a sample just show
00:08:08 – the idea where reports and Rachel
00:08:13 – so let's go ahead and test it out in the
00:08:15 – browser so we refresh the browser and we
00:08:18 – click on any post it should never get to
00:08:20 – the particular purpose speech but it
00:08:22 – doesn't work let's go back and check
00:08:24 – what's wrong
00:08:25 – and when you check your text files and
00:08:27 – you see that everything is right
00:08:29 – contestant to do is to go back to the
00:08:31 – terminal and check the error we have
00:08:33 – checked there and we found out that the
00:08:35 – name of the CSS file is wrong
00:08:38 – it cannot find the post that CSS far and
00:08:41 – now as you can see the right name of the
00:08:42 – CSS files post that component the tss
00:08:45 – not post that CSS so let's go ahead and
00:08:48 – changing it in the post show that
00:08:51 – component the tea as well now let's say
00:08:53 – we're never get back to the browser
00:08:55 – everything to work correctly now so i'll
00:08:57 – click on the post style she could cause
00:08:59 – the page of the post
00:09:03 – and that's what is you everything works
00:09:06 – right on your side if you work at
00:09:08 – exactly the same way in the next video
00:09:10 – we're going to work on creating new
00:09:12 – posts using angle of forms we're going
00:09:14 – to try out template drilling driven
00:09:16 – forms and reactive driven informs
00:09:19 – everything is going to work right and
00:09:21 – we're going to create the port from the
00:09:22 – angular front end and save it in the
00:09:24 – Rose API so see you in this video thanks
00:09:27 – for watching subscribe to my channel and
00:09:30 – back


Video Url:
http://youtu.be/-BVX_NiQ0Fk

(Visited 8 times, 8 visits today)

Comments

comments