.
DANNIEL CONDEZ
Software ENGINEER
@
WEB 5 years ago
WEB TODAY
RUBY ON RAILS
a breakthrough in lowering
the barriers of entry to programming.
HOW easy
is it to BUILD A
RESTFUL API?
DEMO
CONSUMING RAILS API
WITH
ANGULARJS
What is Angular?
A structural framework
for
dynamic web apps
Two-way Data-Binding
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name">
<hr>
<h1>Hello {{ yourName } } !</h1>
Name:
Hello {{yourName}}!
$scope is the glue
between
controller <=> the view.
$scopE
function MyCtrl($scope) { $scope.yourName2 = '<Please type a name>'; $scope.resetName = function () { $scope.yourName2 = '<Please type a name>'; } }
// Input and Button HTML: <input ng-model="yourName2" placeholder="Enter a name">
<button ng-click="resetName()">Reset</button>
My Name is {{yourName2}}
HOW easy
is it TO CONSUME
RESTFUL APIs
with
more AngularJS
Controllers
Do not use Controllers for
- Any kind of DOM
Manipulation
- encapsulate to
directives
- View Formatting and filtering
- use angular filters
- Data logic, sharing states across controllers
- use angular services
Directives
Directives are a way to teach HTML new tricks
Ways to invoke a directive
// Attribute
<span my-dir="exp"></span>
// Class
<span class="my-dir: exp;"></span>
// Element
<my-dir></my-dir>
// Comment
<!-- directive: my-dir exp -->
Directives
Are
Awesome
Let's Learn by
Example
FILTERS
// Mustache filters
{{salary | number:2} }
// Data filtering
<tr ng-repeat="emp in employees | filter:'sarah'">
<td>{{emp.name}}</td> </tr>
// PIPING!!! #FTW
<tr ng-repeat="emp in employees | dept:'Engineering' | skill:'Rails'">
<td>{{emp.name | allCaps } }</td>
</tr>
MVC
fat
MODELS
skinny
CONTROLLERS
EATING CHEETOS
THE RIGHT WAY
:)
THANK YOU!!
Rails RESTful API + AngularJS
By ducondez
Rails RESTful API + AngularJS
- 1,843