Search code examples
javascriptangularjstwitter-bootstrapbootstrap-modalangularjs-routing

AngularJs routing is not working properly and bootstrap also not working


When i click on add button then i would like show message which is in AddController but routing is not working here i am going to give some of the screenshot and bootstrap also not working.

demo.js

var myApp = angular.module("myApp", ['ngRoute']);
  myApp.config(['$routeProvider',
  function ($routeProvider) {
    $routeProvider.
      when('/Add', {
        templeteUrl: 'View/add.html',
        controller: 'AddController'
      }).
      when('/Edit', {
        templeteUrl: 'View/edit.html',
        controller: 'EditController'
      }).
      when('/Delete', {
        templeteUrl: 'View/delete.html',
        controller: 'DeleteController'
      }).
      when('/Home', {
        templeteUrl: 'View/home.html',
        controller: 'HomeController'
      }).
      otherwise({
        redirectTo: '/Home'
      });
   }]);

and now here is my index.html code

<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="scripts/jquery-3.0.0.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="demo.js"></script>

<div class="container">

    <nav role="navigation" class="navbar navbar-light">

        <ul class="nav navbar-nav">
            <li class="active"><a href="#/Home">Home</a></li>
            <li><a href="#/Add">Add</a></li>
            <li><a href="#/Edit">Edit</a></li>
            <li><a href="#/Delete">Delete</a></li>
        </ul>

    </nav>
    <div ng-view>

    </div>
</div>

Now Addcontroller

myApp.controller("AddController", function ($scope) {
  $scope.message = "In Add view";
});  

Solution

  • There are few issues in the provided Fiddle link, but they are not available in the code you provided.

    I have modified the routers and check the below working app.

    myapp.config(['$routeProvider',
     function ($routeProvider) {
         $routeProvider.
         when('/add', {
             templateUrl: 'add.html',
             controller: 'addcontroller'
         }).
          when('/edit', {
              templateUrl: 'edit.html',
              controller: 'editcontroller'
          }).
          when('/delete', {
              templateUrl: 'delete.html',
              controller: 'deletecontroller'
          }).
          when('/home', {
              templateUrl: 'home.html',
              controller: 'homecontroller'
          }).
         otherwise({
             redirectto: '/home'
         });
     }]);
    

    WORKING PLUNKER