angularjs+rails应用程序中未显示模板
Template is not showing in angularjs + rails application
products_controller.js
var myApp1 = angular.module('myapplication', ['ngRoute', 'ngResource']);
//Factory
myApp1.factory('Products', ['$resource',function($resource){
return $resource('/products.json', {},{
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
myApp1.factory('Product', ['$resource', function($resource){
return $resource('/products/:id.json', {}, {
show: { method: 'GET' },
update: { method: 'PUT', params: {id: '@id'} },
delete: { method: 'DELETE', params: {id: '@id'} }
});
}]);
//Controller
myApp1.controller("ProductListCtr", ['$scope', '$http', '$resource', 'Products', 'Product', '$location', function($scope, $http, $resource, Products, Product, $location) {
$scope.products = Products.query();
$scope.deleteProduct = function (productId) {
if (confirm("Are you sure you want to delete this product?")){
Product.delete({ id: productId }, function(){
$scope.products = Products.query();
$location.path('/');
});
}
};
}]);
myApp1.controller("ProductUpdateCtr", ['$scope', '$resource', 'Product', '$location', '$routeParams', function($scope, $resource, Product, $location, $routeParams) {
$scope.product = Product.get({id: $routeParams.id})
$scope.update = function(){
if ($scope.productForm.$valid){
Product.update({id: $scope.product.id},{product: $scope.product},function(){
$location.path('/');
}, function(error) {
console.log(error)
});
}
};
}]);
myApp1.controller("ProductAddCtr", ['$scope', '$resource', 'Products', '$location', function($scope, $resource, Products, $location) {
$scope.product = {:name, :price, :description }]}
$scope.save = function () {
if ($scope.productForm.$valid){
Products.create({product: $scope.product}, function(){
$location.path('/');
}, function(error){
console.log(error)
});
}
}
}]);
//Routes
myApp1.config([
'$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/products',{
templateUrl: '/templates/products/index.html',
controller: 'ProductListCtr'
});
$routeProvider.when('/products/new', {
templateUrl: '/templates/products/new.html',
controller: 'ProductAddCtr'
});
$routeProvider.when('/products/:id/edit', {
templateUrl: '/templates/products/edit.html',
controller: "ProductUpdateCtr"
});
$routeProvider.otherwise({
redirectTo: '/products'
});
}
]);
templates/products/index.html
<br/>
<div class="row">
<div class="col-md-12">
<a class="btn btn-primary" href="#/products/new">Create a product</a>
<h3 class="block">Products</h3>
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Price</th>
<th>Description</th>
<th></th>
</tr>
<tr ng-hide="products.length" >
<td colspan="5">No products found, Please create one.</td>
</tr>
<tr ng-show="products.length" ng-repeat="product in products">
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.description}}</td>
<td>
<a href="#/products/{{product.id}}/edit">Edit</a> | <a href="" ng-click="deleteProduct(product.id)">Remove</a>
</td>
</tr>
</table>
</div>
</div>
*当我转到Url:localhost:3000/products时,它显示一个空白页面。我在application.js中添加了//=需要angularjs导轨。我是新来的棱角分明的js。请帮帮我。*
您只需为视图提供如下路径:
var myApp = angular.module('myapplication', ['ngRoute', 'ngResource']);
//Factory
myApp.factory('Products', ['$resource',function($resource){
return $resource('/products.json', {},{
query: { method: 'GET', isArray: true },
create: { method: 'POST' }
})
}]);
myApp.factory('Product', ['$resource', function($resource){
return $resource('/products/:id.json', {}, {
show: { method: 'GET' },
update: { method: 'PUT', params: {id: '@id'} },
delete: { method: 'DELETE', params: {id: '@id'} }
});
}]);
//Controller
myApp.controller("ProductListCtr", ['$scope', '$http', '$resource', 'Products', 'Product', '$location', function($scope, $http, $resource, Products, Product, $location) {
$scope.products = Products.query();
$scope.deleteProduct = function (productId) {
if (confirm("Are you sure you want to delete this product?")){
Product.delete({ id: productId }, function(){
$scope.products = Products.query();
$location.path('/#/products');
});
}
};
}]);
myApp.controller("ProductUpdateCtr", ['$scope', '$resource', 'Product', '$location', '$routeParams', function($scope, $resource, Product, $location, $routeParams) {
$scope.product = Product.get({id: $routeParams.id})
console.log(Product.get({id: $routeParams.id}));
$scope.update = function(){
if ($scope.productForm.$valid){
Product.update({id: $scope.product.id},{product: $scope.product},function(){
$location.path('/products');
}, function(error) {
console.log(error)
});
}
};
}]);
myApp.controller("ProductAddCtr", ['$scope', '$resource', 'Products', '$location', function($scope, $resource, Products, $location) {
$scope.product = {name}
$scope.save = function () {
if ($scope.productForm.$valid){
debugger
Products.create({product: $scope.product}, function(){
$location.path('/products')
}, function(error){
console.log(error)
});
}
}
}]);
Routes
myApp.config([
'$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/products',{
templateUrl: '/templates/products/index.html',
controller: 'ProductListCtr'
});
$routeProvider.when('/products/new', {
templateUrl: '/templates/products/new.html',
controller: 'ProductAddCtr'
});
$routeProvider.when('/products/:id/edit', {
templateUrl: '/templates/products/edit.html',
controller: "ProductUpdateCtr"
});
$routeProvider.otherwise({
redirectTo: '/products'
});
}
]);
相关文章:
- 使用电话间隙在Android应用程序中显示SQL Lite的数据
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- angularjs+rails应用程序中未显示模板
- 使用谷歌应用程序脚本从工作表中获取值并将其显示在文本框中
- 谷歌图表在运行应用程序时只能显示一次
- 应用程序在呈现Jquery Mobile之前显示无样式的Html
- 如何下载图像并将其显示在NativeScript应用程序中
- 为我的rails应用程序显示javascript弹出消息
- 无法在Chrome(打包)应用程序上检测到ESC按钮(全屏显示时)
- InvalidOperationException:当应用程序未在UserInteractive模式下运行时显示模式对话
- 在聊天应用程序中显示联机用户
- 如何通过ibmworklight中的sql适配器从db2中检索或显示html页面上的数据?android混合应用程序开发
- 如何在angular js的ng应用程序中以普通的htm显示标签
- React/Node应用程序中的Facebook评论插件.js仅在刷新时显示
- NodeJS应用程序只显示第一个JSON对象.为什么?
- 图书获胜't阅读器应用程序练习显示
- D3图表未在Android混合应用程序中显示
- 我可以使用Firebug来显示应用程序的对象吗?
- 如何在Mvc中显示应用程序的每页中的搜索框
- Digital Publishing Suite Web Viewer未显示应用程序