asked on

Angular - following an example but getting an error

I have a smart table with 2 columns. I want to have a mouseover with a popup for the second column to display more information. I found this link I'm following this example http://plnkr.co/edit/3KiZdZsxwy6GDLoy6DhV?p=preview

I've spent at least 4 hours on this and still can't find a solution. I think it might be my injection of ui-bootstrap per this link
Possible explanation

You can see what I'm doing here:

1. http://147.75.0.124:88 Log in with admin@admin.test and Password321$

2. Click on "Immigration" and click on the link under it

3. Look at Chrome's console and you see the error.

The error and what I've done

1. I get this error Unknown provider: $uibModalProvider <- $uibModal <- chapterCntrl

2. I made sure I have bootstrap.js and bootstrap-tpls.js
3. In module.js, I have this and I have a reference to it in the page

angular.module('lawApp',   ['ui.bootstrap']);

Open in new window

4. I checked the bootstrap version.
5. In "chapterCntrl", I tried $uibModalInstance, $uibInstance and $uibModal. I think $uibModal is correct but I still get the error
6. I changed "chapterCntrl" to below but I get an error with mainCntrl not being defined if do below

(function () {
    'use strict';
    angular.module('lawApp','ui.bootstrap')

        .controller('chapterCntrl', chapterController);

Open in new window

What am I missing? I still think it's how I inject ui.bootstrap but don't know what else to try.

Robb Hill

Angular can be picky about the order of libraries. Are you able to test this without the injection....or can you output the order of how the libraries are loaded on the page.

Camillia

ASKER

If you login to the site above, you can see the order in the console. This is what I see

And yes, if I remove "$uibModal" from chapterController, I don't get the error.

<head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}</style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index - My ASP.NET Application</title>
    <link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/app_css.css" rel="stylesheet">
<link href="/Content/leaflet.css" rel="stylesheet">
<link href="/Content/animate.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">

    <script src="/Scripts/modernizr-2.6.2.js"></script>

    

    <script src="/Scripts/jquery-2.2.4.js"></script>
<script src="/Scripts/jquery.slimscroll.js"></script>

    <script src="/Scripts/angular.js"></script>

      
     
    <script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>

    <script src="/Scripts/leaflet-0.7.3.js"></script>


    <script src="/Scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>

    <script src="/AngularJS/module.js"></script>
   
    <script src="/AngularJS/controller/feedController.js"></script>
    <script src="/AngularJS/controller/mainController.js"></script>
    <script src="/AngularJS/controller/mapController.js"></script>
    <script src="/AngularJS/controller/chaptersController.js"></script>

    <script src="/AngularJS/service/mainService.js"></script>
    <script src="/AngularJS/service/feedService.js"></script>
    <script src="/AngularJS/service/chaptersService.js"></script>

    

     
  
     

    <script src="/AngularJS/directive/activate-button.directive.js"></script>

   

    <script src="/Scripts/lodash.min.js"></script>

    <script src="/AngularJS/us-states.js"></script>
    <script src="/Scripts/smart-table.js"></script>

    <link href="/Content/app_css.css" rel="stylesheet">
    <link href="/Content/Site.css" rel="stylesheet">
    <script>
        
        $(document).ready(function () {
            $('.slimScrollDiv1').slimScroll({
                height: '300px',
                size: '4px'
            });
        });

    </script>

 

</head>

Open in new window

Robb Hill

probably a conflict between the bootstrap and bootstrapUI. Can you try just using one or the other? Is there a reason to use both?

Camillia

ASKER

You mean remove <script src="/Scripts/bootstrap.js"></script> and only use <script src="/Scripts/angular-ui/ui-bootstrap.js"></script>
?

If so, I just removed <script src="/Scripts/bootstrap.js"></script> and I still get the same error.

Maybe I need to upgrade and use the latest version. This plnkr has the latest version : https://plnkr.co/edit/?p=preview

The more I'm googling, the more I think you're correct...it's probably a version conflict.

Camillia

ASKER

This link http://www.ozkary.com/2016/01/angularjs-unknown-provider-modalprovider.html

One more note, we also need to make sure that the version of ui-bootstrap we are using supports our version of angularjs. If this is not the case, we may get other errors like unknown $templateProvider which is common when using a recent ui-bootstrap version with an older angularjs version.

I can check my versions but I don't know what Angular goes with what bootstrap. I'll see what I have.

Robb Hill

yes check the versions...and the example was a beta ....have you tried in stable version?

Camillia

ASKER

Bootstrap-tpls.js is * Version: 2.0.1 - 2016-08-02

Bootstrap.js is * Version: 2.0.1 - 2016-08-02

My angular.js is * @license AngularJS v1.6.4

This is the latest. Maybe I should download this https://angular-ui.github.io/bootstrap/

I'll research more.

Robb Hill

ok let me know..if that doesnt get you working we can go back to looking at the structure of the angular code.

Camillia

ASKER

Thanks. I don't know what version of angular goes with what version of bootstrap but I'll look into it. I've been at this for 6 hours now :) I have to get some sleep and get back at it tomorrow. I will post back.

ASKER CERTIFIED SOLUTION

Robb Hill

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Camillia

ASKER

So you think it's the order and not the versions?

Let me look at your link.

Robb Hill

My link is not about order but how you are calling in the controller. Sounds like a logical approach. I have built two angular websites...one that was a hybrid with MVC>...these issues are the types of things that make Angular irritating...but once its figured out I think its worth it.

Have you considered moving to the upgrade instead of working against this retired version. I say retired only in sarcasm. If you have a huge code base I could see why you have not moved.

Camillia

ASKER

Let me read the link. I'll post back.
I'm kinda new to angular. This is my side project. I'm open to changing it and doing it correctly. Let me read the link first.

Camillia

ASKER

I read the link and will double check the order again.

My link is not about order but how you are calling in the controller.

I'm having 'ui.bootstrap' in the module.js and that module on top of the page so it will be referenced first. Not correct? I think it's correct, no?

If I get boostrap 3.x ( http://getbootstrap.com/getting-started/) what version of Angular would I need?

I'm not sure what you mean by

Have you considered moving to the upgrade instead of working against this retired version

I found this about the order. Order I'll try this and post back

To summarize, I don't know:
1. Is this a version issue?
2. Order of how I'm referecing the js files?
3. How I'm injecting ui.bootstrap?

Camillia

ASKER

You're right...it has something to do with the order of references. I just ran a test...

1. For the login page, I did this:

(function () {
'use strict';
angular.module('lawApp',['ui.bootstrap'])
// .factory('loginService', loginService);
.controller('loginController', loginController);

loginController.$inject = ["$scope", "loginService","$uibModal"];

2. References for the login page look like this

 <link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/app_css.css" rel="stylesheet">
<link href="/Content/leaflet.css" rel="stylesheet">
<link href="/Content/animate.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">

    <script src="/Scripts/modernizr-2.6.2.js"></script>


    <script src="/Scripts/angular.js"></script>


    <script src="/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="/Scripts/angular-ui/ui-bootstrap.js"></script>

    <script src="/AngularJS/module.js"></script>
    <script src="/AngularJS/controller/loginController.js"></script>
    <script src="/AngularJS/service/loginService.js"></script>
    

    <script src="/Scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>

Open in new window

I didn't get an error about $uibModal

So, it has to be the order when I login and I'm on that link. I played around with it a lot but still got the same error. I'll see what else I can do.

Camillia

ASKER

Ok, I got the error fixed. I'm going to play around with this more tomorrow to make sure I understand the fix and see if actually the modal works.

Thanks for your help. I'll open a new question if I need help with understanding how I fixed it. I played around with it so much that it's a blur now :)

Robb Hill

I understand. Good luck..I will be around a few more hours if ya need me.

Camillia

ASKER

thanks!