Working With Angular Js

8/10/2019 Working With Angular Js

1/55

Working with

Microsoft


2/55

About me

Andr ValaSharePoint Solutions Architect

Office & SharePoint Solutions Team Lead

[email protected]

@atomicvee

http://blogit.create.pt/blogs/andreva

http://www.linkedin.com/in/andrevala


3/55

Agenda

What is AngularJS?

Main Concepts

Tools

Best Practices

Wrapping up


4/55

What is AngularJS?


5/55

Angular is what HTML would have

been had it been designed for

applications.Miko Hevery


6/55

What is AngularJS?

Single Page Application (SPA) JavaScript Framework

Implements client-side MVWpattern

No direct DOM manipulation, less code

Well organized and highly modular

Focused on testing

Supports all major desktop and mobile browsers

Read More: https://plus.google.com/+AngularJS/posts/aZNVhj355G2
https://plus.google.com/+AngularJS/posts/aZNVhj355G2https://plus.google.com/+AngularJS/posts/aZNVhj355G2


7/55

History

Created by Miko Hevery

Open source since 2009

Supported by Google

Large and fast-growing community

What is angularjs?


8/55

Single Page Applications

Web applications composed of a single page

Views(HTML Fragments) are dynamically loaded into

Better user experience (no reloads!)

Calls to the server are done asynchronously behind th

Require artificial handling of browser history, navigatbookmarks

What is angularjs?


9/55

Model-View-Whatever

Some call it MVC, others

MVVM...

In the end, the name does notmatter. It handles separationof concernsefectively

separating presentation logicfrom business logic andpresentation state.

Whatever means whateverworks for you.

What is angularjs?

Read More: https://plus.google.com/+AngularJS/posts/aZNVhj355G2

Model

Whatever
https://plus.google.com/+AngularJS/posts/aZNVhj355G2https://plus.google.com/+AngularJS/posts/aZNVhj355G2


10/55

Trending topicWhat is angularjs?

Source: Google Trends


11/55

Learning curveWhat is angularjs?


12/55

Main Concepts


13/55

Main concepts

Templates

Directives

Expressions

Data binding

Scope

Controllers

Modules

Filters

Services

Routing


14/55

Hello World

DEMOMAIN CONCEPTS


15/55

Hello world applicationMAIN CONCEPTS

Demo 01 - Page 03

Name:


16/55

Templates

HTML with additional markup

Directives

Expressions

Filters

Form controls

Main concepts

Read More: https://docs.angularjs.org/guide/templates

i
https://docs.angularjs.org/guide/templateshttps://docs.angularjs.org/guide/templates


17/55

Directives

Markerson DOM elements that extend HTMLvocabul

Attach behaviourto the DOM element

Transformthe DOM element and its children

Directives can match:

Elements Attributes

Comments

Classes

Main concepts

Read More: https://docs.angularjs.org/guide/directive

M i t / di ti
https://docs.angularjs.org/guide/directivehttps://docs.angularjs.org/guide/directive


18/55

Naming formats

AngularJS HTML compiler supports multiple naming fo

ng-bind Recommended format.

data-ng-bind Recommended format to support HTML val

ng_bind Legacy purposes. Avoid using it.

ng:bind Legacy purposes. Avoid using it.

x-ng-bind Legacy purposes. Avoid using it.

Main concepts / directives


M i t / di ti


19/55

Built-in directives

ngAppngBind ngBindHtml ngBindTemplate ngBlur n

ngChecked ngClass ngClassEven ngClassOdd ngClicngCloak ngControllerngCopy ngCsp ngCut ngDblClngDisabled ngFocus ngForm ngHide ngHref ngIf ngngInit ngKeydown ngKeypress ngKeyup ngList ngMongModelOptions ngMousedown ngMouseenter ngMouse

ngMousemove ngMouseover ngNonBindable ngOpen ngngPluralize ngReadonly ngRepeatngSelected ngShngSrcset ngStyle ngSubmitngTransclude ngValue

Main concepts / directives


Main concepts


20/55

Expressions

JavaScript-like codesnippets placed inside bindings such as

{{ expression }}

Valid Angular expressions:{{ 1 + 2 }}

{{ a + b }}

{{ user.name }}

{{ items[index] }}

Additional notes about expressions:

