Introduction Marko Marić, Danulabs 2014.
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: Expressions Compiler Filters View Data Binding 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 View knows about Controller View $scope ng-controller directive Directive sees Controller's scope Model: prop_1, prop_2, ... ng-model="prop_1" {{prop_1}} 2-way data binding Behavior: method_1(), method_2(), ... Calling Controller's behavior ng-click="method_1()"
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.