I'm new in angularjs, I've little confuse between ng-include and $state.includes. Can anyone please suggest me why we using the $state.includes instead of ng-include directive?
The STATE in AngularJS is a mechanism that allows us to update the view based on changes to the model. It is a two-way binding between data and DOM elements. Moreover, the State helps us keep track of data that changes over time, such as whether a particular button has been pressed or not.
“Definition in this part, unless the context otherwise requires, the State includes the Government and Parliament of India and the Government and the Legislature of each of the States and all local or other authorities within the territory of India or under the control of the Government of India.”
$stateProvider is used to define different states of one route. You can give the state a name, different controller, different view without having to use a direct href to a route. There are different methods that use the concept of $stateprovider in AngularJS.
ui-sref stands for UI-Router state reference. It's a way to change states/state params (as defined in using the $stateProvider in a config block using the ui. router module for AngularJS. You can read the ui-sref documentation here.
Imagine you have a parent menu with some child menus. For each child menu you have something like this for adding active class:
ui-sref-active="active"
But you also need to add active class for parent menu when you navigate to each of the child states.Then you can use ui-router
includes.
<li ng-class="{ active: state.includes('parentState') }">
Note: You must add this to your controller:
$scope.state = $state;
About ng-include, it doesn't relate to $state.include. It compiles external html into the directive.
They are both way seperate things. Like Java and JavaScript? :-)
$state.includes
is a way to see if the current state is or is child of the provided state while using ui-router
.
$state.includes(stateName [, params])
Returns Boolean
A method to determine if the current active state is equal to or is the child of the state
stateName
. If anyparams
are passed then they will be tested for a match as well. Not all the parameters need to be passed, just the ones you'd like to test for equality.
Where as, ng-include
is a AngularJS directive to fetch, compile and include an external HTML fragment.
You should probably try to read about them on the Internet before asking about it though!
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