Question

我正在尝试将我的网络应用程序拆分为API（基于MEN）和前端（Angular）。我是javascript和Angular的新手。当我尝试点击网页上的任何链接时，没有任何反应。我知道我的API工作（使用postman进行了全面测试，之前我以较少模块化的方式进行了Angular设置）。我在控制台中没有收到任何错误消息，这让我更加困惑。无论如何这是我的代码。

我的公用文件夹结构

JS
- 控制器
  - usersCtrl.js
- frontEndRoutes.js
- main.js
的观点
- createUser.html
- home.html的
- manageUsers.html
的index.html

守则：

usersCtrl.js

angular.module('usersCtrl', []).controller('usersCtrl', function($scope, $http) {
  console.log('USERS CTRL hit');
  $scope.userData = {};

  // get all users and show them
  $http.get('/api/user')
    .success(function (data) {
      $scope.user = data;
      console.log(data);
    })
    .error(function (data) {
      console.log('Error: ' + data);
    });

  // create a new user
  $scope.createUser = function () {
    $http.post('/api/user', $scope.userData)
      .success(function (data) {
        $scope.userData = {}; // clear the form so that a new user can be created
        $scope.user = data;
        console.log(data);
      })
      .error(function (data) {
        console.log('Error: ' + data);
      });
  };
});

frontEndRoutes.js

 angular.module('frontEndRoutes', [])
  .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {

  $routeProvider

  //homepage
    .when('/', {
      templateUrl: 'views/home.html',
      controller: 'usersCtrl'
    })

  // create user page
    .when('/createUser', {
      templateUrl: 'views/createUser.html',
      controller: 'usersCtrl'
    })

  // manage users page
    .when('/manageUsers', {
      templateUrl: 'views/manageUsers.html',
      controller: 'usersCtrl'
    });

  $locationProvider.html5Mode(true)
}]);

main.js

angular.module('splitApp', ['ngRoute', 'frontEndRoutes', 'usersCtrl]);

createUser.html

  <div class="container-fluid">
    <div class="jumbotron">
    <!-- Create user forms -->
    <form name="userForm" ng-controller="usersCtrl">
      <div class="create-user">
        <div class="form-group">
          <label for="inputFirstName">First Name</label>
          <input type="text" class="form-control" id="inputFirstName" ng-model="user.firstname" placeholder="First Name">
          <span ng-show="errorFirstName">{{errorFirstName}}</span>
        </div>

        <div class="form-group">
          <label for="inputLastName">Last Name</label>
          <input type="text" class="form-control" id="inputLastName" ng-model="user.lastname" placeholder="Last Name">
          <span ng-show="errorLastName">{{errorLastName}}</span>
        </div>

        <div class="form-group">
          <label for="inputUsername">Username</label>
          <input type="text" class="form-control" id="inputUsername" ng-model="user.username" placeholder="Username">
          <span ng-show="errorUsername">{{errorUsername}}</span>
        </div>

        <div class="form-group">
          <label for="inputEmail">Email</label>
          <input type="email" class="form-control" id="inputEmail" ng-model="user.email" placeholder="Email">
          <span ng-show="errorEmail">{{errorEmail}}</span>
        </div>

        <div class="form-group">
          <label for="inputPhone">Phone</label>
          <input type="number" class="form-control" id="inputPhone" ng-model="user.phone" placeholder="Phone">
          <span ng-show="errorPhone">{{errorPhone}}</span>
        </div>
      </div>  
      <button type="submit" class="btn btn-primary" ng-click="createUser()">Create User</button>
    </div>
  </div>

home.html的

  <div class="container">
    <div class="jumbotron">
    <h2 class="text-center">spLit API test</h2>
  </div>

manageUsers.html

  <div class="container-fluid">
    <div class="jumbotron">
    <!-- Create user forms -->
      <td style="vertical-align: top">
        <table class="table">
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
            <th>Email</th>
            <th>Phone</th>
          </tr>
          <tr ng-repeat="user in users">
            <td>{{user.firstname}}</td>
            <td>{{user.lastname}}</td>
            <td>{{user.username}}</td>
            <td>{{user.email}}</td>
            <td>{{user.phone}}</td>
          </tr>
        </table>
      </td>
    </div>
  </div>

的index.html

<!DOCTYPE html>
<div lang="en">
<head>
    <meta charset="UTF-8">
    <base href="home">

    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <!--<link rel="stylesheet" href="css/style.css"> &lt;!&ndash; custom styles &ndash;&gt;-->

    <!-- JS -->

    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="libs/jquery/dist/jquery.min.js"></script>
    <script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="libs/angular-route/angular-route.js"></script>
    <script src="libs/lodash/lodash.js"></script>

    <!-- Angular Custom-->
    <script src="js/controllers/usersCtrl.js"></script>
    <script src="js/services/usersService.js"></script>
    <script src="js/frontEndRoutes.js"></script>
    <script src="js/main.js"></script>

    <style type="text/css">
        .bs-example{
            margin: 20px;
        }
    </style>
</head>
<body ng-app="splitApp" ng-controller="usersCtrl">
<div class="container">
    <nav id="mainNavbar" class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">spLit API Test</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Users
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/createUser">Create Users</a></li>
                        <li><a href="/manageUsers">Manage Users</a></li>
                    </ul>
                </li>
                <li><a href="#">Bills</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
                <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
        </div>
    </nav>

    <!-- ANGULAR DYNAMIC CONTENT -->
    <div ng-view></div>

</div>
</body>
</html>

如果需要，我也可以发布我的后端代码。

感谢您对新手的所有帮助。

Angular.js路由未加载html

0 个答案: