Skip to content
This repository has been archived by the owner. It is now read-only.
JavaScript CSS HTML
Branch: master
Clone or download
Latest commit 4e90283 Sep 21, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Fixed toast messages. Feb 14, 2016
css Fixed toast messages. Feb 14, 2016
img Added doc images Jan 29, 2016
lib Fixed toast messages. Feb 14, 2016
tests Rename tests folder Jan 21, 2016
README.md Update README.md Sep 20, 2016
helloworld.html remove whitespaces Jan 22, 2016
index.html Fixed toast messages. Feb 14, 2016

README.md

Angular JS: an overview

This example is upgrade of angular js tutorial from Tableless by Davi Ferreira. Features added in the code: Filter, Delete and Edit Products, complete crud.

Brunch.io

npm install -g brunch

ng-controller (ng-controller="myController")

ng-model (ng-model="item.name")

ng-view (ng-view)

ng-click (ng-click="myFunction()")

ng-repeat (ng-repeat="item in itens")

ng-hide|show (ng-hide="boolean") ng-href (ng-href="link")

ng-init (ng-init="expression")

ng-readonly (ng-readonly="expression")

ng-disabled (ng-disabled="expression")

See Angular JS Cheat Sheet.

Hello World

Below the basic example with angular js:

	<html ng-app>
		<head>
			<title>Basic Example with Angular JS </title>
			<script src="js/libs/angular-1.0.1.min.js"></script>
		</head>
		<body>
			<input type="text" ng-model="name" placeholder="Type your name">
        	<p>Hello {{ name }} !</p>
		</body>
	<html>

See JSFiddle.

List Products in Controller

Store products in items model defined by controller:

	function ListProductsController($scope) {
    	$scope.items = [
        	{product: 'Milk', amount: 2, purchased: false},
        	{product: 'Beer', amount: 12, purchased: false}
    	];
	}

Now, list products with http request to return items json:

	function ListProductsController($scope) {
		$scope.fetchProductsList = function() {
    		$http.get('http://www.url.com/products').success(function(products){
        		$scope.items = products;
    		});
		}
	}

List Products in View

Show products in view:

List Products

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

Filter Products in View

Added the filter attr in the ng-repeat to enabled filter:

Filter Product

<tr ng-repeat="item in items | filter:search">

Also added a input text to search products:

<input type="search" ng-model="search" placeholder="Search by…">

Add Products

Add products in view:

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

Functions in controller:

Add item in the items array

	$scope.addItem = function () {
    	$scope.items.push({product: $scope.item.product, amount: $scope.item.amount, purchase: false});
	};

Add item with HTTP Request

	$scope.addItem = function(product) {
    	$http.post('/products/', product).success(function(product) {
        	toastr.success("Item added.");
        	$scope.items.push(product);
     	}).error(function(data) {
        	toastr.error("Fail on adding product.");
    	});
 	};

Remove Products

Remove products in view:

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

Function to delete item in Controller

	$scope.deleteItem = function(index){
    	$scope.items.splice(index, 1);
	};

Edit Products

Edit Product

Edit products used the main button from form to change the product with the ng-hide and ng-show in view:

	$scope.editItem = function(index){
    	$scope.item = $scope.items[index];
	};

Routes Application

	var application = {};

	var App = angular.module('application');

	App.config(['$routeProvider', function ($routeProvider) {
    	$routeProvider
        	.when('/products', { templateUrl: 'views/products/list.html', controller: ProductsControllers })
        	.when('…', { templateUrl: '…', controller: ... });
	}]);

Libs used by example

More Details

Other projects

You can’t perform that action at this time.