Get satrted angular js day 2
32
WorkShop Getting Start With ANGULAR 2015, Alexandre Marreiros Powered BY
-
Upload
alexandre-marreiros -
Category
Technology
-
view
336 -
download
0
Transcript of Get satrted angular js day 2
WorkShopGetting Start With
ANGULAR2015, Alexandre Marreiros
Powered BY
2015AlexandreMarreiros
AboutCTO @ Innovagency
Technical Trainer, Speaker & Consultant as Self Employee
Lecturer @ EDIT
Software Developer & Architect as Consultant
Tech Writer and Reviewer as Self Employee
Digital Technical UX Consultant
Microsoft DevCamp Trainer
Microsoft Most Valuable Professional for Windows Platform
MCPD
Alexandre Marreiros
Contacts:[email protected] / [email protected]@alexmarreiroshttp://www.linkedin.com/pub/alexandre-marreiros/8/4b8/a21www.digitalmindignition.com
WorkShopr Getting Start W
ithANGULAR
Feel free to put your Questions nowOr if you prefer use one off my contacts
@[email protected]@innovagency.comwww.digitalmindignition.com
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
Day 1 Questions
Consuming WEBApisJason Based
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
http service WorkShopr Getting Start W
ithANGULARServices consumption is made using a promessie
approach, in the case off the http, we have a method representing each verb. We have also a response explaining if the http call had been succeeded or not.
Next we will analyse the 2 fundamental verbs post and get
2015AlexandreMarreiros
http service WorkShopr Getting Start W
ithANGULARGet method
$http.get('/someUrl'). success(function(data, status, headers, config) {
// this callback will be called asynchronously // when the response is available
}). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error
status. });
2015AlexandreMarreiros
http service WorkShopr Getting Start W
ithANGULARPost method
$http.post('/someUrl‘,{msg:’hi there’}). success(function(data, status, headers, config) {
// this callback will be called asynchronously // when the response is available
}). error(function(data, status, headers, config) { // called asynchronously if an error occurs // or server returns response with an error
status. });
DemoCreate a SPA that conseumes GitHub
page
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
http service WorkShopr Getting Start W
ithANGULARmethods
$http.get $http.post$http.put $http.delete$http.jsonp $http.patch
Services
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
Service WorkShopr Getting Start W
ithANGULARAs http that is offered as a service on the platform we
have a lot off other Services available.
What is a service:“In Angular, the term "services" refers to singleton references to objects and functions that carry out specific tasks. Angular provides several built-in services for everything from manipulating the URL in the browser, running code at regular intervals, and interfacing with Web services to managing asynchronous workflows using JavaScript promises. ” Wintellect
Templating
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
Templating WorkShopr Getting Start W
ithANGULARAs we already seen with binding we can bind to a
specific model and even in two directions.
Using the bind system we can also define the way our elements renders himself, once the ng-bind directive is applied to an HTML tag.
If I bind a collection I can use the same logic to build templates that are used across the different elements.
DEMO
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
Templating WorkShopr Getting Start W
ithANGULAR
<ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span> <p>{{phone.snippet}}</p>
</li> </ul>
2015AlexandreMarreiros
Templating WorkShopr Getting Start W
ithANGULAR
Filtering
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
Filtering WorkShopr Getting Start W
ithANGULAR
Routing
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
Routes WorkShopr Getting Start W
ithANGULAR
How to know or control where the user is and what’s the path he had used t navigate, and how to allow the browser to use the history or mark a part off the SPA.
For that Angular offers a Routing engine, considering that:- Routing is based on a URL;- Routing engines catch requests;- Routing rules renders a response;
2015AlexandreMarreiros
Routes WorkShopr Getting Start W
ithANGULAR
How to know or control where the user is and what’s the path he had used t navigate, and how to allow the browser to use the history or mark a part off the SPA.
For that Angular offers a Routing engine, considering that:- Routing is based on a URL;- Routing engines catch requests;- Routing rules renders a response;
Angular is an advanced feature and lives as a autonomous module that you can quest
-angular-route.js
So to configure Routes you must instantiate this scrit on your machine.
2015AlexandreMarreiros
Routes WorkShopr Getting Start W
ithANGULAR
To configure Route engine you can use the an object named $routeProvider
On Route provider we configure what’s the template who leaves to a certenly controller.
$routeProvider.when(/main, {templateUrl:”main.html”,controller:”MainController”
})
2015AlexandreMarreiros
Routes WorkShopr Getting Start W
ithANGULAR
Unit/Automatic Test
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
Unit Test WorkShopr Getting Start W
ithANGULAR
“Unit testing, as the name implies, is about testing individual units of code. Unit tests try to answer questions such as "Did I think about the logic correctly?" or "Does the sort function order the list in the right order?“”
2015AlexandreMarreiros
Unit Test WorkShopr Getting Start W
ithANGULAR
https://docs.angularjs.org/guide/unit-testing
http://www.pluralsight.com/courses/play-by-play-angular-testing-papa-bell
Future Prespectives
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
Demo / ExercisesTraining Angular
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
WrapUP
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
Feel free to put your Questions nowOr if you prefer use one off my contacts
@[email protected]@innovagency.com 2015
AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
Questions
My Contacts@[email protected]@innovagency.comwww.digitalmindignition.com
2015AlexandreMarreiros
WorkShopr Getting Start W
ithANGULAR
Keep in Touch
Collaborate
https://www.facebook.com/groups/angularjsWorkshop1/
