working with angular js
Post on 02-Jun-2018
227 Views
Preview:
TRANSCRIPT
-
8/10/2019 Working With Angular Js
1/55
Working with
Microsoft
-
8/10/2019 Working With Angular Js
2/55
About me
Andr ValaSharePoint Solutions Architect
Office & SharePoint Solutions Team Lead
andre.vala@create.pt
@atomicvee
http://blogit.create.pt/blogs/andreva
http://www.linkedin.com/in/andrevala
-
8/10/2019 Working With Angular Js
3/55
Agenda
What is AngularJS?
Main Concepts
Tools
Best Practices
Wrapping up
-
8/10/2019 Working With Angular Js
4/55
What is AngularJS?
-
8/10/2019 Working With Angular Js
5/55
Angular is what HTML would have
been had it been designed for
applications.Miko Hevery
-
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
7/55
History
Created by Miko Hevery
Open source since 2009
Supported by Google
Large and fast-growing community
What is angularjs?
-
8/10/2019 Working With Angular Js
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?
-
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
10/55
Trending topicWhat is angularjs?
Source: Google Trends
-
8/10/2019 Working With Angular Js
11/55
Learning curveWhat is angularjs?
-
8/10/2019 Working With Angular Js
12/55
Main Concepts
-
8/10/2019 Working With Angular Js
13/55
Main concepts
Templates
Directives
Expressions
Data binding
Scope
Controllers
Modules
Filters
Services
Routing
-
8/10/2019 Working With Angular Js
14/55
Hello World
DEMOMAIN CONCEPTS
-
8/10/2019 Working With Angular Js
15/55
Hello world applicationMAIN CONCEPTS
Demo 01 - Page 03
Name:
-
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
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
Read More: https://docs.angularjs.org/guide/directive
M i t / di ti
https://docs.angularjs.org/guide/directivehttps://docs.angularjs.org/guide/directive -
8/10/2019 Working With Angular Js
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
Read More: https://docs.angularjs.org/guide/directive
Main concepts
https://docs.angularjs.org/guide/directivehttps://docs.angularjs.org/guide/directive -
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
21/55
Expressions
DEMOMAIN CONCEPTS
Main concepts
-
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
23/55
Two-way data binding
DEMOMAIN CONCEPTS
Main concepts
-
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
26/55
How to use controllers
Creating a controller in the global namespace
function MyController($scope) {
...
}
Attaching a controller to the DOM
p /
Read More: https://docs.angularjs.org/guide/controller
Main concepts / controllers
https://docs.angularjs.org/guide/controllerhttps://docs.angularjs.org/guide/controller -
8/10/2019 Working With Angular Js
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 /
Read More: https://docs.angularjs.org/guide/controller
https://docs.angularjs.org/guide/controllerhttps://docs.angularjs.org/guide/controller -
8/10/2019 Working With Angular Js
28/55
Using controllers
DEMOMAIN CONCEPTS
Main concepts
-
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
30/55
Using modules
DEMOMAIN CONCEPTS
Main concepts
-
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
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
Read More: https://docs.angularjs.org/guide/filter
s ng ers n con ro ers, serv ces anMain concepts / filters
https://docs.angularjs.org/guide/filterhttps://docs.angularjs.org/guide/filter -
8/10/2019 Working With Angular Js
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');
}]);
Read More: https://docs.angularjs.org/guide/filter
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
https://docs.angularjs.org/guide/filterhttps://docs.angularjs.org/guide/filter -
8/10/2019 Working With Angular Js
34/55
Creating filters
angular.module('MyFilterModule',[]).
filter('myfilter', function() {
return function(input){
...
return output;};
});
Read More: https://docs.angularjs.org/guide/filter
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.
https://docs.angularjs.org/guide/filterhttps://docs.angularjs.org/guide/filter -
8/10/2019 Working With Angular Js
35/55
Using filters
DEMOMAIN CONCEPTS
iMain concepts
-
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
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
Read More: https://docs.angularjs.org/guide/services
C ti iMain concepts / Services
https://docs.angularjs.org/guide/serviceshttps://docs.angularjs.org/guide/services -
8/10/2019 Working With Angular Js
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
Read More: https://docs.angularjs.org/guide/services
R iMain concepts / SERVICES
https://docs.angularjs.org/guide/serviceshttps://docs.angularjs.org/guide/services -
8/10/2019 Working With Angular Js
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);
-
8/10/2019 Working With Angular Js
40/55
Using services
DEMOMAIN CONCEPTS
M lti l iMain concepts
-
8/10/2019 Working With Angular Js
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
-
8/10/2019 Working With Angular Js
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
-
8/10/2019 Working With Angular Js
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
-
8/10/2019 Working With Angular Js
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
-
8/10/2019 Working With Angular Js
45/55
Routing
DEMOMAIN CONCEPTS
-
8/10/2019 Working With Angular Js
46/55
Best practices
Best Practices
-
8/10/2019 Working With Angular Js
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
-
8/10/2019 Working With Angular Js
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
-
8/10/2019 Working With Angular Js
49/55
Tools
Tools
-
8/10/2019 Working With Angular Js
50/55
Tools
IDE: Visual Studio, NetBeans, WebStorm
Utils: JSFiddle, Batarang Plugin for Chrome
Static Code Analysis: JSHint
Unit Testing: Karma
-
8/10/2019 Working With Angular Js
51/55
Wrapping up
Wrapping up
-
8/10/2019 Working With Angular Js
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
-
8/10/2019 Working With Angular Js
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/ -
8/10/2019 Working With Angular Js
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 -
8/10/2019 Working With Angular Js
55/55
top related