Question

我是Angular的新手，我一直在尝试在这个项目中使用ui-router，但ui-view没有显示任何内容，我是否错过了什么？我正在尝试构建一个卑鄙的应用程序，文件夹结构如下： app文件夹是角度应用程序所在的位置。

<!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视图

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

和注册控制器

(function()
{
  angular.module('TimeWaste')
    .controller('SignupController',       ['$scope','$state',function($scope,$state){

    }]);

}());

Answer 1

它可能错字和路径缺失!!

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

Angular ui-router不起作用

1 个答案: