kanedaki / Redradix-course-angular-november2015

Angular Course

Description:

• This project contains all the material that will be used during the course.
• Theory and exercises grouped by subject.
• TEMA11 is a Web project grouped by features.
• Run npm install in order to install the app.
• Run node server.js in order to start the server.
• Run npm test in order to run the unit tests.
• Run npm run protractor in order to run the e2e tests.

Goals

• We will see el the concept of directive, how to create controllers and communicate them correctly.
• We will review built-in services as well as create our own ones and our custom directives which is the killer feature of this framework.
• We will learn how to modify the DOM as well as SVG images.
• We will see promises and routing with both ngRoute and the UIRouter.
• And we will build a cool web site with nested views, on-scroll animations and built only with directives.
• All this without forgetting the importance of unit and E2E testing our code.

Agenda

Angular fundamentals

• Templates, views, directives, expressions
• Scope, model, modules, data binding
• Creating simple Angular apps

Controllers and services

• Understanding Controllers and the scope
• Understanding services

Custom directives

• Fundamentals (restrict, template, etc)
• Compile, controller and link
• The link function: element and attributes
• Isolated Scope: “@”, “=” and “&”
• Modifying the DOM with JQLite

Custom services

• Creating custom services
• Events: $on and $broadcast
• Calling external APIs: custom service + $http

Structuring apps and routing

• Large web apps (Looking at Google recommendations)
• ngRoute

Unit testing with Jasmine and Karma

• Unit test controllers
• Unit test directives
• Unit test services

E2E tests with Protractor

Promises

• $q
• The deferred API
• The promise API

Svg + Angularjs

• Binding SVG properties and the scope
• ng-include

Angular UI Router

• Router vs states
• $urlRouterProvider
• $stateProvider (templates, controllers, events, etc)

Web project

• Routed with the state provider
• Designed with directives and only directives
• Triggers animations on scroll
• Mocks an external API
• Unit and E2E tested