Ng-view not showing after adding ui.bootstrap

Question

I have added ui.bootstrap to my controller:

angular.module('myApp', ['ui.bootstrap']).controller('ClientController', function($scope, $uibModal, ClientService) {});

I have added bootstrap-tpls to my index.html file as well.

Inside index.html, there is nav bar with button. When clicked, it should show .html related to above mentioned controller which is hidden inside <div ng-view></div>.

Yet, when clicked, it does nothing - does not show any html page. Also, it does not show html page related to another controller, not ClientController.

Removing ['ui.bootstrap'] and leaving angular.module('myApp') alone makes ng-view visible yet throwing (as expected, I assume) error:

"Unknown provider: $uibModalProvider <- $uibModal <- ClientController".

Why ng-view is not running with ui.bootstrap set in table of modules?

Edit:

Navbar:

<nav class="navbar navbar-default">
        <div class="container-fluid">
        <div class="navbar-header">
                <a class="navbar-brand" href="#">App</a>
        </div>
                <ul class="nav navbar-nav">
                <li class="active"><a href="#/">Main</a></li>
                <li><a href="#/client">Client</a></li>
                <li><a href="#/admin">Admin</a></li>
                </ul>
        </div>
</nav>
<div style="
margin-bottom: 30%;
margin-right: 20%;
margin-left: 20%;
margin-top: 10%;"
ng-view></div>

app.js:

'use strict';

var app = angular.module("myApp", ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when("/client", {
        templateUrl : "client",
        controller  : "ClientController as cCtrl"
    })
    .when("/admin", {
        templateUrl : "admin",
        controller : "AdminController as aCtrl"
    })
}]);

Edit 2:

Moving 'ui.bootstrap' to app.js and using app variable while creating controller didn't solve the problem - there is error:

Unknown provider: $uibModalProvider <- $uibModal <- ClientController

Now code looks as below:

app.js:

var app = angular.module("myApp", ['ngRoute', 'ui.bootstrap']);

ClientController:

app.controller('ClientController', function($scope, $uibModal, ClientService) {})

Edit 3:

Script tags:

<head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script src="static/js/app.js"></script>
        <script src="static/js/controller/AdminCtrl.js"></script>
        <script src="static/js/service/AdminService.js"></script>
        <script src="static/js/controller/ClientCtrl.js"></script>
        <script src="static/js/service/ClientService.js"></script>
        <link rel="stylesheet" href="static/css/styles.css">
        <meta charset="UTF-8">
</head>

Your second error is because you are injecting $uibModal into your controller, which is part of ui.bootstrap module. By removing it, it can't find the service/provider that was injected. As for the first problem, you need to post your code with your navbar. They usually have anchor links that change the url, redirect you, and change content in ng-view — Aleksey Solovey
@AlekseySolovey I have updated my post with app.js and index.html code. I see where my second error comes from. Yet, I cannot understand the first problem - why nothing happens here. There is no error in console as well. — kstefanczyk
The issue is you can create a new module like the syntax : angular.module('myapp',[]) while you access the same module using this syntax angular.module('myapp') i.e. no square bracket. But when you create the controller you are defining your module again which you are using as your bootstraping module. Instead of adding the ui.bootstrap at the time of controller creation add it as one more dependency in app.js var app = angular.module("myApp", ['ngRoute','ui.bootstrap']); then use this app variable to create the controller as app.controller(); — Gaurav Singh
@GauravSingh it didn't help. Now there is: "Unknown provider: $uibModalProvider <- $uibModal <- ClientController" error. Please see my edited post above — kstefanczyk
version of ui-bootstrap-tpls? and can you please add index.html with the order of script tags..? — Gaurav Singh

Gaurav Singh Gaurav Singh · Accepted Answer · 2018-10-22T18:04:14

Make your index.jsp like this

    <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script 
             <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
           src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script src="static/js/app.js"></script>
            <script src="static/js/controller/AdminCtrl.js"></script>
            <script src="static/js/service/AdminService.js"></script>
            <script src="static/js/controller/ClientCtrl.js"></script>
            <script src="static/js/service/ClientService.js"></script>
            <link rel="stylesheet" href="static/css/styles.css">
            <meta charset="UTF-8">
    </head>

Ng-view not showing after adding ui.bootstrap

1 Answers