AngularJS ui router nested views [w/ subs]

00:00:00 – this is part 51 of Anglia story out in this video we'll discuss nested states
00:00:06 – and views
00:00:08 – one of the benefit of using a white outer over and out is that it provides
00:00:13 – support for nested states and views nested states have parent-child
00:00:18 – relationship
00:00:20 – this means the parent state properties are available for use in all the changes
00:00:25 – states there are several methods for creating nested states on the slide we
00:00:31 – see two of the common methods one way to create nested States is by using dot
00:00:36 – notation in this example we have a state and the name of the state is student
00:00:42 – parent and we have another state here in the name of this state is students and
00:00:48 – notice to the name of the state
00:00:50 – we have prepended its parent state name using dot notation so in this example
00:00:56 – student parent is the parent state and students is the change this tape
00:01:02 – another way to nest States is by using the parent property with the parent name
00:01:08 – as string so in this example notice they're using parent property and the
00:01:13 – value for this parent property is the name of its parent
00:01:17 – so again in this case student parent is the parent state and students is the
00:01:23 – child state
00:01:25 – let's understand these nested states and views with an example
00:01:30 – so here is what we want to do we have our students page and studentdetail
00:01:34 – spade students page lists all the student names which are hyperlinks and
00:01:39 – then we click on a student named student details they just going to display that
00:01:44 – specific student details
00:01:46 – so what is common between these two pages the common part is that both the
00:01:51 – pages are displaying student totals at the top
00:01:56 – total main students total female students and grand total
00:01:59 – so we want the parent state to be responsible for displaying the student
00:02:05 – totals
00:02:06 – and the change the states will be responsible for displaying the
00:02:09 – respective child views content in this case list of students and in student
00:02:15 – details case student specific details
00:02:19 – so let's see how to achieve this the first step to achieve this is to create
00:02:23 – a c-sharp class which is going to act as a container for these totals so that's
00:02:29 – our first step
00:02:30 – so we have total property males and females property within student totals
00:02:35 – class
00:02:35 – so let's go ahead and create this class so let slip to your studio
00:02:39 – so i'm going to right click on the project and add a class i'm going to
00:02:46 – name it
00:02:46 – student totals in the interest of time I have already typed the required code so
00:02:56 – i'm going to copy that and paste it within our student totals class so we
00:03:01 – have three properties here
00:03:02 – total males and females that's a first step
00:03:05 – the second step is to create a web service method which is going to
00:03:09 – retrieve student portals from or database table
00:03:13 – so let's add this web service method in the interest of time I have already
00:03:17 – typed the required code so i'm going to copy this from our notepad and paste it
00:03:22 – in our web service
00:03:24 – so let's open our student service and within this i'm going to piece that bet
00:03:31 – method which we have just copied
00:03:33 – let's go over this the name of this method is get student totals and if we
00:03:38 – look at what we're doing here
00:03:40 – we're creating an instance of the class that we have just created that is
00:03:43 – student totals which has got three properties totals males and females and
00:03:49 – then we are reading the connection string from web.config file and then we
00:03:53 – are creating a sequel connection object using that connection string and then we
00:03:57 – are building or sequel command object and here is that sequel command object
00:04:02 – let's see what is the sequel query going to written so I have that same sequel
00:04:07 – query here when we execute this we get two columns
00:04:11 – gender & total with engender column we have female male and grand total
00:04:17 – and within total column we have the respective totals the female to male
00:04:22 – total and the grand total
00:04:24 – so these are the three rules that we are getting when we execute this query so we
00:04:28 – have that sequel query right there
00:04:30 – so we have building or secret man object we are opening the connection
00:04:34 – we're executing the command and then we are looping through the three rows that
00:04:38 – are returned and then we are using switch case here so we are switching on
00:04:42 – the gender column and look at gender column we are going to have these three
00:04:45 – values female male our total so we are switching on gender column if it's male
00:04:52 – then we are populating the male's property of the totals object
00:04:57 – ok so reading the value from total column converting it to engage and
00:05:03 – storing in the bat males property if its female than females property and if its
00:05:09 – default it's not male or female it's going to be total and that gets populate
00:05:12 – the total property
00:05:13 – ok so we populate all the three properties of that student total object
00:05:20 – and then we are using javascript serializer class and serializing
00:05:24 – whatever we have in that student total object so let's quickly desktop web
00:05:29 – service so i'm going to run the project so we should see of a new service method
00:05:35 – which is get student or toes
00:05:38 – so let's quickly pass that to make sure we're getting the totals information
00:05:42 – from the web service
00:05:44 – so get student totals let's invoke this and what should we get back is grand
00:05:48 – total 10 males five females five
00:05:52 – alright so web service is working as expected
00:05:56 – that's a second step the third step is to create or student parents date
00:06:00 – so this is going to be the parent for both students and student detail states
00:06:06 – that we already have
00:06:07 – so let's create the student parent state now the name of the state is student
00:06:12 – parent and look at what we have in the state configuration object we have a URL
00:06:18 – we have its own controller and template a using controller as syntax
00:06:24 – we have not created this controller
00:06:26 – and template yet will be doing that in just a bit and then we also have it is
00:06:31 – all property here so this result property is issuing an HTTP call to the
00:06:36 – web service method that we have just created which is get student totals
00:06:41 – that's going to return as the totals data and then we are storing that in
00:06:46 – this result property student totals so this will be available both you know to
00:06:53 – the controller function here that is student parent controller as well as to
00:06:58 – all the child controller functions
00:07:01 – ok will prove that in just a bit ok so this result property student totals is
00:07:06 – going to contain the totals information and another important thing that we are
00:07:10 – doing here is making this page abstract by setting this abstract property to
00:07:16 – true
00:07:17 – so what's an abstract state an abstract state is similar to an abstract class
00:07:22 – and see shop
00:07:23 – can we create an app instance of an abstract class we can't
00:07:27 – in a similar fashion the abstracts paid cannot be activated by itself
00:07:33 – now if you look at actual class and see shop an instance of the abstract class
00:07:37 – is automatically created when an instance of changing classes created
00:07:41 – similarly when a child that state is activated at the abstract state is
00:07:48 – implicitly activated so we can think of it being similar to abstract classes and
00:07:53 – C sharp
00:07:54 – so that's what is an abstract state an abstract state cannot get activated by
00:07:59 – itself it's implicitly activated when a child is status activated and the
00:08:04 – benefit of using abstract state is that the URL of the parent state is prepended
00:08:11 – to the URL of all the chain states that means we can remove any redundant part
00:08:17 – from the change the state URLs if that doesn't make sense of the man don't
00:08:22 – worry
00:08:22 – look at that in just a bit another benefit of these parents state is that
00:08:27 – you know whatever data that we have exposed using this all property that
00:08:32 – data will be available for all the tail states as well
00:08:36 – similarly if you have exposed to any customer
00:08:38 – data using data property then that custom data again will be available in
00:08:43 – all the changes states
00:08:45 – so let's create this parent state now in the interest of time I have already
00:08:49 – typed that code
00:08:51 – so let's copy that from the notepad and paste that within our conflict function
00:08:56 – in script or GS
00:08:58 – so in our script or Jess we already have students state and student details
00:09:03 – States suggest about student state i'm going to include our parents state the
00:09:10 – name of the state student parent
00:09:12 – so we have all the properties here that we have seen on the slide now the next
00:09:15 – step is to make students and student details States tales of the penn state
00:09:23 – that we have just created
00:09:24 – so the baby do that is by you know there are several ways of nesting states so
00:09:30 – i'm going to use the dot notation so i'm going to copy the parent state name
00:09:34 – which is student parent and then specify that as the parent to the still and
00:09:39 – state by using dot notation
00:09:41 – let's do the same with student details
00:09:45 – so now student details and students both our child states now we already have URL
00:09:53 – with in the abstract parent state / students
00:09:57 – that's the URL here for the parent and look at the water for students state
00:10:02 – it's the same
00:10:03 – ok now the URL of the parent will be prepended to the URL of the change of
00:10:07 – state so there's no point in having the same thing here so we can remove that
00:10:12 – redundant part and I'm just going to leave it for / there and same idea with
00:10:18 – student details i'm going to remove the redundant part and leave just for / : ID
00:10:24 – so those are the modifications required for the change that states
00:10:29 – that's what's next step
00:10:34 – now we need to create student parent controller function so if you look at
00:10:40 – our parent state here we have its own controller and we have its own template
00:10:47 – have not created them
00:10:49 – let's create them now let's first create student parent controller and look at
00:10:53 – what this parent controller function is doing straightforward
00:10:57 – we're injecting student totals into this control function now if you're wondering
00:11:02 – what is the student totals
00:11:04 – it's nothing but the resolved dependency
00:11:08 – so if you look at our parents state we are using the result property and the
00:11:15 – name of the resort property student totals which is going to contain our
00:11:18 – student totals so this can be injected into its own control function so that's
00:11:24 – what we are injecting right here
00:11:26 – student totals and the student totals is going to have males females and portals
00:11:30 – you know we have seen that here total males and females
00:11:34 – we are retrieving whatever values we have in there and then populating the
00:11:39 – view model using this keyboard their males females totals and then we'll use
00:11:44 – these properties to display that data in the view
00:11:48 – so first let's create a student parent control function so let's copy what we
00:11:52 – have in the notepad and paste it in our script rjs so let's scroll down and i'm
00:12:02 – going to include a lot of students parent controller right here
00:12:06 – let's format this a bit so we have a student parent controller
00:12:10 – the next step is to create our student parent template so notice whatever data
00:12:18 – we have you know we are displaying that in the template in the student parent
00:12:24 – template and another important thing is in the student parent template we have
00:12:29 – you why
00:12:30 – – view so if you recollect in our index dot HTML
00:12:36 – we have a wide ashfield directive so into this directive all the partial
00:12:41 – templates will be injected
00:12:43 – but then again now in the pair
00:12:46 – when template we have another uiview director
00:12:49 – so this parent template will inject its content into view I view of index 2.html
00:12:58 – and then into this UI view all the child states will inject their content
00:13:05 – so in this case students and student details will be injecting their content
00:13:11 – into this
00:13:12 – uiview director and this template you know whatever we have here in this
00:13:17 – parent template
00:13:18 – this will be injected into index 2.html which is our layout real
00:13:23 – so we have three levels of view here so we have index 2.html
00:13:28 – we have the student parent and we have the change the state's change views that
00:13:34 – is students to HTML and stew in details to HTML
00:13:38 – so now let's go ahead and create a student parent HTML
00:13:42 – so if you look at a la parent state within our script . is file the parent
00:13:49 – state the name that we are using for the parent template is student parent or
00:13:55 – HTML
00:13:55 – so let's add this HTML file our templates folder so add an HTML page and
00:14:02 – the name of this is going to be stored in parent and whatever code that we have
00:14:07 – seen on this slide
00:14:09 – i'm going to copy that and include that within our student parent HTML and we
00:14:17 – are also going to include a why – you
00:14:20 – director all right now we have to modify the length so in students in an extra
00:14:28 – HTML we have linked to students so we have to modify that
00:14:35 – let's go to index 2.html so here we are using urs graf and the name of the state
00:14:40 – now it's a change the state
00:14:42 – so in its name we also need to include it parents name and if you look at what
00:14:47 – its parent name
00:14:48 – is its pattern name is student parent so i'm going to copy that and paste it
00:14:57 – right here
00:14:58 – so the name of the students state now is student parent . students so we have its
00:15:05 – parent name as well prepended all right now
00:15:09 – we also have links in other pages let's modify them as well
00:15:12 – we have in links in students to HTML and student details to HTML
00:15:17 – let's modify those links as well so let's open students . HTML
00:15:23 – again we have you is f here so for student details it's going to be student
00:15:29 – parent . student details and we have student details and again for students
00:15:37 – it's going to be student parent . students
00:15:40 – alright so we have changed all the links those are all the things required so I'm
00:15:44 – going to build a solution and let's navigate to the root of our application
00:15:53 – so let's close all the windows
00:15:54 – let's navigate to our index dot HTML
00:15:58 – so we are on the homepage
00:16:01 – let's click on students now notice on the students page we see student totals
00:16:07 – and we have our student names
00:16:10 – so when I click on student named notice we go to student details and we still
00:16:16 – see the student totals
00:16:18 – so here we are using nested states and views
00:16:23 – now we said that the parent state resolve the dependencies are available
00:16:30 – to all the tail the states to prove this
00:16:33 – this is what we want to do we want to display the total number of students on
00:16:38 – the students page against this list of students text
00:16:41 – ok that means that data whatever the patron state has made available in now
00:16:48 – it has to be available for the change the state as well
00:16:52 – ok let's prove that
00:16:54 – not to do that what we're going to do is inject student totals in two students
00:17:00 – control function
00:17:01 – this is the change state control function right so the student totals
00:17:06 – this is the result of property made available by the penn state now we are
00:17:11 – injecting that into the child control function as well and then we are
00:17:16 – assigning that to a property on the view model and then in students HTML
00:17:21 – we're retrieving it from the view model and displaying that there
00:17:25 – ok so let's do that so let's go to our students control function first of all
00:17:32 – notice our parents state right here
00:17:34 – that is all property this is available in the Penn State and the name of that
00:17:38 – is student totals
00:17:40 – I'm going to inject this into the child control function so the change control
00:17:47 – function here is students controller so I'm going to inject that into this
00:17:53 – ok student totals and then we have the view model object so on the view model
00:18:01 – I'm going to include a property
00:18:04 – i'm going to call it student totals as well and assign it to that property and
00:18:11 – then all that is left is within our students start HTML
00:18:15 – so where are we displaying list of students text
00:18:20 – so here we have against h1 list of students
00:18:24 – so here we want to display the total students and bracket so what I'm going
00:18:31 – to do this included bracket there and a bracket here and then here we are using
00:18:43 – controller as syntax for students controller . and what is the name of the
00:18:48 – property
00:18:49 – let's go to our script rjs so the name of the property student totals
00:18:58 – and in that we have the name of the property there is total
00:19:07 – so let's include that they're all right
00:19:10 – so those are all the changes required let's save them and i am going to reload
00:19:19 – this
00:19:20 – now next to list of students notice that we see the total number of students as
00:19:24 – expected
00:19:26 – thank you for listening and have a great day

Video Url: