AngularJs routing is not working properly and bootstrap also not working

Question

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";
});

When i click on add i want message "In Add view " but it didn't route and dosen't show any error if you wish to see browser url then i wil provide you. — Ronak Dumaniya
– Ronak Dumaniya, Commented Feb 10, 2018 at 13:10
can you provide jsfiddle of this, it will be useful in debugging. — Praveen Soni
– Praveen Soni, Commented Feb 10, 2018 at 13:12
Your fiddle is broken. Please ensure that your examples actually work, demonstrate the problem you are having, and are free from other errors. In this case, you aren't even loading the angular script, but when it's added, other errors related to the controller appear as well. — Claies
– Claies, Commented Feb 10, 2018 at 13:39
@Claies problem is when i click on Home it will give me 404 error. and sorry for jsfiddle i am using it first time — Ronak Dumaniya
– Ronak Dumaniya, Commented Feb 10, 2018 at 13:46

Sajeetharan · Accepted Answer · 2018-02-10 14:03:31Z

0

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

answered Feb 10, 2018 at 14:03

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheJodaltro · Accepted Answer · 2018-02-10 13:15:35Z

0

Try remove the # from <a href="#/Home"> and try again.

answered Feb 10, 2018 at 13:15

TheJodaltro

116 bronze badges

Comments

Arber Sylejmani · Accepted Answer · 2018-02-10 13:19:31Z

-1

To navigate routes the Angular way you should use ui-sref instead of href, so in your case:

<li class="active"><a ui-sref='Home'>Home</a></li>
<li><a ui-sref="Add">Add</a></li>
<li><a ui-sref="Edit">Edit</a></li>
<li><a ui-sref="Delete">Delete</a></li>

Read more here: https://ui-router.github.io/ng1/docs/0.3.1/#/api/ui.router.state.directive:ui-sref

answered Feb 10, 2018 at 13:19

Arber Sylejmani

2,1081 gold badge16 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJs routing is not working properly and bootstrap also not working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related