Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what is the purpose of $state.includes in angularjs?

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?

like image 542
ajai Avatar asked Apr 20 '17 05:04

ajai


People also ask

What is state in AngularJS?

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.

What is state includes?

“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.”

What is state provider AngularJS?

$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.

What is UI sref 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.


2 Answers

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.

like image 80
Vahid Najafi Avatar answered Sep 17 '22 20:09

Vahid Najafi


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 any params 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!

like image 43
tanmay Avatar answered Sep 20 '22 20:09

tanmay