Search code examples
htmlangularjsangular-bootstrap

Ng-view not showing after adding ui.bootstrap


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>

Solution

  • 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>