[英]AngularJs routing is not working properly and bootstrap also not working
当我单击添加按钮时,我想显示 AddController 中的消息,但这里的路由不起作用,我将提供一些屏幕截图,引导程序也不起作用。
演示.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";
});
尝试从<a href="#/Home">
删除 # <a href="#/Home">
试。
提供的 Fiddle 链接中几乎没有问题,但您提供的代码中没有这些问题。
我已经修改了路由器并检查了以下工作应用程序。
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'
});
}]);
要以 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.