Step 1 – Step 2 – Step 3

View Github Repository Open presentation in a new window

PierreZ

See all presentation from PierreZ

Step 1 – Step 2 – Step 3

0 0

angularjs-bootcamp-2014

A reveal-JS presentation about AngularJS - Bootcamp given at ISEN

On Github PierreZ / angularjs-bootcamp-2014

Created by Pierre Zemb / @PierreZ

+Me

  • French engineer student at ISEN Brest
  • CIR student
  • Part-time internship at Crédit Mutuel Arkéa

Just to clarify

I'm just a student!

It's time for you to work!

The goal?

Create a Web-based app to show students with AngularJS

Step 0

Step 1

Enable Angular

  • add ng-app
  • add a controller

index.html

<html lang="en" ng-app='studentApp'>
...
<body ng-controller='Ctrl'>

app.js

var myApp = angular.module('studentApp', []);
myApp.controller('Ctrl', function () {

});

Step 2

Try the double data binding

  • create a object with the right attributes...
  • ...and show it

index.html

<div class="col-lg-4 student">
<span class="glyphicon glyphicon-remove"></span>
<h2>{{student.name}}</h2>
<p>{{student.class}}</p>
<p>{{student.text}}</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>

app.js

var myApp = angular.module('studentApp', []);
myApp.controller('Ctrl', function ($scope) {
	$scope.student = { 
		"name": "Pierre Zemb",
		"class" : "CIR3" ,
		"text" : "Seems like a nice guy"
	}
});

Step 3

What about more students?

  • Create an array of students
  • Loop into it with ng-repeat

app.js

$scope.students = new Array();
$scope.students.push({ 
	"name": "Pierre Zemb",
	"class" : "CIR3" ,
	"text" : "Seems like a nice guy"
});
	$scope.students.push({ 
	"name": "Brendan",
	"class" : "CIR1" ,
	"text" : "Seems like a weird guy"
});

index.html

<div class="col-lg-4 student" ng-repeat="student in students">

Step 4

What about searching?

  • create an input and bind it with ng-model
  • filter your ng-repeat with it...

index.html

</ul>
<div class="row">
  <input class="search-query" type="text" ng-model="search" 
  	placeholder="Search a student"></div>
</div>
...
<div class="col-lg-4 student" 
	ng-repeat="student in students | filter:search-query">

Step 5

Remove a student

  • Add ng-click to the span-delete
  • Create an function to remove the student

index.html

<span ng-click="remove(student.name)" 
	class="glyphicon glyphicon-remove"></span>

app.js

$scope.remove = function (name){
	angular.forEach($scope.students, function(student,key) {
  		if (student.name==name) {
  			$scope.students.splice(key,1);
  		};
	});
};

Step 6

Add a student

  • Bind form to student using ng-model
  • Use ng-click

app.js

						
$scope.addStudent = function (){
	$scope.students.push($scope.new_student);
};

index.html

						
<input type="text" name="nom" id="nom" ng-model="new_student.name"/>
<input type="class" name="class" id="class" ng-model="new_student.class"/>
<input type="text" name="text" id="text" ng-model="new_student.text"/>
<button type="button" class="btn btn-default navbar-btn"
	ng-click="addStudent()">Add</button>

Step 7

What about tabs?

  • Create a array containing the classes
  • Use it to generate the tabs
  • Show only students matching the selected class

index.html

						
<ul class="nav nav-tabs">
	<li  ng-class="{active: class == selected}"
			ng-repeat="class in classes"
			ng-click="setSelected(class)"><a href="#"></a></li>
</ul>
...
<div ng-if="student.class == selected || selected == 'All' " 
	class="col-lg-4 student"
	ng-repeat="student in students | filter:search | orderBy:'class'">

app.js

						
$scope.classes = new Array();
$scope.classes.push("All");
$scope.setSelected = function (select){
	$scope.selected = select;
}

THE END

Questions?