Angularjs 路由不适用于使用 IIF 函数的控制器和模型
Angularjs routing not working with controller and model using IIF funtion
我创建了一个带有路由配置的简单网站。我正在为我的模块和控制器使用 IIF javascript,但路由不起作用。
它只有在我像这样输入默认本地主机时才有效http://localhost:18689
但是如果尝试http://localhost:18689/maindashboard
任何路由,或者$location.path('/addrequest')
我得到一个404。
IIF 可能是问题所在吗?
我的模块是这样的:
(function () {
"use strict";
var clientAppModule = angular.module('clientAppModule', ["ngRoute", "ui.bootstrap", "ngResource"]);
clientAppModule.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/maindashboard", {
templateUrl: "app/maindashboard/maindashboard.html",
controller: "mainDashboardController"
})
.when("/addrequest", {
templateUrl: "app/addrequest/addrequest.html",
controller: "addRequestController"
})
.otherwise({
redirectTo: "/maindashboard"
});
$locationProvider.html5Mode(true);
});
}());
索引页:
<!DOCTYPE html>
<html ng-app="clientAppModule">
<head>
<title></title>
<!-- CSS -->
<link href="Content/css/font-awesome.css" rel="stylesheet" />
<!-- Libraries -->
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<!-- Code -->
<script src="App/clientAppModule.js"></script>
<script src="App/Index/indexController.js"></script>
<script src="App/MainDashboard/mainDashboardController.js"></script>
<script src="App/AddRequest/addRequestController.js"></script>
<base href="/">
</head>
<body class="container">
<h1>New Turning Point and Care Point Test Frame</h1>
<div>
<br /> 3 + 5 =
{{3+5}}
<br />
</div>
<div ng-view>
</div>
</body>
</html>
主仪表板控制器是:
(function () {
'use strict';
var mainDashboardController = function ($scope) {
$scope.TestObj = 'testmainDashboardController';
$scope.showAddRequest = function () {
$location.path('/addrequest');
};
};
var app = angular.module('clientAppModule');
app.controller("mainDashboardController", mainDashboardController);
})();
addrequest 控制器类似只是一个测试
您的问题是 mainDashboardController
中缺少 $location
参数
var mainDashboardController = function ($scope, $location)
此外,如果您计划最小化代码,则应在使用内联语法创建控制器时声明依赖关系
app.controller('mainDashboardController', ['$scope', '$location', mainDashboardController]);
或angular喷油器
mainDashboardController.$inject = ['$scope', '$location']
这样当最小化器将您的参数名称更改为 a
或 b
或其他名称时,angular 将知道它们应该是什么。
我创建了一个带有路由配置的简单网站。我正在为我的模块和控制器使用 IIF javascript,但路由不起作用。
它只有在我像这样输入默认本地主机时才有效http://localhost:18689
但是如果尝试http://localhost:18689/maindashboard
任何路由,或者$location.path('/addrequest')
我得到一个404。
IIF 可能是问题所在吗?
我的模块是这样的:
(function () {
"use strict";
var clientAppModule = angular.module('clientAppModule', ["ngRoute", "ui.bootstrap", "ngResource"]);
clientAppModule.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/maindashboard", {
templateUrl: "app/maindashboard/maindashboard.html",
controller: "mainDashboardController"
})
.when("/addrequest", {
templateUrl: "app/addrequest/addrequest.html",
controller: "addRequestController"
})
.otherwise({
redirectTo: "/maindashboard"
});
$locationProvider.html5Mode(true);
});
}());
索引页:
<!DOCTYPE html>
<html ng-app="clientAppModule">
<head>
<title></title>
<!-- CSS -->
<link href="Content/css/font-awesome.css" rel="stylesheet" />
<!-- Libraries -->
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/angular-resource.min.js"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<!-- Code -->
<script src="App/clientAppModule.js"></script>
<script src="App/Index/indexController.js"></script>
<script src="App/MainDashboard/mainDashboardController.js"></script>
<script src="App/AddRequest/addRequestController.js"></script>
<base href="/">
</head>
<body class="container">
<h1>New Turning Point and Care Point Test Frame</h1>
<div>
<br /> 3 + 5 =
{{3+5}}
<br />
</div>
<div ng-view>
</div>
</body>
</html>
主仪表板控制器是:
(function () {
'use strict';
var mainDashboardController = function ($scope) {
$scope.TestObj = 'testmainDashboardController';
$scope.showAddRequest = function () {
$location.path('/addrequest');
};
};
var app = angular.module('clientAppModule');
app.controller("mainDashboardController", mainDashboardController);
})();
addrequest 控制器类似只是一个测试
您的问题是 mainDashboardController
$location
参数
var mainDashboardController = function ($scope, $location)
此外,如果您计划最小化代码,则应在使用内联语法创建控制器时声明依赖关系
app.controller('mainDashboardController', ['$scope', '$location', mainDashboardController]);
或angular喷油器
mainDashboardController.$inject = ['$scope', '$location']
这样当最小化器将您的参数名称更改为 a
或 b
或其他名称时,angular 将知道它们应该是什么。