Control flow statements are not supported (conditionals, loops or exc

You can use filtersinside expressions to format data

Main concepts

Read More: https://docs.angularjs.org/guide/expression
https://docs.angularjs.org/guide/expressionhttps://docs.angularjs.org/guide/expression


21/55

Expressions

DEMOMAIN CONCEPTS

Main concepts


22/55

Data binding

Automatic synchronization of data between the Model and the

Main concepts

Read More: https://docs.angularjs.org/guide/databinding

View

Template Model

One-

time

merge

One-Way Data Binding

View

Template

Model

Continuous updates

Model is Single-Source-of-Truth

Compile

Changes to View

updates Model

Two-Way Data Bind
https://docs.angularjs.org/guide/databindinghttps://docs.angularjs.org/guide/databinding


23/55

Two-way data binding

DEMOMAIN CONCEPTS

Main concepts


24/55

Scope

Object that refers to the application Model

Values stored in variables in the Scope belong to theModel

The glue between the Controller and the View

Scopes are hierarchicaland follow the

DOM structure of the application Every Angular application has a root

scope ($rootScope) mapped to theelement linked to ngAppdirective

Main concepts

Read More: https://docs.angularjs.org/guide/scope

Main concepts
https://docs.angularjs.org/guide/scopehttps://docs.angularjs.org/guide/scope


25/55

Controllers

JavaScript constructor functions used to augment th

New child scope is created and

injected as a constructor

parameter ($scope)

Main concepts

Read More: https://docs.angularjs.org/guide/controller

Main concepts / controllers
https://docs.angularjs.org/guide/controllerhttps://docs.angularjs.org/guide/controller


26/55

How to use controllers

Creating a controller in the global namespace

function MyController($scope) {

...

}

Attaching a controller to the DOM

p /


Main concepts / controllers


27/55

When to use controllers

Use controllers to:

Set up the initial state of the $scopeobject

Add behaviour to the $scopeobject

Do not use controllers to:

Manipulate DOM (use databindingand directivesinstead

Format input (use form controls instead)

Filter output (use filtersinstead)

Share code or state across controllers (use servicesinstea

p /



28/55

Using controllers

DEMOMAIN CONCEPTS

Main concepts


29/55

Module

Reusable container for different features of an app.

Can depend on other modules.

Creating a module

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

angular.module('myApp', ['myOtherModule']);

Referencing an apps main module

Read More: https://docs.angularjs.org/guide/module
https://docs.angularjs.org/guide/modulehttps://docs.angularjs.org/guide/module


30/55

Using modules

DEMOMAIN CONCEPTS

Main concepts


31/55

Filters

A filter formats the value of an expressionfor display to the

Can be used in view templates, controllers, servicesand dire

You can create your own filters (in a module)

Built-in filters:

Read More: https://docs.angularjs.org/guide/filter

CurrencyDate

Filter

JsonLimitTo

Lowercase

NumberOrderBy

Uppercase

Main concepts / filters
https://docs.angularjs.org/guide/filterhttps://docs.angularjs.org/guide/filter


32/55

Using filters in view templates

Single filter syntax

{{ expression | filter }}Example: {{ 12 | currency }}returns$12.00

Chained filters syntax

{{ expression | filter1 | filter2 | ... }}

Filter with arguments

{{ expression | filter:argument1:argument2... }}

Example: {{ 12 | number:2 }}returns12.00


s ng ers n con ro ers, serv ces anMain concepts / filters


33/55

s ng ers n con ro ers, serv ces andirectives

angular.module('FilterInControllerModule', []).

controller('FilterController', ['filterFilter', function(filterFilter)

this.array = [

{name: 'Tobias'},

{name: 'Jeff'},

{name: 'Brian'},

{name: 'Igor'},

{name: 'James'},

{name: 'Brad'}];

this.filteredArray = filterFilter(this.array, 'a');

}]);


Inject filter in controller

using Filter

syntax

Receive filter

function as a

parameter

Call filter with value to format

and additional parameters

Main concepts / filters


34/55

Creating filters

angular.module('MyFilterModule',[]).

filter('myfilter', function() {

return function(input){

...

return output;};

});


User the filter provider to

create a new filter in the

module

Name the

filter

Return the filter function. The first

argument is the input value.

Additional arguments can be used.


35/55

Using filters

DEMOMAIN CONCEPTS

iMain concepts


36/55

Services

Reusablebusiness logic componentes, independent

wired together using dependency injection (DI).

Singletonsgenerated by a service factory.

Angular only instantiates a service if there is a depen

it.

Built-in services start with $.

Examples: $log, $http, $filter, $exceptionHandler

Read More: https://docs.angularjs.org/guide/services

U i iMain concepts / Services
https://docs.angularjs.org/guide/serviceshttps://docs.angularjs.org/guide/services


37/55

Using a service

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

countryApp.controller('CountryCtrl', ['$scope', '$http', functionhttp) {

http.get(countries.json').success(function(data) {

scope.countries = data;

});

}]);

