Javascript 模板未显示在angularjs+；rails应用程序

products_controller.js

模板/products/index.html

产品
名称
价格
描述
未找到任何产品，请创建一个。
{{product.name}
{{product.price}}
{{product.description}}
| 

*当我转到Url:localhost:3000/products时，它会显示空白页面。 我在application.js中添加了//=require angularjs rails。

---

我是新来的。请帮帮我*

您只需给出视图的路径，如下所示：

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'
     });
   }
 ]);

---

控制台中是否显示错误？我注意到您正在将查询作为函数调用：$scope.products=products.query（）；当查询是一个对象时？您能解释一下为什么写这行“$scope.product={name}”吗？scope是一个引用应用程序模型的对象。它是表达式的执行上下文。所以在这里，您试图访问产品

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

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'
     });
   }
 ]);