What is AngularJS and how does it works?

1. What Is ANGULARJS and How Does ItWork?

2. AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag. AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions. According to Wikipedia, AngularJS (also written as Angular.js) is a JavaScript-based open- source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-pageapplications INTRODUCTION WWW.ZEROBUGACADEMY.COM

3. AngularJS is built on the belief that declarative programming should be used to create user interfaces and connect software components, while imperative programming is better suited to defining anapplication's business logic. The framework adapts and extends traditional HTML to present dynamic content through two-way data-binding that allows for the automatic synchronization of models and views. As a result, AngularJS de-emphasizes explicit DOM manipulation with the goal of improving testability andperformance. WHAT IS ANGULARJS? WWW.ZEROBUGACADEMY.COM

4. AngularJS Design Goalsinclude: to decouple DOM manipulation from application logic. The difficulty of this is dramaticallyaffectedbythewaythecodeisstructured. to decouple the client side of an application from the server side. This allows developmentworktoprogressinparallel,andallowsforreuseofbothsides. toprovidestructureforthejourneyofbuildinganapplication:fromdesigningtheUI, through writing the business logic, totesting. DESIGN GOALS WWW.ZEROBUGACADEMY.COM

5. Keeping some of the issues/concerns shown by different classes of developers in relation with learning AngularJS, following are some of the areas that shall be explored indetail: HOW DOES IT WORKS? WWW.ZEROBUGACADEMY.COM

6. Following are key method invocations that happen as part of initializing angular app and rendering thesame. angularInit method which checks for ng-appmodule. bootstrap method which is invoked once an ng-app module is found. Following are key invocations from within bootstrapmethod: createInjectormethodwhichreturnsdependencyinjector.Ondependencyinjector instance, invoke method is called. compile method which collectsdirectives Compositelinkingmethodwhichisreturnedfromcompilemethod.Scopeobjectis passed to this composite linking method $applymethodinvokedonscopeobjectfinallydoesthemagicandrenderstheview. ANGULARJS INITIALIZATION&RENDERINGPROCESS WWW.ZEROBUGACADEMY.COM

7. Dependency Injection is pervasive throughout AngularJS. You can use it when defining components or when providing run and config blocks for amodule. Services, directives, filters, and animations are defined by an injectable factory method or constructor function, and can be injected with "services", "values", and "constants" as dependencies. Controllers are defined by a constructor function, which can be injected with any of the "service" and "value" as dependencies, but they can also be provided with "special dependencies". See Controllers below for a list of these specialdependencies. Therunmethodacceptsafunction,whichcanbeinjectedwith"services","values"and, "constants"asdependencies.Notethatyoucannotinject"providers"intorunblocks. DEPENDENCY INJECTION WWW.ZEROBUGACADEMY.COM

8. Scopes provide APIs ($watch) toobserve model mutations Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the "AngularJS realm" (controllers, services, AngularJS event handlers). Scopes can be nested to limit access to the properties of application components while providing access to shared model properties. Nested scopes are either "child scopes" or "isolate scopes". A "child scope" (prototypically) inherits properties from its parent scope.An"isolatescope"doesnot.Seeisolatedscopesformoreinformation. Scopesprovidecontextagainstwhichexpressionsareevaluated.Forexample {{username}} expression is meaningless, unless it is evaluated against a specific scope which defines the usernameproperty. SCOPE AND KEY API'S WWW.ZEROBUGACADEMY.COM

9. At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element (e.g. via event listeners), or even to transform the DOM element and itschildren. AngularJS comes with a set of these directives built-in, like ngBind, ngModel, and ngClass. Much like you create controllers and services, you can create your own directives for AngularJS to use. When AngularJS bootstraps your application, the HTML compilertraversestheDOMmatchingdirectivesagainsttheDOMelements. DIRECTIVES WWW.ZEROBUGACADEMY.COM

10. Zerobug Academy is the fast growing software training institute in Chennai offering training in various technologies like Java Training, Dot Net Training, Php Training, AWS Training, Selenium Testing Training, Digital Marketing Training, Big data Training and much more with live examples for the students who are looking for employment opportunities and for the professional who are looking for a jobchange. ContactUs: +91-9750061584