simple-crud-elixir-phoenix-angularjs

KO | EN

gitlite — search

#javascript #hacktoberfest #react #golang #android #linux #macos #java #awesome #pytorch #security #ios #openai #open-source

simple-crud-elixir-phoenix-angularjs

(★ 10)

Simple Crud with Elixir / Phoenix / Angular JS

simple-crud-elixir-phoenix-angularjs 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Simple Crud using Elixir, Phoenix and Angular JS
=================================================
This example is upgrade of Simple Crud in Angular JS [tutorial](https://github.com/tiagobarreto/simple-crud-angular-js) from my [blog](http://tiagobarreto.com). This is a shopping list with filter, delete and edit products.

Information about the install Erlang VM, Elixir and Phoenix in my [blog](http://www.tiagobarreto.com/muito-prazer-elixir-e-phoenix/).

Install and start project
-----------------------------
- Install dependencies with <code>mix deps.get</code>
- Create and migrate your database with <code>mix ecto.create</code> && <code>mix ecto.migrate</code>. This project uses MySQL but your can to use PostgreSQL, SQLite, etc, just change the adapter in your configurations.
- Install Node.js dependencies with <code>npm install</code>
- Start project with <code>mix phoenix.server</code>
- Now you can visit http://localhost:4000 from your browser.

List Products in Controller
-----------------------------------
List products model defined by controller.js in Angular JS (GET http://localhost:4000/api/products):

<pre>
 $http({method: 'GET', url: 'api/products?format=json'}).then(
 function successCallback(response) {
 $scope.itens = response.data.data;
 },
 function errorCallback(response) {
 toastr.error("Error for loading products in your shopping list");
 });
</pre>

List Products in View
-----------------------------------
Show products in view:

![List Products](https://github.com/tiagobarreto/simple-crud-angular-js/blob/master/img/docs/list-products.png)

<pre>
	&lt;div ng-controller="ListaComprasController"&gt;
		&lt;table&gt;
 			&lt;thead&gt;
 			&lt;tr&gt;
 				&lt;th&gt;Produto&lt;/th&gt;
 				&lt;th&gt;Quantidade&lt;/th&gt;
 			&lt;/tr&gt;
 			&lt;/thead&gt;
 			&lt;tbody&gt;
 			&lt;tr ng-repeat="item in itens"&gt;
 				&lt;td&gt;&lt;strong&gt;{{ item.produto }}&lt;/strong&gt;&lt;/td&gt;
 				&lt;td&gt;{{ item.quantidade }}&lt;/td&gt;
 			&lt;/tr&gt;
 			&lt;/tbody&gt;
		&lt;/table&gt;
	&lt;/div&gt;
</pre>

Filter Products in View
-----------------------------------
Added the filter attr in the ng-repeat to enabled filter:

![Filter Product](https://github.com/tiagobarreto/simple-crud-angular-js/blob/master/img/docs/filter-products.png)

<code>&lt;tr ng-repeat="item in items | filter:search"&gt;</code>

Also added a input text to search products:

<code>&lt;input type="search" ng-model="search" placeholder="Search by…"&gt;</code>

Add Products
-----------------------------------
Add products in view:

<pre>
	&lt;form name="products"&gt;
 	&lt;input type="text" ng-model="item.product"&gt;
 	&lt;input type="number" ng-model="item.amount"&gt;
 	&lt;button ng-click="addItem()">add item&lt;/button&gt;
	&lt;/form&gt;
</pre>

Functions in controller.js (POST http://localhost:4000/api/products):

<code>Add item in the items array</code>
<pre>
	$scope.addItem = function () {
 $http({method: 'POST', url: 'api/products/', data: { 'products' : $scope.item }}).then(
 function successCallback(response) {
 $scope.itens.push(response.data.data);
 $scope.item.produto = $scope.item.quantidade = '';
 toastr.success("Item added.");
 },
 function errorCallback(response) {
 toastr.error("Error for add product.");
 });
 };
</pre>

Remove Products
-----------------------------------
Remove products in view:

<pre>
	&lt;button class="btn btn-danger btn-small" ng-click="deleteItem($index)"&gt;
 	&lt;i class="icon-trash icon-white"&gt;&lt;/i&gt; remove
	&lt;/button&gt;
</pre>

Function to delete item in Controller.js (DELETE http://localhost:4000/api/products/{id}):

<pre>
 $scope.deleteItem = function(index){
 $http({method: 'DELETE', url: 'api/products/' + $scope.itens[index].id}).then(
 function successCallback(response) {
 $scope.itens.splice(index, 1);
 toastr.success("Item removed.");
 },
 function errorCallback(response) {
 toastr.error("Error for remove product.");
 });
 };
</pre>

Edit Products
-----------------------------------
![Edit Product](https://github.com/tiagobarreto/simple-crud-angular-js/blob/master/img/docs/edit-products.png)

Edit products used the main button from form to change the product with the <code>ng-hide</code> and <code>ng-show</code> in view and your controller (PUT http://localhost:4000/api/products/{id})::

<pre>
	$scope.editItem = function(index){
 	$http({method: 'PUT', url: 'api/products/' + $scope.item.id, data: { 'products' : $scope.item }}).then(
 function successCallback(response) {
 $scope.item = {};
 $scope.edit = false;
 toastr.success("Item saved.");
 },
 function errorCallback(response) {
 toastr.error("Error for edit product.");
 });
	};
</pre>

Libs used by example
--------------------------------------------
 * Bootstrap
 * Version: [3.0.0](https://github.com/twbs/bootstrap/archive/v3.0.0.zip)
 
 * Toastr
 * Version: [2.0.0](https://github.com/CodeSeven/toastr/blob/master/toastr.js)
 
 * jQuery
 * Version: [2.2.0](http://code.jquery.com/jquery-2.2.0.js)
 
 * Angular JS
 * Version: [1.0.1](https://github.com/angular/code.angularjs.org/blob/master/1.0.1/angular-1.0.1.min.js)

simple-crud-elixir-phoenix-angularjs

simple-crud-elixir-phoenix-angularjs 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

simple-crud-elixir-phoenix-angularjs

simple-crud-elixir-phoenix-angularjs 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README