为什么我的数据库不会填充 angularjs、angular-ui-router 和 looback api?
Why won't my database populate with angularjs, angular-ui-router and looback api?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>User Management Tool</title>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="bower_components/ng-resource/dist/ng-resource.js"></script>
<script src="client/js/lb-services.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="userApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">User Management Tool</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">All Users <span class="sr-only">(current)</span></a></li>
<li><a ui-sref="create">Create a User</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">User Admin</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div ui-view></div>
</body>
</html>
app.js
(function () {
"use strict";
var userApp = angular.module("userApp", ['ui.router', 'lbServices', 'ui.bootstrap'])
var Se_user = this;
userApp.controller("UserController", function ($scope, Se_user) {
$scope.users = Se_user.find({});
})
userApp.controller("CreateUserController", function($scope, Se_user, $state) {
$scope.addUser = function (user) {
Se_user.create(user);
alert('Your new user has been created!');
$scope.create.$setPristine();
$scope.user={};
};
});
userApp.controller("UserDetailController", function($scope, $state, $stateParams, Se_user){
$scope.code=Se_user.findByID({id: $stateParams.user_id}); //Get record for specific user ID
});
userApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url:'/home',
templateUrl:'partial-home.html',
controller:'UserController'
})
.state('create', {
url:'/create',
templateUrl:'partial-create.html',
controller:'CreateUserController'
})
.state('edit',{
url:'/edit',
templateUrl:'partial-edit.html',
contoller: 'UserDetailController'
})
});
})();
部分-home.html
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1>All Users</h1>
</div>
<br>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div><!--/.container-fluid -->
<div class="container-fluid" ng-controller="UserController as users">
<table class="table table-hover">
<thead>
<tr>
<th>EID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.eid}}</td>
<td>{{user.first_nm}}</td>
<td>{{user.last_nm}}</td>
<td>{{user.active}}</td>
</tr>
</tbody>
</table>
</div>
<div ui-view></div>
部分-create.html
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h1>Create a User</h1>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="container-fluid" ng-controller="CreateUserController">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="create-form" role="form" ng-submit="add(code)" name="create">
<div class="form-group">
<label for="user_eid">EID</label>
<input type="text" class="form-control" ng-model="user.user_eid" placeholder="Enter EID">
</div>
<div class="form-group">
<label for="user_first_nm">First Name</label>
<input type="text" class="form-control" ng-model="user.user_first_nm" placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="user_last_nm">Last Name</label>
<input type="text" class="form-control" ng-model="user.user_last_nm" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label for="user_email_adr">Email Address</label>
<input type="text" class="form-control" ng-model="user.user_email_adr" placeholder="Enter Item Type">
</div>
<div class="form-group">
<label for="user_role">Role</label>
<input type="text" class="form-control" ng-model="user.user_role" placeholder="Enter Status Code">
</div>
<div class="form-group">
<label for="user_active">Active</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" ng-model="user.user_active" checked>
Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" ng-model="user.user_active">
No
</label>
</div>
</div>
<div class="form-group">
<label for="insrt_dt">Creation Date</label>
<input type="date" class="form-control" ng-model="code.insrt_dt" placeholder="Enter Creation Date">
</div>
<div class="form-group">
<label for="insrt_user_id">Creator EID</label>
<input type="text" class="form-control" ng-model="code.insrt_user_id" placeholder="Enter Creator EID">
</div>
<div class="form-group">
<label for="upd_dt">Update Date</label>
<input type="date" class="form-control" ng-model="code.upd_dt" placeholder="Enter Update Date">
</div>
<div class="form-group">
<label for="upd_user_id">Update User EID</label>
<input type="text" class="form-control" ng-model="code.upd_user_id" placeholder="Enter Update User EID">
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
<pre>{{user | json}}
</pre>
</form>
</div>
</div>
</div>
I am seeing the following error when I run the web-app on a localhost:
TypeError: Cannot set property '$save' of undefined
at module.factory.config.factory.provider.$get (http://127.0.0.1:62557/client/js/lb-services.js:2409:34)
此外,我不是 运行 $http 脚本,因为我已经安装并正在使用 lb-services 进行调用和 return 请求。问题在于我无法向数据库发送请求或从数据库中提取数据。我也是 运行 节点。
非常感谢任何帮助或见解!!
您在 https://github.com/strongloop/loopback-example-angular 看到我的示例了吗?如果您仍然 运行 遇到问题,请告诉我。
我知道哪里出了问题!
我的 lbservices.js 文件使用基数 URL 的 '/api' 而它需要是 'http://localhost:3000/api'。
感谢您的帮助!!
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>User Management Tool</title>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<script src="bower_components/ng-resource/dist/ng-resource.js"></script>
<script src="client/js/lb-services.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script src="bower_components/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="userApp">
<!-- NAVIGATION -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">User Management Tool</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a ui-sref="home">All Users <span class="sr-only">(current)</span></a></li>
<li><a ui-sref="create">Create a User</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">User Admin</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div ui-view></div>
</body>
</html>
app.js
(function () {
"use strict";
var userApp = angular.module("userApp", ['ui.router', 'lbServices', 'ui.bootstrap'])
var Se_user = this;
userApp.controller("UserController", function ($scope, Se_user) {
$scope.users = Se_user.find({});
})
userApp.controller("CreateUserController", function($scope, Se_user, $state) {
$scope.addUser = function (user) {
Se_user.create(user);
alert('Your new user has been created!');
$scope.create.$setPristine();
$scope.user={};
};
});
userApp.controller("UserDetailController", function($scope, $state, $stateParams, Se_user){
$scope.code=Se_user.findByID({id: $stateParams.user_id}); //Get record for specific user ID
});
userApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url:'/home',
templateUrl:'partial-home.html',
controller:'UserController'
})
.state('create', {
url:'/create',
templateUrl:'partial-create.html',
controller:'CreateUserController'
})
.state('edit',{
url:'/edit',
templateUrl:'partial-edit.html',
contoller: 'UserDetailController'
})
});
})();
部分-home.html
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<h1>All Users</h1>
</div>
<br>
<div class="col-md-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div><!--/.container-fluid -->
<div class="container-fluid" ng-controller="UserController as users">
<table class="table table-hover">
<thead>
<tr>
<th>EID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Active</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.eid}}</td>
<td>{{user.first_nm}}</td>
<td>{{user.last_nm}}</td>
<td>{{user.active}}</td>
</tr>
</tbody>
</table>
</div>
<div ui-view></div>
部分-create.html
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<h1>Create a User</h1>
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="container-fluid" ng-controller="CreateUserController">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="create-form" role="form" ng-submit="add(code)" name="create">
<div class="form-group">
<label for="user_eid">EID</label>
<input type="text" class="form-control" ng-model="user.user_eid" placeholder="Enter EID">
</div>
<div class="form-group">
<label for="user_first_nm">First Name</label>
<input type="text" class="form-control" ng-model="user.user_first_nm" placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="user_last_nm">Last Name</label>
<input type="text" class="form-control" ng-model="user.user_last_nm" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label for="user_email_adr">Email Address</label>
<input type="text" class="form-control" ng-model="user.user_email_adr" placeholder="Enter Item Type">
</div>
<div class="form-group">
<label for="user_role">Role</label>
<input type="text" class="form-control" ng-model="user.user_role" placeholder="Enter Status Code">
</div>
<div class="form-group">
<label for="user_active">Active</label>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" ng-model="user.user_active" checked>
Yes
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" ng-model="user.user_active">
No
</label>
</div>
</div>
<div class="form-group">
<label for="insrt_dt">Creation Date</label>
<input type="date" class="form-control" ng-model="code.insrt_dt" placeholder="Enter Creation Date">
</div>
<div class="form-group">
<label for="insrt_user_id">Creator EID</label>
<input type="text" class="form-control" ng-model="code.insrt_user_id" placeholder="Enter Creator EID">
</div>
<div class="form-group">
<label for="upd_dt">Update Date</label>
<input type="date" class="form-control" ng-model="code.upd_dt" placeholder="Enter Update Date">
</div>
<div class="form-group">
<label for="upd_user_id">Update User EID</label>
<input type="text" class="form-control" ng-model="code.upd_user_id" placeholder="Enter Update User EID">
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button type="submit" class="btn btn-primary btn-lg">Submit</button>
</div>
</div>
<pre>{{user | json}}
</pre>
</form>
</div>
</div>
</div>
I am seeing the following error when I run the web-app on a localhost: TypeError: Cannot set property '$save' of undefined at module.factory.config.factory.provider.$get (http://127.0.0.1:62557/client/js/lb-services.js:2409:34)
此外,我不是 运行 $http 脚本,因为我已经安装并正在使用 lb-services 进行调用和 return 请求。问题在于我无法向数据库发送请求或从数据库中提取数据。我也是 运行 节点。
非常感谢任何帮助或见解!!
您在 https://github.com/strongloop/loopback-example-angular 看到我的示例了吗?如果您仍然 运行 遇到问题,请告诉我。
我知道哪里出了问题!
我的 lbservices.js 文件使用基数 URL 的 '/api' 而它需要是 'http://localhost:3000/api'。
感谢您的帮助!!