CODEWITHSUNDEEP
javascriptangularjsmodule
Proximo
Proximo

Reputation: 6531

AngularJS Checking if module exists using NG-IF

I've created a custom module named "app.product" with a set of views.

In the main navigation I've created links to the related views. Example of 2 product related links below.

<ul class="nav">
  <li><a ui-sref="home">Home</a></li>

  <li><a ui-sref="productList">Products</a></li>
  <li><a ui-sref="productAdd({productId:0})>Create New Product</a></li>
</ul>

I'd only like for Products and Create New Product to show only if the "app.product" module is registered to the application.

I tried usually the following syntax:

<ul class="nav">
  <li>...</li>

  <li ng-if="angular.module('app.product')"><a ui-sref="productList">Products</a></li>
  <li ng-if="angular.module('app.product')"><a ui-sref="productAdd({productId:0})>Create New Product</a></li>
</ul>

This doesn't work.... I tried creating a method that returns a bool and that doesn't work with ng-if either.

What's kind of frustrating is that it works if I manually hard code true/false:

<li ng-if="false"><a ui-sref="productList">Products</a><li>

Here's the layout of my modules and the main appController

//main application module
angular.module("app", ['ui.router',"app.product"]);

//main application controller
angular.module("app").controller("AppController", AppController);

function AppController(){
    var vm = this;
    vm.moduleExists = function(name){
       try{
          angular.module(name);
          return true;
       }
       catch(err){
          return false;
       }
    };
}

//app.product module
angular.module("app.product", []);

Creating a method in the appController doesn't work. It's only returning false below:

<ul class="nav">
  <li>...</li>
<li ng-if="vm.moduleExists('product')"><a ui-sref="productList">Products</a></li>
  <li ng-if="vm.moduleExists('product')"><a ui-sref="productAdd({productId:0})>Create New Product</a></li>
</ul>

Upvotes: 1

Views: 1952

Answers (1)

vittore
vittore

Reputation: 17579

UPDATE: You seem to have some kind of misconseption.

If you have your module definition the way you have it in your question:

angular.module("app", ['ui.router',"app.product"]);

And you won't define ui.router or app.product modules , your app module will throw an exeption. Check jsfiddle.

Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.product due to:
Error: [$injector:nomod] Module 'app.product' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

So your module will always be here.

It is not "angular" way of doing things. If you include app.product as dependency, it will always going to be defined for your code, or angular application would not even start.

However, you can always use $injector as dependancy and ask it if dependency with particular name exists.

angular.module('app').controller('myCtrl', myCtrl)

myCtrl.$inject = ['$scope','$injector']


function myCtrl($scope, $injector) {

   $scope.moduleProductExists= $injector.has('product')

}

and use it in ng-if

 <li ng-if="moduleProductExists"><a ui-sref="productList">Products</a></li>

Be adviced however that it is checking if controller/service/directive exists, not the whole module.

Please provide more details to your question if you are trying to do something exotic with dependancies.

Upvotes: 1

Related Questions