Marko Marić, Danulabs 2014. Introduction. Content What is Angular? Building blocks REST easy...
25
Marko Marić, Danulabs 2014. Introduct ion
-
Upload
ethelbert-jennings -
Category
Documents
-
view
217 -
download
0
Transcript of Marko Marić, Danulabs 2014. Introduction. Content What is Angular? Building blocks REST easy...
Marko Marić, Danulabs 2014.
Introduction
Content
• What is Angular?• Building blocks • REST easy• Testing• Pros & Cons• Usefull references
What is Angular?
• A client-side framework (fluid user interface, less preasure on server side and communnication).• "Superheroic JavaScript MVW Framework" (MVC, MVP, MVVM). • It is a framework for adding interactivity to HTML (directives,
expressive HTML).• It reduces the amount of JavaScript coding you have to do, and it
makes it easier to see what your application does (modules, DI, services, code reusability).
Building blocks:
Templates Directives Model Events
Expressions Compiler Filters View Data Binding
Scope Factories Routing Services Dependecy Injection E2E Testing Injector
Module Promises Unit Testing Providers Cache Factory
Animations Bootstrap Controller Transclusion
Building blocks: Modules
• Where we write pices of our Angular application (Angular modules).• Dependancy Injection mechanism enables dependencis between
modules (load only modules that are actualy needed).• Reusability (use one module in different parts of application).• The code is more maintanable and testable.
var app = angular.module('helloWorld', []);
+
<script src="js/angular.js">
Building blocks: Directives
• Directives let you invent new HTML syntax, specific to your application (unique feature of Angular, reusability).• HTML annotations that trigger JS behaviors.• Angular comes with a set of built-in directives: ng-app, ng-controller, ng-model,
ng-repeat, ng-view, ng-class, ng-animation, ng-src, etc.• Custom directives (expressive HTML - HTML expresses the behavior of the app).• It is where DOM manipulation should happen.
app.directive('bookTitle', function()
{restrict: 'E', templateUrl: 'book-title.html'});
Building blocks: Directives
Expressive HTML:<body ng-app="app">
<aside class="col-sm-3">
<book-cover></book-cover> <h4><book-rating></book-rating></h4></aside>
<div class="col-sm-9">
<h3><book-title></book-title></h3> <book-authors></book-authors> <book-review-text></book-review-text> <book-genres></book-genres></div>
</body>
Building blocks: [Two Way] Data Binding• The view is a projection of the model at all times. When the model
changes, the view reflects the change, and vice versa (no need for writing the code that syncs the model and DOM).• The data-binding directives (eg. ng-model) provide a projection of
your model to the application view.• Because the view is just a projection of the model, the controller is
completely separated from the view and unaware of it (controller testing).
Building blocks: Scope
• Scope is an object that refers to the application model.• Both controllers and directives (view) have reference to the scope,
but not to each other. This arrangement isolates the controller from the directive as well as from DOM.• Arranged in hierarchical structure ($rootScope att the top).• Scope object is accessible in all child HTML elements.• Scopes can watch expressions ($watch) and propagate events
($broadcast, $emit).
Building blocks: Controllers
• It is where we add application behavior (business logic behind the views).• Controller has its own scope (scope properties as model, scope
functions as behavior).• Controller is attached to the DOM via the ng-controller directive.
app.controller('appController', function($scope) {
$scope.message = 'Hello World';
$scope.say= function(newMessage) { $scope.message = newMessage; }
});
Building blocks: Controllers
Controller
$scope
Model:prop_1,prop_2, ...
Behavior:method_1(),method_2(), ...
ViewView knows about Controller
Directive sees Controller's scopeng-controller directive
ng-model="prop_1"{{prop_1}}2-way data binding
ng-click="method_1()"Calling Controller's behavior
Exercise 01 - Getting there(DanulabsBookstore_WebLayer/Exercise01)
• Angular aplication configuration (ng-app)• Creating and attaching a controller (ng-controller)• Implementing ng-repeater directive (ng-repeater)• Implementing search and sort (ng-model, filter, orderBy)• Modularization (DI)
Exercise 02 - Scoping (DanulabsBookstore_WebLayer/Exercise02)
• Using scopes($scope)• Using events ($on, $emit, $broadcast)• Using watces($watch)
Exercise 03 - My directives (DanulabsBookstore_WebLayer/Exercise03)
• Building custom directives• Using templates
Building blocks: Routing & Multiple Views• Enables multiple views (view-templates) on a sningle page (Single
Page Application).• $routeProvider wire together controllers, view templates, and the
current URL location in the browser.• "layout template" - a template that is common for all views in our
application (Master page).• Deep linking (SPA navigation).• Requires ngRoute module to be referenced.
Exercise 05 - Route (DanulabsBookstore_WebLayer/Exercise05)
• Routing ($routeProvider, config)• Layout template• View template
Building blocks: Services
• Use services to organize and share code across your app (reusable business logic independent of views).• Singletons & lazily instantiated (only when application component
depends on it ) & dipendency injected.• Service types: Constants, Values, Factories, Services, Providers,
Decorators.• Custom services and built-in services ($http, $q, $httpBackend,
$timeout, $window, $rootScope, etc.).• Usage: session, authentication, communication between controllers
Building blocks: Breaking the code
Modules
Services Controllers
Directives Filters Constants
REST easy
• $resource - A factory which creates a resource object that lets you interact with RESTful server-side data sources.• Requires ngResource module to be referenced.• Returns "class" object with methods for the default set of resource
actions (get, save, query, remove, delete).• Dependent on $http service.
Exercise 04 - REST in peace (DanulabsBookstore_WebLayer/Exercise04)
• Using Factory services• Interacting with RESTful services ($html, $resource)• Custom methods• Passing objects
Testing
• Angular is designet to be testable (behavior-view separation, pre-bundled mocks, dependency injection).• Unit tests (ensure that the JavaScript code in our application is
operating correctly) - Karma Test Runner + Jasmine.• End-to-end tests (ensure that the application as a whole operates as
expected) - Protractor E2E test framework for Angular.• PhoneCat example.
Pros & Cons
Pros:• Good framework for data manipulation apps (CRUD), Single Page
Applications.• Directives - expend HTML.• Angular handles dependencies.• Test ready JS freamwork.• Two way data-binding - model as the single-source-of-truth of app.• Maintanable - Modular, reusable, declarative JS & expressive HTML.• REST easy
Pros & Cons
Cons:• Documentation is a mess - no real production app examples.• Learning curve is steep - not intuitive framework (jQuery).• Many common DOM actions are supported poorly.• Directives sometimes don't work well together.• Not good for apps that require heavy DOM manipulation, game
programming, small applications .
Usefull references
• Documentation: Official Angular Site.• Tutorials:
• AngularJS Fundamentals In 60-ish Minutes• Shaping up With AngularJS (source code on Plunker)• Official PhoneCat Tutorial• Dan Wahlin - Learning Angular by Example
• News/Blogs: • Dan Wahlin Blog• @angularjs• +AngularJS• Misko Hevery Blog
• Tools/Libraries: • AngularUI• AngularModules• AngularJS Batarang• Karma Test Runner
• Presentation code exercises: • Danulabs Bookstore Data Layer (https://git01.codeplex.com/dlbookstoredatalayer) • Danulabs Bookstore Web Layer (https://git01.codeplex.com/dlbookstoreweblayer)
Tnx for listening.
