.
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