Inject $httpservice using

DI

Receive s

object as

parameter

Call method on

service


C ti iMain concepts / Services


38/55

Creating a service

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

myModule.factory('serviceId', function() {

var shinyNewServiceInstance;

//factory function body that constructs shinyNewServiceInsta

return shinyNewServiceInstance;

});Return a serviceinstance

Register a new factory function for the

service


R iMain concepts / SERVICES


39/55

Recipes

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

myApp.provider('MyFactory', function() {...});

myApp.factory('MyFactory', function() {...});

myApp.service('MyFactory', function() {...});

myApp.constant('MyConstant', 'My Constant Value');

myApp.value('MyValue', 35);


40/55

Using services

DEMOMAIN CONCEPTS

M lti l iMain concepts


41/55

Multiple views

Most applications are composed of more than one vie

In Single Page Applications all views are rendered in tpage (Layout Template) which contains all the comm

elements

Each view (Partial Template) is placed in its own file a

dynamically loaded into the Layout Template page

Multiple viewsMain concepts


42/55

Multiple views

index.html

header.html

a1.html b2.html

a2.htmlb1

b3

a3.html

Layout Template

Partial

Partia

Partial Template

Partial Template

RoutingMain concepts


43/55

Routing

Routing is provided by the ngRoutemodule (separate

distribution)Routes are declared via the $routeProviderfrom the

service

Supports deep linking(history, bookmarks and brows

back/forward buttons) Partial views are rendered by the ngViewdirective

Routing configurationMain concepts / routing


44/55

Routing configuration

var myApp = angular.module('myApp',['ngRoute']);myApp.config(['$routeProvider',

function($routeProvider) {$routeProvider.when('/phones', {templateUrl: 'partials/phone-list.html',controller: 'PhoneListCtrl

}).when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html',controller: 'PhoneDetailCtrl'

}).otherwise({redirectTo: '/phones'

});}]);

Route

Dependency on

ngRoutemodule

Default

Route

Route with variable URL. Phone

will be placed in $routeParams


45/55

Routing

DEMOMAIN CONCEPTS


46/55

Best practices

Best Practices


47/55

Best Practices

In Views/Templates

Use directivesfor abstracting common markups, extension

Do not use complex expressions in bindings. Move them to

controllers.

Optimizeuse of bindings. Less bindings = faster application

In Controllers Keep them light. Use servicesto offload functionality.

No DOM manipulations!Use directivesfor that.

Best Practices


48/55

Best Practices

In Directives

Prefer using directivesas elementsor attributesover classecomments

Do not ng- prefixfor your directives

Create isolate scopes to avoid acidental overrides of proper

Create modulesto group controllers, services, directifilters


49/55

Tools

Tools


50/55

Tools

IDE: Visual Studio, NetBeans, WebStorm

Utils: JSFiddle, Batarang Plugin for Chrome

Static Code Analysis: JSHint

Unit Testing: Karma


51/55

Wrapping up

Wrapping up


52/55

Wrapping up

AngularJS is a modular JavaScript SPA framework

Has a lot of great features but a steep learning curve

Great for CRUD applications but not suitable for every

application

Works very well with some JavaScript libraries (such a

but not so well with others

Increases developer productivity in small/medium ap

but can be quite heavy for complex applications

ResourcesWrapping up


53/55

Resources

Official documentation Project homepage: https://angularjs.org/

Developer Guide: https://docs.angularjs.org/guide

Tutorial: https://docs.angularjs.org/tutorial

API Reference: https://docs.angularjs.org/api

Built with Angular: https://builtwith.angularjs.org

Training videos and tutorials for developers Egghead: https://egghead.io/technologies/angularjs

Additional stuff Angular modules: http://ngmodules.org/
https://angularjs.org/https://docs.angularjs.org/guidehttps://docs.angularjs.org/tutorialhttps://docs.angularjs.org/apihttps://builtwith.angularjs.org/https://egghead.io/technologies/angularjshttp://ngmodules.org/http://ngmodules.org/https://egghead.io/technologies/angularjshttps://builtwith.angularjs.org/https://docs.angularjs.org/apihttps://docs.angularjs.org/tutorialhttps://docs.angularjs.org/guidehttps://angularjs.org/


54/55

Thank You!

Download slide deck: http://1drv.ms/1h1YOlS

Download demos: http://1drv.ms/1h1YJyP
http://1drv.ms/1h1YOlShttp://1drv.ms/1h1YJyPhttp://1drv.ms/1h1YJyPhttp://1drv.ms/1h1YOlS


55/55

Working With Angular Js

Documents

Transcript of Working With Angular Js