Czym jest Angular ?

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you would otherwise have to write. And it all happens within the browser, making it an ideal partner with any server technology.

https://docs.angularjs.org/guide/introduction

Proces kompilacji

Dlaczego używamy angulara ?

• Kompletne rozwiązanie
• Łatwy do rozpoczęcia nauki
• Bardzo popularny
• Utrzymywany przez google
• Testowalny

Kompletne rozwiązanie

Łatwy do rozpoczęcia nauki

Bardzo popularny

Utrzymywany przez google

Testowalny

Główne cechy angulara

• Two way data binding
• Kontrolery
• Serwisy
• Filtry
• Dyrektywy
• MV*
• Dependency injection
• Modułowość

Two way data binding

https://plnkr.co/edit/fO6YPWABzrfOUtxvNvH7?p=preview

Angular controller

var myApp = angular.module('myApp',[]);

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

<div ng-controller="GreetingController">
  {{ greeting }}
</div>

Angular factories vs services vs providers

https://plnkr.co/edit/fO6YPWABzrfOUtxvNvH7?p=info

Angular filters

https://plnkr.co/edit/YVoNoAZ5CSvuXD1T6K9S?p=info

Angular directives

https://plnkr.co/edit/Wdsf4cRc5PRr7T7l1bRC?p=preview

MVC i MV*

Modułowość

angular.module('app', ['app.core', 'app.dashboard' ... ]);

Najczęściej popełniane błędy

Struktura projektu

• css/
• img/
• js/
  • app.js
  • controllers.js
  • directives.js
  • filters.js
  • services.js
• lib/
• partials/

• controllers/
  • LoginCtrl.js
  • SearchCtrl.js
• directives.js
• filters.js
• models/
  • CartModel.js
  • UserModel.js
• services/
  • CartSvc.js
  • UserSvc.js
  • ProductSvc.js

• cart/
  • CartModel.js
  • CartSvc.js
  • Cart.tmpl.html
  • _Cart.scss
• common/
  • directives.js
  • filters.js
• user/
  • UserModel.js
  • UserSvc.js