CODEWITHSUNDEEP
angularjsdependency-management
CodyBugstein
CodyBugstein

Reputation: 23302

How do you manage conflicts when items in dependencies have the same name?

This is both a question about Angular architecture and how to work with it.

I created a really simple Angular App. It has a main module called App, and App has two dependencies, Dep1, Dep2. Both of the Deps, have a constant called theConst. So when theConst is used in the App, how does Angular decide what to use?

As it stands now, when I test the app, Angular chooses Dep2's value, which is injected second. What if I want to refer to Dep1's value in some places and Dep2's in others?

Code:

<html>
<head>
    <title>Testing</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <script src="js/Dependency1.js"></script>
    <script src="js/Dependency2.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="App">
    <div ng-controller="Ctrl">
        <h1>{{greet}}</h1>
        <h5>{{const}}</h5>
    </div>
</body>
</html>

Javascript:

angular.module('Dep1', [])
.constant('theConst', "Number One!");

angular.module('Dep2', [])
.constant('theConst', "Number Two!");


angular.module('App', ['Dep1', 'Dep2'])
.controller('Ctrl', ['$scope', 'theConst', function($scope, theConst){
    $scope.greet = "Howdie!";

    $scope.const = theConst;
}]);

Upvotes: 3

Views: 276

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40296

Angular modules are a strange thing (I don't like them - but that's a personal opinion). They only provide an abstract grouping, no namespacing, no bundling/script loading.

In the end it comes to this: you have to make sure no 2 artifacts have the same name by yourself. There may be plugins for Grunt/Gulp/you build system that help you, but I do not know any.

Angular will choose the last artifact with a given name it encounters. (This can get funny when artifacts are declared in multiple files.)

Upvotes: 2

Related Questions