SlideShare a Scribd company logo
1 of 29
Download to read offline
AngularJS
AngularJSoverview
• AngularJS is a JavaScript MVW
framework made by Google for
building complex client-side
applications.
• It provides everything for development
of SPA out of the box
AngularJScorefeatures
• Modules
• Controllers
• Directives
• Scope
• Templates
• Filters
• Services
• Dependency injection and container
• Testability
AngularJSmodules
• Allows to separate application in logical domains
• Allows to minify dependencies and knowledge
sharing between modules
• Allows to introduce architecture limitations aka :
– main module knows about controllers
– main module knows about routing
– controllers know about repositories (services)
– main module knows nothing about repositories
– controllers know nothing about routing
AngularJSmodules
//declare module and its dependencies
angular.module('myApp', ['ngAnimate','ngCookies'])
//declaring controller in a module
.controller("MainController",mainController)
//running module configuration if needed
.config(moduleConfiguration);
AngularJScontrollers
• Attached to a DOM via ng-controller directive
• Use them to:
– Initiate and add behavior to the $scope
– Retrieve data from services
• Do not use for:
– DOM manipulation
– Data filtering
– Share state with other parts of the application
AngularJScontrollers
angular.module('app')
.controller('Customers', [function() {
var vm = this;
vm.title = 'Customers';
vm.customers = [
{name: 'Customer 1'}, {name: 'Customer 2'},
{name: 'Customer 3'}, {name: 'Customer 4'}
];
}]);
//VS
angular.module('app')
.controller('Customers', ['$scope', function($scope) {
$scope.title = 'Customers';
$scope.customers = [
{name: 'Customer 1'}, {name: 'Customer 2'},
{name: 'Customer 3'}, {name: 'Customer 4'}
];
}]);
AngularJSDirectives
• Markers for the DOM element
• Use them to:
– Attach behavior to the DOM element
– Transform DOM
• At the high level those can be treated as
components which extend or change behavior of
the DOM elements
AngularJSDirectives
• Directives are declared as
module.directive
• Directives are invoked once so
definition object instead of function is
preferred
• In order to avoid naming collisions
prefix your directives and do not use
standard ng as a prefix
AngularJSDirectives
angular.module('app')
//in html can be used as lo-directive
//name expected to be in camel case in html each uppercase letter is prefixed with -
.directive('loDirective', function() {
return {
//identifies matching rule
// A-attribute, E – element, C - class name
restrict: 'AEC',
//isolating scope
scope: {
//equal for JS object
info: '=info',
// & for callback
callback: '&',
// @ for a value
value: '@value'
},
//replacing DOM element with own content
replace:true,
//if we need to wrap DOM element with some markup.
//Original DOM is placed using ng-transclud
transclude: false,
//here is the template that is used for rendering
templateUrl: 'my-customer-iso.html',
//and that function would be called each time I am attached to the DOM element
link:function(scope, element, attrs) {
}
//And by the way I can have my own controller, restrict access to specific
controllers and other cool stuff
};});
AngularJSScope
• object that refers to the application
model
• arranged in hierarchical structure
which mimic the DOM structure
(scopes inheritance is done though
prototype)
• Provides API to:
– Watch model mutations
– Propagate model changes
AngularJSScope
angular.module('app')
.controller("TestController", ['$scope', function($scope){
//I can set values and use them in the view
$scope.name = "Test";
$scope.count = 0;
//I can subscribe to events which can be $emit(notify parents)
//and $broadcast(notify children)
$scope.$on('CustomEvent', function(name) {
$scope.name = name;
});
//I can $watch the changes
//even in the collection through $watchCollection
$scope.$watch('name',function(newValue, oldValue){
$scope.count++;
});
//or I can apply changes if async operation is performed
setTimeout(function(){
$scope.$apply(function(){
$scope.name = "Hey ya!!!";
})},200);
}]);
AngularJS Templates
• Written in HTML
– Can contain directives
– Can contain filters
– Can contain form
– Can contain specific markup {{expression}}
• Can be loaded dynamically
• Can be injected into other templates
• Are loaded once per app
• Are compiled on 1st load
AngularJS Workingwith forms
• ng-model – bind element value to form
control (ng-model=“user.name”)
• Give form a name and mark it as
novalidate
• standard validation with
formName.fieldname.$error
• or use 3rd party libraries
AngularJS Templates
<!-- ngController directive -->
<body ng-controller="MyController as vm">
<!-- ngModel directive allows to bind to element values -->
<input ng-model="foo" ng-model="vm.name" type="email">
<!-- This is going to be replaced with datepicker directive -->
<datepicker ng-model="vm.date"></datepicker>
<!-- this will call $scope.change once clicked
and will have controller buttontext displayed inside -->
<button ng-click="change()">{{vm.buttonText}}</button>
<!-- or you can bind content with ngBind directive -->
<span ng-bind="vm.buttonText"></span>
<ul>
<!-- here is the way I can iterate through collection with ngRepeat -->
<!-- and change class depending on model value -->
<li ng-repeat="item in vm.items track by id" ng-class="{active: item.active}">
<!-- and I can have expressions in the layout as well -->
<button ng-click="item.active = !item.active">change state</button>
<!-- and have custom templates if needed -->
<div ng-include="item.templateUrl"></div>
</li>
</ul>
AngularJS Filters
• Used to filter output
• Used to format output
• Filter is applied by using | in markup
• Or can be injected in other object
• Should return a function that will be
evaluated
AngularJS Filters
<script type="text/javascript">
//here is the way we register filder
angular.module('myFilters', []).filter('checkmark', function() {
//in the return function let's change the output
return function(input) {
return input ? 'True' : 'False';
};
});
</script>
Search: <input ng-model="searchText">
<table>
<tr><th>Name</th><th>Visited date</th><th>Active</th></tr>
<!-- I can filter elements in array -->
<tr ng-repeat="customer in customers | filter:searchText">
<td>{{customer.name}}</td>
<!-- I can format output with standard filter -->
<td>{{customer.lastVisitedDate | date:'yyyy-MM-dd'}}</td>
<!-- or with custom -->
<td>{{customer.active | checkmark }}</td>
</tr>
</table>
AngularJS Services
• Used to share across application:
– Data
– Behavior
• Services are lazy instantiated
• Services are singletons
• Remove code duplication
• Can work with DOM if needed
AngularJS Services
angular.module('app').factory('SampleRESTService', function ($resource) {
//there we go let's use another service which provides full REST support
return $resource('/api/sample/:id', { id: '@id' });
})
//let's inject the service
.controller("TestController", ['$scope', 'SampleRESTService',
function($scope, SampleRESTService){
$scope.tasks = SampleRESTService.query();
}]);
AngularJSDependencyinjection
• Using the inline array annotation
(prefered) is doing the constructor
injection
• Using $inject
• Using naming convention (is not min
safe)
• Add ng-strict-di directive to avoid
usage of naming convention
Dependencyinjection
var MyController = function($scope, greeter) {};
//$inject annotation
MyController.$inject = ['$scope'];
myModule.controller('MyController', MyController);
//array annotation
myModule.controller('MyController',[ '$scope', MyController]);
//naming annotation
myModule.controller('MyController',MyController);
AngularJS Testability
• Unit testing
• End 2 end testing == Automated
testing
• Middleware testing == white box
testing provides access to internal
angular objects (directives)
• Useful library angular-mocks
AngularJS Unit testing (controller)
describe('Home controller test', function () {
//loading module where controller is defined
beforeEach(module('app.home'));
//declaring variables that will be used in the tests
var controller, scope, deferred;
//creating items
beforeEach(inject(function ($rootScope, $controller, $q) {
deferred = $q.defer();
scope = $rootScope.$new();
//create the controller injecting the scope and the mocked service
controller = $controller('Home', {
$scope: scope,
DashboardService: {
getDashboard: function () {
return deferred.promise;
}
}
});
}));
//once result is not returned let's check that initial data state is correct
it('verifies NewMessagesCount is undefined', function () {
expect(controller.NewMessagesCount === undefined);
});
//Let's resolve value and see if it is correct
it('verifies NewMessagesCount is correct', function () {
deferred.resolve({ NewMessagesCount: 5 });
expect(controller.NewMessagesCount === 5);
});
it('verifies that scope contains go and it is a function', function () {
expect(scope.go === 'function');
});
});
AngularJS Unit testing (controller)
describe('Dashboard factory tests', function () {
//injecting module
beforeEach(module('app.services'));
//mocking dependcies
beforeEach(function () {
var Utility = {};
module(function ($provide) {
$provide.value('Utility', Utility);
});
});
var httpBackend, Factory;
//injecting httpBackend for testing of http
//injecting factory itself
beforeEach(inject(function ($httpBackend, Factory) {
httpBackend = $httpBackend;
Factory = Factory;
}));
it('checks that object is not modified by service and proper API method is called',
function () {
//setting method we expect to be called and method response
httpBackend.expectGET('api/Dashboard/').respond("Test");
var result = Factory.getDashboard();
//Verifying that all expected methods were called
httpBackend.flush();
//verifying that result is returned as expected
expect(result == "Test");
});
afterEach(function () {
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});
});
Directory structure
First application
• Specify ng-app directive to say that
this is angular application
Sum Up
• Provides big amount of features
• Has everything for SPA development
• Limits usage of other frameworks
• Learning curve is being quite high
Useful componentsand links
• https://angularjs.org/
• http://angular-ui.github.io/ - bootstrap
components for angular
AngularJS.part1

