-
Notifications
You must be signed in to change notification settings - Fork 0
/
angular_topics.html
433 lines (365 loc) · 22.3 KB
/
angular_topics.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>:: Rajesh Personal questions ::</title>
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,300i,400,400i,500,500i,600,600i,700,700i|Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="css/ionicons.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/owl.carousel.min.css" rel="stylesheet">
<link href="css/magnific-popup.css" rel="stylesheet">
<link href="css/hover.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
<!-- Responsive css -->
<link href="css/responsive.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<script data-ad-client="pub-6300849404698883" async src="https://pagead2.googlesyndication
.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<!-- start section navbar -->
<nav id="main-nav">
<div class="row">
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/logo1.png" alt="logo"></a>
</div>
<div class="responsive"><i data-icon="m" class="ion-navicon-round"></i></div>
<ul class="nav-menu list-unstyled">
<li><a href="all.html" class="smoothScroll">Html</a></li>
<li><a href="javascript.html" class="smoothScroll">Javascript</a></li>
<li><a href="jquery.html" class="smoothScroll">Jquery</a></li>
<li><a href="angular.html" class="smoothScroll">Angular</a></li>
<li><a href="doc.html" class="smoothScroll">DOC</a></li>
</ul>
</div>
</div>
</nav>
<!-- End section navbar -->
<!-- start section header -->
<div class="aglr">
<div class="container">
</div>
</div>
<!-- End section header -->
<!-- start section about us -->
<div id="about">
<div class="mn_n">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h2>Angular topics</h2><br/>
<h5>Development Environment</h5>
<p>You Should Know</p>
<p>NODE....Install checking node version (node -v)</p>
<p>NPM....Install it will install while installing node only</p>
<p>ANGULAR CLI....Install (npm install -g @angular/cli) checking version (ng -v)</p>
<p>TEXT EDITORS....Install </p>
<h5>Creating New App</h5>
<p>ng new project Name and back the command amd go to that project folder and (ng serve) it will run app </p>
<h5>Basic component</h5>
<p>A component mat have 3parts<br/>1)Template </p>
<p><span><img style="width:100%" src="images/cpnt.jpg"></span></p>
<h5>Interpolation {{}}</h5>
<p>we can pass data dynamically through {{}}</p>
<p><span><img style="width:100%" src="images/ipn.jpg"></span></p>
<h5>what is decorator ?</h5>
<p>Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code.</p>
<h5>What is data Binding</h5>
<p>Data binding is a core concept in Angular and allows to define communication between a component and the DOM</p>
<p><span><img style="width:100%" src="images/bnd.jpg"></span></p>
<h5>Property Binding</h5>
<p><span><img style="width:100%" src="images/pty.jpg"></span></p>
<p><b>Attribute vs Property</b></p>
<p>Attribute and property are not the same</p>
<p>attribute - is the HTML</p>
<p>Ex : for attribute property</p>
<p><span><img style="width:100%" src="images/rtyl.jpg"></span></p>
<p>Property - DOM (Document object Modal)</p>
<p>Attribute initialize DOM properties and then they are done. attribute values cannot change once they are initialized</p>
<p>Property value however can change.</p>
<p><b>Why we can use property binding ?</b></p>
<p>Some times we will pass string and boolean that time we will use and otherwise for string values we can use interpolation also {{}} </p>
<p><span><img style="width:100%" src="images/ipn.jpg"></span></p>
<h5>Class Binding</h5>
<p><span><img style="width:100%" src="images/clsp.jpg"></span></p>
<p>class binding nothing but just like a css class attribute</p>
<p>if we apply multiple class in angular we can usr (ngClass) below ex....</p>
<p><span><img style="width:100%" src="images/cls.jpg"></span></p>
<h5>Style Binding</h5>
<p><span><img style="width:100%" src="images/rtyl.jpg"></span></p>
<p>style binding use to apply inline html elements its simller to class binding </p>
<p>in style binding we can use condition property also</p>
<p>we can use like class propery multiple styles same like class here (ngStyle)</p>
<p><span><img style="width:100%" src="images/stl.jpg"></span></p>
<h5>Event Binding</h5>
<p><span><img style="width:100%" src="images/clic.jpg"></span></p>
<p> Some times respond user event such as mouse click or keyboard events</p>
<h5>Template Reference Variables</h5>
<p><span><img style="width:100%" src="images/vrb.jpg"></span></p>
<h5>Two Way Binding </h5>
<p>In angular for two way binding we will use [(ngModal)] for this we will import formModule to our appModule other wise it will not work</p>
<p><b>import {FormModule} from '@angular/core';</b></p>
<p><span><img style="width:100%" src="images/ng.jpg"></span></p>
<h5>What are the directives and explan it ?</h5>
<p>total 3type</p>
<p><b>1) Attribute Directive</b></p>
<p>ngClass<br/>ngStyle</p>
<p><b>2)Component Directive</b></p>
<p>Highliter<br/>Dropdown</p>
<p><b>3) Structural Directives</b></p>
<p>Structural directives its add or remove dom html elements</p>
<p>total 3 </p>
<p> 1) ngIf (if else some exp....)</p>
<p><span><img style="width:100%" src="images/els.jpg"></span></p>
<p>2) ngSwitch (some case will use exp...)</p>
<p><span><img style="width:100%" src="images/sw.jpg"></span></p>
<p>3) ngFor (it will use for looping exp ....)</p>
<p><span><img style="width:100%" src="images/fr.jpg"></span></p>
<h5>Component Interaction</h5>
<p>Data passing to parent component to child component and child component to parent componet</p>
<p><span><img style="width:100%" src="images/ci.jpg"></span></p>
<p><b>Data passing parent to child exp...</b></p>
<p><span><img style="width:100%" src="images/prnt.jpg"></span></p>
<p><span><img style="width:100%" src="images/chd.jpg"></span></p>
<p><b>Data passing child to parent exp...</b></p>
<p><span><img style="width:100%" src="images/cid.jpg"></span></p>
<p><span><img style="width:100%" src="images/prt.jpg"></span></p>
<h5>what are Pipes ?</h5>
<p>pipes allow the transfer data before displaying DOM View </p>
<p> Pipes allow us to change the data inside the template. Normally, a pipe takes the data and transforms this input to the desired output. </p>
<p><span><img style="width:100%" src="images/pi.jpg"></span></p>
<h5>Services</h5>
<p>Service is nothing but a class with a specific purpose</p>
<p><b>Why do need a service ?</b></p>
<p>1) we need to Share data across multiple component</p>
<p>2) implement application : and logic reusable code which should be independent of any individual component</p>
<p>3) External interaction : such as connecting to database</p>
<p>naming convention - serve.ts (command ng g s servicename)</p>
<h5>Dependency Injection</h5>
<p>DI will take 3 parts for understanding purpose</p>
<p><b>code without DI - drawbacks</b></p>
<p><span><img style="width:100%" src="images/en.jpg"></span></p>
<p><b>DI as a design pattern</b></p>
<p>DI is a coding pattern in which a class receives its dependency from external sources rather then creating them itself</p>
<p>and here every dependency we have to create so ...this is too difficult...</p>
<p><span><img style="width:100%" src="images/pt.jpg"></span></p>
<p><b>DI as a framework</b></p>
<p>this is more feasible for developer for this we will create service and will inject which componet we want and we can use</p>
<p><span><img style="width:100%" src="images/frm.jpg"></span></p>
<h5>How will declare jquery in your components</h5>
<p>declare var $: any;</p>
<h5>http Observable and Rxjs</h5>
<p><span><img style="width:100%" src="images/httpo.jpg"></span></p>
<p>HTTP get request from empservice</p>
<p>Recive the observable and cast it into an emplayee array</p>
<p>Subscribe to the observable from empList and empDetail</p>
<p>Assign the emplayee array to a local variable</p>
<p>Rxjs is library for enable for observable in angular</p>
<p>it is reactive extension for javascript</p>
<h5><b>what are Observables? </b></h5>
<p>It will support for passing messages/data between publishers and subscribers in your application.</p>
<p>They are mainly used for event handling, asynchronous programming, and handling multiple values.</p>
<p>In this case, you define a function for publishing values, but it is not executed until a consumer subscribes to it.</p>
<p>observable a sequence of items that arrive asynchronously over time</p>
<p>HTTP call - single item</p>
<p>single item -HTTP response</p>
<p><span><img style="width:100%" src="images/db.jpg"></span></p>
<p><span><img style="width:100%" src="images/scr.jpg"></span></p>
<h5></h5>
<h5></h5>
<h5></h5>
<h5></h5>
</div>
<div class="col-lg-6">
<h2> </h2><a href="images/data.ts">data</a><br/>
<h5>Explain on how to use HttpClient with an example?</h5>
<p>Import HttpClient into root module:</p>
<p>Inject the HttpClient into the application: Let's create a userProfileService(userprofile.service.ts) as an example. It also defines get method of HttpClient</p>
<p><span><img style="width:100%" src="images/sert.jpg"></span></p>
<p>Create a component for subscribing service: Let's create a component called</p>
<p><span><img style="width:100%" src="images/scr.jpg"></span></p>
<h5>What is subscribing?</h5>
<p>when Observable publishing data that time only subscribes to it. by calling the subscribe() method</p>
<p><span><img style="width:100%" src="images/scr.jpg"></span></p>
<h5>Routing and Wildcard Route and Redirecting Routes</h5>
<p>The Angular Router which represents a particular component view for a given URL is not part of Angular Core. It is available in library named @angular/router to import required router components. For example, we import them in app module as below,</p>
<p><span><img style="width:100%" src="images/rut.jpg"></span></p>
<p>using id we can pass data through params in url while clicking button or next and it will navigate next page for that we need to do below steps exmple...</p>
<p><span><img style="width:100%" src="images/parms.jpg"></span></p>
<p>If we click to go back button in that componet we can write brlow code...</p>
<p><span><img style="width:100%" src="images/rc.jpg"></span></p>
<p><b>using absolute(../) path some diss disadvantages so for that we can use Relative Navigation </b></p>
<p><span><img style="width:100%" src="images/rl.jpg"></span></p>
<h5> Child Routes</h5>
<p>child route means we can load in our parent componet how we load withi the exmple... below</p>
<p><span><img style="width:100%" src="images/ty.jpg"></span></p>
<h5>Angular narmal Forms and reactive forms</h5>
<p>We are going to create a form with validations.</p>
<p><b>Reactive Form</b></p>
<p>Code and the logic resides in the componet class</p>
<p>No two way binding</p>
<p>well suited for complex scenarios</p>
<p>we make want to fields dynamic, custom validation danamic validations this comlpex scenarios reactform it will work</p>
<p><a href="https://www.codingame.com/playgrounds/8012/angular-form-validation-example-tutorial" target="_blank">View More..</a></p>
<h5>what is authgard ***</h5>
<p>Guards in Angular are nothing but the functionality, logic, and code which are executed before the route is loaded or the ones leaving the route.</p>
<p><b>Different types of guards,</b></p>
<p>1) CanActivate guard (e.g. it checks route access).<br/>
2) CanActivateChild guard (checks child route access).<br/>
3) CanDeactivate guard (prompt for unsaved changes).<br/>
4) Resolve guard (pre-fetching route data).<br/>
5) CanLoad guard (check before loading feature module assets).</p>
<p>In angular Authentication & Reactive Form Validation</p>
<p>if we apply auth guard we can do like below code </p>
<p>Frist we need project and interface using below cammand</p>
<p><span><img style="width:100%" src="images/pj.jpg"></span></p>
<p><b>then it will create <br/>
component login <br/>component dashboard<br/>service auth<br/>interface login(means login.ts it will create)<br/>guard auth
</b></p>
<p>in side login.ts like this</p>
<p><span><img style="width:100%" src="images/lgi.jpg"></span></p>
<p>in side app.module.ts like this</p>
<p><span><img style="width:100%" src="images/ap.jpg"></span></p>
<p>in side login.component.html like this</p>
<p><span><img style="width:100%" src="images/htm.jpg"></span></p>
<p>in side login.component.ts like this</p>
<p><span><img style="width:100%" src="images/lgts.jpg"></span></p>
<p>in side dashboard.component.html like this</p>
<p><span><img style="width:100%" src="images/ds.jpg"></span></p>
<p>in side dashboard.component.ts like this</p>
<p><span><img style="width:100%" src="images/dts.jpg"></span></p>
<p>in side auth.service.ts like this</p>
<p><span><img style="width:100%" src="images/as.jpg"></span></p>
<p>in side auth.guard.ts like this</p>
<p><span><img style="width:100%" src="images/ag.jpg"></span></p>
<p><b>after done above things it will come proper output that is called Authentication </b></p>
<h5>What is lazy loading?</h5>
<p>Lazy loading is one of the most useful concepts of Angular Routing.
Angular that allows you to load components asynchronously when a specific route is activated. using the property loadChildren. </p>
<p><span><img style="width:100%" src="images/lz.jpg"></span></p>
<h5>What are the advantages of using Angular?</h5>
<p>Client and server communication is facilitated</p>
<p>It supports two-way data-binding</p>
<p>It follows MVC pattern architecture</p>
<p>You can add a custom directive</p>
<p>It also supports RESTfull services</p>
<p>Validations are supported</p>
<p>Support for dependency injection</p>
<p>Has strong features like Event Handlers, Animation, etc.</p>
<h5>What is the difference b/w or (features) angular6 and angular7?</h5>
<p><b>Angular6 : </b></p>
<p>Angular Elements Referance introduced (It allows converting Angular components into web components and embeds the same in some non-Angular application)</p>
<p>Shakeable Provider Angular 6 introduces a new way of registering a provider </p>
<p>It will come inside the @Injectable() decorator.(providedIn: 'root')</p>
<p>RxJS 6 – Angular 6 makes use of RxJS 6 internally</p>
<p>i18n (internationalization) – Without having to build the application once per locale, any Angular application can have “runtime i18n”</p>
<h5>On which types of the component can we create a custom directive?</h5>
<p>Element directives − Directive activates when a matching element is encountered.<br/>
Attribute − Directive activates when a matching attribute is encountered.<br/>
CSS − Directive activates when a matching CSS style is encountered.<br/>
Comment − Directive activates when a matching comment is encountered</p>
<h5>What is RxJS?</h5>
<p>RxJS (Reactive Extensions for JavaScript) is a library for reactive programming using observables that makes it easier to compose asynchronous or callback-based code.</p>
<p>For example, we can import observables and operators for using HttpClient as below,</p>
<p>import { Observable, throwError } from 'rxjs';</p>
<p>import { catchError, retry } from 'rxjs/operators';</p>
<h5>What is a promise?</h5>
<p>A promise is an object that may produce a single value</p>
<p>Promises are used to handle asynchronous operations. They provide an alternative approach for callbacks by reducing the callback hell and writing the cleaner code.</p>
<p><img src="images/ad.jpg"></p>
<h5>What are the three states of promise?</h5>
<p><b>Pending:</b> This is an initial state of the Promise before an operation begins</p>
<p><b>Fulfilled:</b> This state indicates that specified operation was completed.</p>
<p><b>Rejected:</b> This state indicates that the operation did not complete. In this case an error value will be thrown.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end section about us -->
<!-- start section footer -->
<div id="footer" class="text-center">
<div class="container">
<div id="loading" class="tecnologies">
<div class="container">
<img class="lazy" src="images/html5.png" data-original="images/html5.png" height="60">
<img class="lazy" src="images/css3.png" data-original="images/css3.png" height="60">
<img class="lazy" src="images/js5.png" data-original="images/js5.png" height="60">
<img class="lazy" src="images/sass.png" data-original="images/sass.png" height="60">
<img class="lazy" src="images/jquery.png" data-original="images/jquery.png" height="60">
<img class="lazy" src="images/angularjs.png" data-original="images/angularjs.png" height="60">
<img class="lazy" src="images/typescript.png" data-original="images/typescript.png" height="60">
<img class="lazy" src="images/react.png" data-original="images/react.png" height="60">
<img class="lazy" src="images/npm.png" data-original="images/npm.png" height="60">
<img class="lazy" src="images/bower.png" data-original="images/bower.png" height="60">
</div>
</div>
<ul class="list-inline">
<li class="email list-inline-item"><i class="fa fa-envelope" aria-hidden="true"></i> <a href="mailto:rajeshb408@gmail.com" traget="_blank">rajeshb408@gmail.com</a></li>
<li class="list-inline-item"><i class="fa fa-phone"></i> <a href="https://api.whatsapp.com/send?phone=9949598062" traget="_blank">+91 9949598062</a></li>
<li class="website list-inline-item"><i class="fa fa-github"></i> <a href="https://github.com/rajeshbyragoni" target="_blank">github.com/rajeshbyragoni</a></li>
</ul>
<div class="socials-media text-center">
<ul class="list-unstyled">
<li><a href="https://www.linkedin.com/in/rajesh-byragoni-94006670/" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://www.facebook.com/rajesh.goud.1401" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://github.com/rajeshbyragoni" target="_blank"><i class="fa fa-github"></i></a></li>
<li><a href="mailto:rajeshb408@gmail.com" target="_blank"><i class="fa fa-envelope"></i></a></li>
<li><a href="https://api.whatsapp.com/send?phone=9949598062" target="_blank"><i class="fa fa-whatsapp "></i></a></li>
</ul>
</div>
<p>© Copyrights Rajesh. All rights reserved.</p>
</div>
</div>
<!-- End section footer -->
<!-- JavaScript Libraries -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/typed.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/jquery.easypiechart.min.js"></script>
<!-- Contact Form JavaScript File -->
<script src="contactform/contactform.js"></script>
<!-- Template Main Javascript File -->
<script src="js/main.js"></script>
<script src="js/skills.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setTimeout(load, 3000);
function load() {
$("#loading").show();
$(window).load(function () {
$('#loading').fadeOut('slow');
});
}
});
</script>
<script>
$(document).ready(function () {
$(".basic").text(calculateExp('01/01/2015'));
$(".oneYear").text(calculateExp('01/25/2018'));
$(".twoYear").text(calculateExp('01/25/2017'));
$(".threeYear").text(calculateExp('01/25/2016'));
$(".twoHalf").text(calculateExp('06/25/2017'));
$(".oneHalfYear").text(calculateExp('01/25/2018'));
$(".halfYear").text(calculateExp('06/25/2018'));
});
</script>
</body>
</html>