javascript - Angular ui 路由器不起作用

标签 javascript angularjs angular-ui-router

我是 Angular 新手,我一直在尝试在这个项目中使用 ui-router,但是 ui-view 没有显示任何内容,我是否错过了什么? 我正在尝试构建一个平均应用程序,文件夹结构如下: app 文件夹是 Angular 应用程序所在的位置。 Structure 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 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所以需要改变signUpsignup .

我假设你的 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/

相关文章:

javascript - jquery“无法识别的列 IE8 未选择

javascript - 单选按钮所在的颜色单元格并被选中,但单击时未选中

javascript - 为什么我不能在 Angular ng-key 中使用动态

javascript - 状态更改后保持元素处于焦点

javascript - 为什么嵌入时指令之间的 Angular 绑定(bind)会中断?

javascript - 在多个 Div Id 上使用 javascript

javascript - 如何使用 Angular JS 打开/关闭单击的 div 生成内部循环?

angularjs - ng-include - Controller 被多次调用

javascript - Angular 2 : how do I get route parameters from CanLoad implementation?

angularjs - AngularJS 中的自适应布局(移动/桌面) - 首选的方式是什么(内部示例)