Scribd
Upload
19 views15 pages

Angular JavaScript

AngularJS is an open-source JavaScript MVC framework for developing Single Page Applications, initially created by Google. It enhances HTML with dynamic capabilities through directives and two-way data binding, while also supporting dependency injection and unit testing. However, it has drawbacks such as security issues, complexity, and reliance on plain HTML templates.

Uploaded by

coolcartoons769
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
19 views15 pages

Angular JavaScript

AngularJS is an open-source JavaScript MVC framework for developing Single Page Applications, initially created by Google. It enhances HTML with dynamic capabilities through directives and two-way data binding, while also supporting dependency injection and unit testing. However, it has drawbacks such as security issues, complexity, and reliance on plain HTML templates.

Uploaded by

coolcartoons769
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
5.10 Introduction to Angular JS Angular]s is a Javscript open source front-end MVC framework that is mainly used to develop Single Page Web Applications(SPA). It was originally developed in 2008-2009 by Misko hevery and Adam abrons, and is now maintained by Google. The Agular JS changes static HTML to dynamic HTML. It extends the ability of HTML by adding built-in attributes and components and provides an ability to create custom attributes using simple JavaScript. Ista of HTML Can oe Jar nt ear toe ane in ee 1 allows us to work wth components an sear cose ee youcan ee gain which sven ie template: 6 mainly pan HT ola pM a he he Ang “you cranguless ca onc bo singh ps et eden ee cone cn on ote einai cad ml ie ape ema anne components Directives: Direct Deyo contains several cietives such as nap, nono ___tapressons: Angular JS expressions are apreted ‘with (whic Exprepapressions can be added into the TMI templates, Ceawller A JavaSeript object constructor function contol he Angular JS applications. 2 Scope: A JavaScript abject acts asa Tink between ontolier andthe View. Each data manipulation Scope nent takes place withthe help of sope ois date Binding: It coordinates model and view about any changes 1 fp Validations: It take place with the help of “Angular JS forms and controls * er: It display the formatting of dataon DOM and “eatend the behavior of directives and binding expressions. Services: These are singletons that are used by disc dency Injections a |, Testing: The codes developed by Depen reat eke Jasmine and Karma ae two wiely ‘used technologies. Advantages of Angular JS The advantages of angular 3 areas follows Itis Open source JavaScript MVC framework Iti supported by Google ‘Theres no need to learn another spt Itsupports separation of concerns by us Built in attributes (directives) makes HTML dynam Easy to extend and customize. It supports Single Page Application Uses Dependency Injection Easy to Unit test Disadvantages of AngularJS ‘The disadvantages of Angular JS are as follow 1nd it mainly makes use ofthe plain HFFMI- template compiler. It traverses the templates and then they are parts. tis a set of tives indicat the compile o associate a behavior othe DOM element or moat ler ng-view, ng eA: Jnindicate a data binding in HTML- either of these two. controllers, or other services re tested. Some of the popular testing, Script and HTML. 1g language. Iti pure av MVC design pattern. 4. Not Secure: Its applications are not safe. [Not Degradable: If user of your application disables the J been ways to do the: « Complex at times: It becomes complex to handles as there are multiple ys same thing ang, creates confusion and requires considerable efforts. Model View Controller MVC) Iti software design patern used to develop a web application. I consists of three component. Thee. 4 Model: It used to manage the application data. It responds to the request from view and tothe instructions from controler to update itself sata 1. View: Its responsible for displaying the aplication data. presentation of data ina particular form, Itiggered by the controller's decision to present the data. They are script-based systems such a 5,45) PHP and very easy to integrate with AJAX technology. Controller The main ob isto connect the mode! and the view component. The controller responds ig user input and performs interactions on the data model objects. Normally, the MVC architecture have to split applications into these three components and then write ie code to connect them. However, in Angular JS al you have to do is split the application into MVC any does the rest by itself. It saves a lot of time and allows finishing the job with less code. Combine model view controller in one application like a follows. - JavaScript then iapays nothing ect a How to create first application in AngularJS ‘An Angular application consists of following three main parts: ‘a. ng-app~ Defines and links application to HTML, '. _ng-model~ Binds the values of application data to HTML input co ¢_ng-bind- Binds the Application datato HTML tags, tO ‘Steps to create AngularJS Application 1. Load framework it is done by using tag.
/* Pt ody>

_ Foll name: Neha Singhvt € FSF O Fie| EpAogutaysjecamprin. Figure 5.48: Output of Example 16 sa ee a tt cal Se Ee epe://[Link]/ajax/ abs /angutarje/1.6.9/[Link]"> pres en so os-aps ng-tnktarpactone “ie Bay vans" haachame Gain) ees eC penaen tonne fap Uae este me S113 Angular J8 Arrays tray alike var am Frample 48: ose was — Bia sete [Link]/a3ex/ lange sa 7tetoyaagse. aie 3 vown in Figure 547, otrtnbtepounean(2 48,10, ome tated result ie Slates 32,141", {iposneet4] “Sleds SO hie| e/Angut J Figur BAB Outpt of ample “The third result is 12 Same example using ng-bind. Example 4: | a ‘The "myApp" parameter refers to an HTTML element in which the application will run. Now yo# 2" a ree Bitcve filter and more to your Angular Supplcsuere ss ‘Adding a Controller [Add a controller to your application, and refer tothe controller withthe ng-co controller wit troller directive Example 50: Di | “ ain ntal> Secript sxc="https: //[Link]/ajax/1ibe/ Segshase/A 6: P/anquier min. Je"> SE gas Hadalec/na> oo are="aYNEP” 25 eee nere"aycesl"> 3 eeage)) se escrip™ 2 gesotter Cmycesl", we eeetgecore) | aoe eimessage = "Aagulanss weaies!"7 be: Vier Sioa? civeal> ‘raxput ofthe above code a shown in 5.11.5 Modules and Controllers in Files ai mon in Angular JS applicaion opt he rn contin sn PP angular .module ("myn came ample 5: __ oe aoript ms [Link]/siex/ sroamhteps: //ajax.9009) 7 Libs /angularje/1-6.9/angulaz mit 3" ‘Sody> ae ng-app="syAPP" controller="myctel"> , UC eiratame +" 7 + agetnane 1"
| <