Template is not showing in angularjs + rails application

Question

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>

*When I go to the Url: localhost:3000/products, it shows blank page. I have added //= require angularjs-rails in application.js . I am new in angular-js. Please help me. *

Answer 1

you just give the path for view like as:

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