I am working on my tutorial AngularUI project. I read all about states, nested states and abstract states. The problem is that I can't understand why and when I should use abstract state?
An abstract is a short statement about your paper designed to give the reader a complete, yet concise, understanding of your paper's research and findings. It is a mini-version of your paper.
An abstract class is mostly used to provide a base for subclasses to extend and implement the abstract methods and override or use the implemented methods in abstract class.
An abstract class is a good choice if we are using the inheritance concept since it provides a common base class implementation to derived classes. An abstract class is also good if we want to declare non-public members. In an interface, all methods must be public.
An abstract class can be used only if it is inherited from another class and implements the abstract methods. Proper implementations of the abstract methods are required while inheriting an abstract class. Both regular and abstract methods can be present in a Java abstract class.
Abstract state does mean the state that you wrote can't be accessible directly. Abstract states still need their own for their children to plug into.
It gets called when we load its child's state. You can use abstract state to define some initial pattern of your page, suppose you can take an example of Any social media site, where you wanted to show user profile & social page. For that you could have one abstract
state, which will have url: ""
& have basic layout of your page. Like header
, content
& footer
named views. header
& footer
named view will be filled up by the abstract state & then child will define the what the content is depends on which module is displayed. /profile
will show the userProfile.html
& /social
will show the social page of an user social.html
.
Config
app.config(function($stateProvider){
$stateProvider.state("app":
{
url: "", //you can have the default url here..that will shown before child state url
abstract: true,
views: {
'': {
templateUrl: 'layout.html',
controller: 'mainCtrl'
},
'header': {
templateUrl: 'header.html'
},
'footer': {
templateUrl: 'footer.html'
}
},
resolve: {
getUserAuthData: function(userService){
return userService.getUserData();
}
}
})
.state("app.profile": {
'content@app': {
templateUrl: 'profile.html',
controller: 'profileController'
}
})
.state("app.social": {
'content@app': {
templateUrl: 'social.html',
controller: 'socialController'
}
})
})
Other main feature of abstract
is you can have common resolve on it, provide inherited custom data via data for use by child states or an event listener. Also you can have OnEnter
& OnExit
on it to making sure things before loading state
& while leaving from state
If you don't want a state that can be hit\transitioned to then you can make it an abstract state. Example
\A
\A.B
\A.B.C
If you don't want the user to simply go to \A
, you should make it abstract
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With