AngularJs 路由无法正常工作并且 bootstrap 也无法正常工作

Question

当我点击添加按钮时，我想显示 AddController 中的消息，但路由在这里不起作用，我将提供一些屏幕截图，bootstrap 也不起作用。

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'
      });
   }]);

现在这是我的 index.html 代码

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

现在添加控制器

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

Answer 1

尝试删除 <a href="#/Home"> 中的 #，然后重试。

Answer 2

要以 Angular 方式导航路线，您应该使用 ui-sref 而不是 href，所以在你的情况下：

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

在此处阅读更多内容：https://ui-router.github.io/ng1/docs/0.3.1/#/api/ui.router.state.directive:ui-sref

Answer 3

提供的Fiddlelink中有一些问题，但在您提供的代码中没有。

我修改了路由器并检查了下面的工作应用程序。

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

AngularJs 路由无法正常工作并且 bootstrap 也无法正常工作

AngularJs routing is not working properly and bootstrap also not working

javascript

twitter-bootstrap

angularjs

angularjs-routing

bootstrap-modal