我是 Angular 新手,我一直在尝试在这个项目中使用 ui-router,但是 ui-view 没有显示任何内容,我是否错过了什么? 我正在尝试构建一个平均应用程序,文件夹结构如下: app 文件夹是 Angular 应用程序所在的位置。
<!DOCTYPE html>
<html lang="en" ng-app="TimeWaste">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
</head>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="">
<input type="text" ng-model="login.email">
<input type="password" ng-model="login.password">
<button>Login</button>
<a ui-sref="signUp">Create an account</a>
</div>
</div>
</nav>
<body>
<div ui-view></div>
</body>
<script src="node_modules/angular/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="app/signup/signup-controller.js"></script>
</html>
这是app.js
(function()
{
angular.module('TimeWaste',['ui.router'])
.config(function($stateProvider)
{
$stateProvider
.state('signup',{
url:"/signup",
templateUrl: "app/signup/signup.html",
controller:"SignupController"
})
})
}());
signup.html View
<div class="row">
<div class="col-sm-6">
<div class="row">
<strong>Email Address:</strong>
<input type="text" ng-model="newUser.email" class="form-control">
</div>
<div class="row">
<strong>Password:</strong>
<input type="password" ng-model="newUser.password" class="form-control">
</div>
<button ng-click="createUser()">Submit</button>
</div>
</div>
和注册 Controller
(function()
{
angular.module('TimeWaste')
.controller('SignupController', ['$scope','$state',function($scope,$state){
}]);
}());
最佳答案
可能有拼写错误和路径丢失!!
在html中使用<a ui-sref="signUp">Create an account</a>
但在 $stateProvider
使用过signup
所以需要改变signUp
至signup
.
我假设你的 app.js
位于app
目录,因为您使用
<script src="app/app.js"></script>
在主页中。
如果正确,那么您的模板路径需要更改templateUrl: "signup/signup.html",
但是您可以配置 ui.route
不区分大小写。
喜欢:
.config(function($stateProvider,$urlMatcherFactoryProvider,)
{
$urlMatcherFactoryProvider.caseInsensitive(true);
$urlMatcherFactoryProvider.strictMode(false);
$stateProvider
.state('signup',{
url:"/signup",
templateUrl: "signup/signup.html",
controller:"SignupController"
})
})
关于javascript - Angular ui 路由器不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35974879/