More Related Content

What's hot

준비하세요 Angular js 2.0
준비하세요 Angular js 2.0준비하세요 Angular js 2.0
준비하세요 Angular js 2.0Jeado Ko
 
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...FalafelSoftware
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS ArchitectureEyal Vardi
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJSWei Ru
 
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSVisual Engineering
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing optionsNir Kaufman
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xEyal Vardi
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsWorkshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsVisual Engineering
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법Jeado Ko
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Jeado Ko
 
Intro to Angular.JS Directives
Intro to Angular.JS DirectivesIntro to Angular.JS Directives
Intro to Angular.JS DirectivesChristian Lilley
 
AngularJS $Provide Service
AngularJS $Provide ServiceAngularJS $Provide Service
AngularJS $Provide ServiceEyal Vardi
 

What's hot (20)

Basics of AngularJS
Basics of AngularJSBasics of AngularJS
Basics of AngularJS
 
준비하세요 Angular js 2.0
준비하세요 Angular js 2.0준비하세요 Angular js 2.0
준비하세요 Angular js 2.0
 
The AngularJS way
The AngularJS wayThe AngularJS way
The AngularJS way
 
AngularJS Basic Training
AngularJS Basic TrainingAngularJS Basic Training
AngularJS Basic Training
 
Sane Async Patterns
Sane Async PatternsSane Async Patterns
Sane Async Patterns
 
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
Building Custom AngularJS Directives - A Step-by-Step Guide - Dan Wahlin | Fa...
 
