Devcon Summit 2016

Christian John Felix

“The A1”

Christian John Felix

Kick Start

It takes the front end development

to the next level.

Why AngularJS?

Two things before you start:1. Text Editor

• Download Sublimetext 3

• Others

• Brackets etc.

• Atom,

• Notepad ++,

• Dreamweaver,

• VSCode,

• Visual Studio 2015 (Community Edition)

2. AngularJS

• Download AngularJS 1 (Library)

https://angularjs.org

Click to DOWNLOAD the library

https://www.sublimetext.com/3

Or type in google sublimetext 3 then click the first link and read the instructions.

The Basics

Directive and Data Binding

• AngularJS Data-Binding in Angular apps is the automatic

synchronization of data between the model and view

components.

• AngularJS Directives are extended HTML attributes with the prefix ng- .

DEMO

The ng-model directive binds the value of HTML controls(input, select, textarea) to application data.

The ng-app directive initializes an AngularJS application.

Modules and Controllers

Module - A module is a collection of services, directives, controllers, filters, and configuration information.

Controller - controls the flow of data in the application.

A controller is defined using ng-controller directive.

DEMO

Routing

The ngRoute module helps your application to become a Single Page Application.

INJECTED

ng-view is the directive that angular uses as a container to switch between views.

NOTE: Your application needs a container to put the content provided by the routing.

DEMO

Service

Services - Angular services are substitutable objects that are wired together using

dependency injection (DI). You can use services to organize and share code across your app.

DEMO

Different emotional feelings using

AngularJS

I owe you Controller!

First encounter with data binding and controller

Data Binding ROCKS!

First encounter with Services

DI (Dependency Injection)

WHO ARE YOU!!!!!

I’m DONE!

Going back

to JQEURY!

When you or your team

understand how it works!

When building a large scale app

You need to plan.

Structuring application

AngularJS is a MVW

“Model View Whatever”

app/controllers/services/views/directives/filters/

By Type • OK for demo or start up• Not advisable on a large scale app.• Hard to maintain.

Common Starting Structure

When your application grows.

When your application grows.

Where is that controller!

app/app.jsconfig.js customer/filter.jsorders/products/service.js

By Feature• Good way to start.• Based on user story.• Much better than by type.

When your application grows.

Combining the two

app/app.jsconfig.jscustomer/

controllers/services/views/

orders/controllers/services/

views/products/

controllers/services/

views/

By feature &

by type• Manageable and maintainable.• Easier to locate the files.• Easier to work with another

feature.

Modular Application

Modular Application

ModApp

customer module

customer/customer.module.jscontrollers/views/services/

order module

order/order.module.jscontrollers/views/services/

Main module

product module

product/product.module.jscontrollers/views/services/

INJECTED

datatables

toastr

ngRoute

blockUI

ngMaterial

core

common

order module

customer module

user module

product module

package module

ngMessages ngAnimate

ui.bootstrap

Main module

customer module

product module

package module

reports module

order module

Different Modules with Different

Developers

Code Pattern

AngularJShttps://angularjs.org/

AngularJS Style Guidehttps://github.com/johnpapa/angular-styleguid

Block UIhttps://github.com/McNull/angular-block-ui

ToastRhttps://github.com/Foxandxss/angular-toastr

$http Promiseshttp://blog.ninja-squad.com/2015/05/28/angularjs-promises/

Bootstraphttps://getbootstrap.com

TIPS

To God be the Glory

#HappyCoding

#angularjsPH

END