AngularJS Basics - Knowledge Sharing

Introduction toAngularJS

1day course for the web guys

What is AngularJS

● Structural framework for dynamic web apps● It lets you use HTML as your template

language● Perfect for Single Page Applications (SPAs)● “Superheroic JavaScript MVW Framework”

What you should know

● Basic foreknowledge of HTML● Basic foreknowledge of JavaScript● Software design patterns

MVC and Model View Whatever

● MVC vs MVVM vs MVP● kick-ass apps that are well-designed and

follow separation of concerns - so MV*

Modules and $scope

● Module is a container for the different parts of your app – controllers, services, filters, directives, etc.

● Scope is the glue between application controller and the view.

Working with models

● Basic models● Complex models● JSON objects● View● Bindings.

[Example] Getting your hands dirty

● Create a new project● Install AngularJS● Check if it works and why not :)● Make it work● and display basic model.

Templating the views

● Display the data● Separating the screens/views into the the

partials.● Including the external partials

[Example] Form validation

● Create complete HTML5 form● Implement full validation with custom error

messages● Get the data● and send it to a backend.

Services: $http

● What is a service?● Define a service● Use $http service to read a JSON file

Live binding

● Binding to input fields● Using a filters● Connect filters to binded models

Directives and Filters

● What is a directive?● Filtering content using directives● Writing custom filters

[Example] ng-table

● Pagination● Sorting● Filtering

Deep linking

● What is Deep linking?● Working with the $routeProvider service● Wiring up a second partial● Navigation and $rootScope.

Puzzle SoftwareKnowledge Sharing

Branko Đurković