AngularJS Architecture
AngularJS ArchitectureAngularJS Architecture
AngularJS Architecture
 
Workshop 17: EmberJS parte II
Workshop 17: EmberJS parte IIWorkshop 17: EmberJS parte II
Workshop 17: EmberJS parte II
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
Practical AngularJS
Practical AngularJSPractical AngularJS
Practical AngularJS
 
Workshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJSWorkshop 27: Isomorphic web apps with ReactJS
Workshop 27: Isomorphic web apps with ReactJS
 
Angular js routing options
Angular js routing optionsAngular js routing options
Angular js routing options
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
 
AngularJS Basics with Example
AngularJS Basics with ExampleAngularJS Basics with Example
AngularJS Basics with Example
 
Workshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design PatternsWorkshop 2: JavaScript Design Patterns
Workshop 2: JavaScript Design Patterns
 
[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법[FEConf Korea 2017]Angular 컴포넌트 대화법
[FEConf Korea 2017]Angular 컴포넌트 대화법
 
Solid angular
Solid angularSolid angular
Solid angular
 
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
Angular를 활용한 웹 프론트단 개발과 2.0에서 달라진점
 
Intro to Angular.JS Directives
Intro to Angular.JS DirectivesIntro to Angular.JS Directives
Intro to Angular.JS Directives
 
AngularJS $Provide Service
AngularJS $Provide ServiceAngularJS $Provide Service
AngularJS $Provide Service
 

Viewers also liked

Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリットIto Kohta
 
Facebook Timeline Contest Ideas
Facebook  Timeline Contest IdeasFacebook  Timeline Contest Ideas
Facebook Timeline Contest IdeasMadhu Sudan
 
Ads world on internet
Ads world on internetAds world on internet
Ads world on internetMadhu Sudan
 
Being Disruptive
Being DisruptiveBeing Disruptive
Being DisruptiveMadhu Sudan
 
MVCフレームワーク Sails.jsについて機能紹介
MVCフレームワーク Sails.jsについて機能紹介MVCフレームワーク Sails.jsについて機能紹介
MVCフレームワーク Sails.jsについて機能紹介kamiyam .
 
Bisnis Vetik Tempur (Vegetable Stik)
Bisnis Vetik Tempur (Vegetable Stik)Bisnis Vetik Tempur (Vegetable Stik)
Bisnis Vetik Tempur (Vegetable Stik)Ceceng_Ahmad
 
Facebook Lookalike audiences
Facebook Lookalike audiencesFacebook Lookalike audiences
Facebook Lookalike audiencesMadhu Sudan
 
Unit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and KarmaUnit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and KarmaAndrey Kolodnitsky
 

Viewers also liked (20)

Sails.jsのメリット・デメリット
Sails.jsのメリット・デメリットSails.jsのメリット・デメリット
Sails.jsのメリット・デメリット
 
Erwerwe
ErwerweErwerwe
Erwerwe
 
Facebook Timeline Contest Ideas
Facebook  Timeline Contest IdeasFacebook  Timeline Contest Ideas
Facebook Timeline Contest Ideas
 
Ads world on internet
Ads world on internetAds world on internet
Ads world on internet
 
Knockout js
Knockout jsKnockout js
Knockout js
 
Instrumentasi
InstrumentasiInstrumentasi
Instrumentasi
 
Instrumentasi
InstrumentasiInstrumentasi
Instrumentasi
 
Being Disruptive
Being DisruptiveBeing Disruptive
Being Disruptive
 
Sails js
Sails jsSails js
Sails js
 
MVCフレームワーク Sails.jsについて機能紹介
MVCフレームワーク Sails.jsについて機能紹介MVCフレームワーク Sails.jsについて機能紹介
MVCフレームワーク Sails.jsについて機能紹介
 
Chap 10 MGT162
Chap 10 MGT162Chap 10 MGT162
Chap 10 MGT162
 
Wirus ide bisnis
Wirus ide bisnisWirus ide bisnis
Wirus ide bisnis
 
Bisnis Vetik Tempur (Vegetable Stik)
Bisnis Vetik Tempur (Vegetable Stik)Bisnis Vetik Tempur (Vegetable Stik)
Bisnis Vetik Tempur (Vegetable Stik)
 
Facebook Lookalike audiences
Facebook Lookalike audiencesFacebook Lookalike audiences
Facebook Lookalike audiences
 
Unit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and KarmaUnit testing in JavaScript with Jasmine and Karma
Unit testing in JavaScript with Jasmine and Karma
 
Chap 9 MGT162
Chap 9 MGT162Chap 9 MGT162
Chap 9 MGT162
 
Chap 1 MGT 162
Chap 1   MGT 162Chap 1   MGT 162
Chap 1 MGT 162
 
Chap 2 MGT 162
Chap 2   MGT 162Chap 2   MGT 162
Chap 2 MGT 162
 
Chap 8 MGT162
Chap 8   MGT162Chap 8   MGT162
Chap 8 MGT162
 
Chap 10 MGT162
Chap 10 MGT162Chap 10 MGT162
Chap 10 MGT162
 

Similar to AngularJS.part1

Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSDeepu S Nath
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs WorkshopRan Wahle
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014Ran Wahle
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JSBipin
 
Angular custom directives
Angular custom directivesAngular custom directives
Angular custom directivesAlexe Bogdan
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedStéphane Bégaudeau
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish MinutesDan Wahlin
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosLearnimtactics
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseEPAM Systems
 
MEAN - Notes from the field (Full-Stack Development with Javascript)
MEAN - Notes from the field (Full-Stack Development with Javascript)MEAN - Notes from the field (Full-Stack Development with Javascript)
MEAN - Notes from the field (Full-Stack Development with Javascript)Chris Clarke
 
Angular js introduction
Angular js introductionAngular js introduction
Angular js introductionHsiu Shan
 
Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - DirectivesWebStackAcademy
 

Similar to AngularJS.part1 (20)

Angular
AngularAngular
Angular
 
Angular
AngularAngular
Angular
 
AngularJS
AngularJSAngularJS
AngularJS
 
Angular js-crash-course
Angular js-crash-courseAngular js-crash-course
Angular js-crash-course
 
AngularJs-training
AngularJs-trainingAngularJs-training
AngularJs-training
 
Coffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JSCoffee@DBG - Exploring Angular JS
Coffee@DBG - Exploring Angular JS
 
angularJs Workshop
angularJs WorkshopangularJs Workshop
angularJs Workshop
 
AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014AngularJs Workshop SDP December 28th 2014
AngularJs Workshop SDP December 28th 2014
 
Angular js
Angular jsAngular js
Angular js
 
Front end development with Angular JS
Front end development with Angular JSFront end development with Angular JS
Front end development with Angular JS
 
Angular custom directives
Angular custom directivesAngular custom directives
Angular custom directives
 
AngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get startedAngularJS 101 - Everything you need to know to get started
AngularJS 101 - Everything you need to know to get started
 
AngularJS in 60ish Minutes
AngularJS in 60ish MinutesAngularJS in 60ish Minutes
AngularJS in 60ish Minutes
 
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle StudiosAngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
AngularJs Superheroic JavaScript MVW Framework Services by Miracle Studios
 
Angular js
Angular jsAngular js
Angular js
 
Angular Js Get Started - Complete Course
Angular Js Get Started - Complete CourseAngular Js Get Started - Complete Course
Angular Js Get Started - Complete Course
 
mean stack
mean stackmean stack
mean stack
 
MEAN - Notes from the field (Full-Stack Development with Javascript)
MEAN - Notes from the field (Full-Stack Development with Javascript)MEAN - Notes from the field (Full-Stack Development with Javascript)
MEAN - Notes from the field (Full-Stack Development with Javascript)
 
Angular js introduction
Angular js introductionAngular js introduction
Angular js introduction
 
Angular - Chapter 5 - Directives
 Angular - Chapter 5 - Directives Angular - Chapter 5 - Directives
Angular - Chapter 5 - Directives
 

Recently uploaded

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 

Recently uploaded (20)

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5UiPath Studio Web workshop series - Day 5
UiPath Studio Web workshop series - Day 5
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 

AngularJS.part1

  • 2. AngularJSoverview • AngularJS is a JavaScript MVW framework made by Google for building complex client-side applications. • It provides everything for development of SPA out of the box
  • 3. AngularJScorefeatures • Modules • Controllers • Directives • Scope • Templates • Filters • Services • Dependency injection and container • Testability
  • 4. AngularJSmodules • Allows to separate application in logical domains • Allows to minify dependencies and knowledge sharing between modules • Allows to introduce architecture limitations aka : – main module knows about controllers – main module knows about routing – controllers know about repositories (services) – main module knows nothing about repositories – controllers know nothing about routing
  • 5. AngularJSmodules //declare module and its dependencies angular.module('myApp', ['ngAnimate','ngCookies']) //declaring controller in a module .controller("MainController",mainController) //running module configuration if needed .config(moduleConfiguration);
  • 6. AngularJScontrollers • Attached to a DOM via ng-controller directive • Use them to: – Initiate and add behavior to the $scope – Retrieve data from services • Do not use for: – DOM manipulation – Data filtering – Share state with other parts of the application
  • 7. AngularJScontrollers angular.module('app') .controller('Customers', [function() { var vm = this; vm.title = 'Customers'; vm.customers = [ {name: 'Customer 1'}, {name: 'Customer 2'}, {name: 'Customer 3'}, {name: 'Customer 4'} ]; }]); //VS angular.module('app') .controller('Customers', ['$scope', function($scope) { $scope.title = 'Customers'; $scope.customers = [ {name: 'Customer 1'}, {name: 'Customer 2'}, {name: 'Customer 3'}, {name: 'Customer 4'} ]; }]);
  • 8. AngularJSDirectives • Markers for the DOM element • Use them to: – Attach behavior to the DOM element – Transform DOM • At the high level those can be treated as components which extend or change behavior of the DOM elements
  • 9. AngularJSDirectives • Directives are declared as module.directive • Directives are invoked once so definition object instead of function is preferred • In order to avoid naming collisions prefix your directives and do not use standard ng as a prefix
  • 10. AngularJSDirectives angular.module('app') //in html can be used as lo-directive //name expected to be in camel case in html each uppercase letter is prefixed with - .directive('loDirective', function() { return { //identifies matching rule // A-attribute, E – element, C - class name restrict: 'AEC', //isolating scope scope: { //equal for JS object info: '=info', // & for callback callback: '&', // @ for a value value: '@value' }, //replacing DOM element with own content replace:true, //if we need to wrap DOM element with some markup. //Original DOM is placed using ng-transclud transclude: false, //here is the template that is used for rendering templateUrl: 'my-customer-iso.html', //and that function would be called each time I am attached to the DOM element link:function(scope, element, attrs) { } //And by the way I can have my own controller, restrict access to specific controllers and other cool stuff };});
  • 11. AngularJSScope • object that refers to the application model • arranged in hierarchical structure which mimic the DOM structure (scopes inheritance is done though prototype) • Provides API to: – Watch model mutations – Propagate model changes
  • 12. AngularJSScope angular.module('app') .controller("TestController", ['$scope', function($scope){ //I can set values and use them in the view $scope.name = "Test"; $scope.count = 0; //I can subscribe to events which can be $emit(notify parents) //and $broadcast(notify children) $scope.$on('CustomEvent', function(name) { $scope.name = name; }); //I can $watch the changes //even in the collection through $watchCollection $scope.$watch('name',function(newValue, oldValue){ $scope.count++; }); //or I can apply changes if async operation is performed setTimeout(function(){ $scope.$apply(function(){ $scope.name = "Hey ya!!!"; })},200); }]);
  • 13. AngularJS Templates • Written in HTML – Can contain directives – Can contain filters – Can contain form – Can contain specific markup {{expression}} • Can be loaded dynamically • Can be injected into other templates • Are loaded once per app • Are compiled on 1st load
  • 14. AngularJS Workingwith forms • ng-model – bind element value to form control (ng-model=“user.name”) • Give form a name and mark it as novalidate • standard validation with formName.fieldname.$error • or use 3rd party libraries
  • 15. AngularJS Templates <!-- ngController directive --> <body ng-controller="MyController as vm"> <!-- ngModel directive allows to bind to element values --> <input ng-model="foo" ng-model="vm.name" type="email"> <!-- This is going to be replaced with datepicker directive --> <datepicker ng-model="vm.date"></datepicker> <!-- this will call $scope.change once clicked and will have controller buttontext displayed inside --> <button ng-click="change()">{{vm.buttonText}}</button> <!-- or you can bind content with ngBind directive --> <span ng-bind="vm.buttonText"></span> <ul> <!-- here is the way I can iterate through collection with ngRepeat --> <!-- and change class depending on model value --> <li ng-repeat="item in vm.items track by id" ng-class="{active: item.active}"> <!-- and I can have expressions in the layout as well --> <button ng-click="item.active = !item.active">change state</button> <!-- and have custom templates if needed --> <div ng-include="item.templateUrl"></div> </li> </ul>
  • 16. AngularJS Filters • Used to filter output • Used to format output • Filter is applied by using | in markup • Or can be injected in other object • Should return a function that will be evaluated
  • 17. AngularJS Filters <script type="text/javascript"> //here is the way we register filder angular.module('myFilters', []).filter('checkmark', function() { //in the return function let's change the output return function(input) { return input ? 'True' : 'False'; }; }); </script> Search: <input ng-model="searchText"> <table> <tr><th>Name</th><th>Visited date</th><th>Active</th></tr> <!-- I can filter elements in array --> <tr ng-repeat="customer in customers | filter:searchText"> <td>{{customer.name}}</td> <!-- I can format output with standard filter --> <td>{{customer.lastVisitedDate | date:'yyyy-MM-dd'}}</td> <!-- or with custom --> <td>{{customer.active | checkmark }}</td> </tr> </table>
  • 18. AngularJS Services • Used to share across application: – Data – Behavior • Services are lazy instantiated • Services are singletons • Remove code duplication • Can work with DOM if needed
  • 19. AngularJS Services angular.module('app').factory('SampleRESTService', function ($resource) { //there we go let's use another service which provides full REST support return $resource('/api/sample/:id', { id: '@id' }); }) //let's inject the service .controller("TestController", ['$scope', 'SampleRESTService', function($scope, SampleRESTService){ $scope.tasks = SampleRESTService.query(); }]);
  • 20. AngularJSDependencyinjection • Using the inline array annotation (prefered) is doing the constructor injection • Using $inject • Using naming convention (is not min safe) • Add ng-strict-di directive to avoid usage of naming convention
  • 21. Dependencyinjection var MyController = function($scope, greeter) {}; //$inject annotation MyController.$inject = ['$scope']; myModule.controller('MyController', MyController); //array annotation myModule.controller('MyController',[ '$scope', MyController]); //naming annotation myModule.controller('MyController',MyController);
  • 22. AngularJS Testability • Unit testing • End 2 end testing == Automated testing • Middleware testing == white box testing provides access to internal angular objects (directives) • Useful library angular-mocks
  • 23. AngularJS Unit testing (controller) describe('Home controller test', function () { //loading module where controller is defined beforeEach(module('app.home')); //declaring variables that will be used in the tests var controller, scope, deferred; //creating items beforeEach(inject(function ($rootScope, $controller, $q) { deferred = $q.defer(); scope = $rootScope.$new(); //create the controller injecting the scope and the mocked service controller = $controller('Home', { $scope: scope, DashboardService: { getDashboard: function () { return deferred.promise; } } }); })); //once result is not returned let's check that initial data state is correct it('verifies NewMessagesCount is undefined', function () { expect(controller.NewMessagesCount === undefined); }); //Let's resolve value and see if it is correct it('verifies NewMessagesCount is correct', function () { deferred.resolve({ NewMessagesCount: 5 }); expect(controller.NewMessagesCount === 5); }); it('verifies that scope contains go and it is a function', function () { expect(scope.go === 'function'); }); });
  • 24. AngularJS Unit testing (controller) describe('Dashboard factory tests', function () { //injecting module beforeEach(module('app.services')); //mocking dependcies beforeEach(function () { var Utility = {}; module(function ($provide) { $provide.value('Utility', Utility); }); }); var httpBackend, Factory; //injecting httpBackend for testing of http //injecting factory itself beforeEach(inject(function ($httpBackend, Factory) { httpBackend = $httpBackend; Factory = Factory; })); it('checks that object is not modified by service and proper API method is called', function () { //setting method we expect to be called and method response httpBackend.expectGET('api/Dashboard/').respond("Test"); var result = Factory.getDashboard(); //Verifying that all expected methods were called httpBackend.flush(); //verifying that result is returned as expected expect(result == "Test"); }); afterEach(function () { httpBackend.verifyNoOutstandingExpectation(); httpBackend.verifyNoOutstandingRequest(); }); });
  • 26. First application • Specify ng-app directive to say that this is angular application
  • 27. Sum Up • Provides big amount of features • Has everything for SPA development • Limits usage of other frameworks • Learning curve is being quite high
  • 28. Useful componentsand links • https://angularjs.org/ • http://angular-ui.github.io/ - bootstrap components for angular