An introduction to AngularJS
0 likes1,227 views
AngularJS is a JavaScript MVC framework developed by Google that facilitates the creation of structured and maintainable single-page applications through features like two-way data binding. The document explains how to embed AngularJS into web pages and provides examples of using the ng-app directive and binding expressions. It highlights the advantages of AngularJS, including faster development, support for SPAs, and backing from Google and an active development community.
![Using JavaScript object in expression
<div ng-app="">
{{ {name:'Yogesh',age:22}.name }}
</div>
Its gives the following Output –
Yogesh
JavaScript Array in expression
<div ng-app="">
{{ ['Yogesh','Sonarika','Vishal'][1] }}
</div>
Its gives the following Output –
Sonarika](https://image.slidesharecdn.com/anintroductiontoangularjs-160814163834/85/An-introduction-to-AngularJS-13-320.jpg)
An introduction to AngularJS
- 2. AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provides solutions to standard infrastructure concerns.
- 3. Intro AngularJS is a JavaScript MVC Framework that integrates two-way data binding, Angular does one very specific job very well – that is, moving data around inside a single-page application, dynamically updating the view as the data changes without the need for specific listener code. If you have a website where this type of functionality is important (there’s more and more of them now) then it might fit the bill for you. There are other JavaScript frameworks placed on the client to manage the flow of data from the server to your application, like - Backbone, Knockout, React, Meteor, Aurelia, etc.
- 4. How to Embed AngularJS in your page? For including AngularJS to your page you first need to download AngularJS library from its Official Website. After downloading the library copy or move the file to your project folder. Then include the file within your page same as we include a jQuery library or any other JavaScript file. <script type="text/javascript" src="angular.min.js"></script> Or you can directly include from CDN <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
- 5. Example <!DOCTYPE html> <html lang="en" ng-app=""> <head > <meta charset="UTF-8"> <title>First AngularJS program</title> <script src="angular.min.js" type="text/javascript"></script> </head> <body> <div> </div> </body> </html> In HTML code, you may be noted that <html> tag contains ng-app attribute.
- 6. What is ng-app ? ng-app is an AngularJS directive there are many such directives are available in AngularJS. Here, ng prefix stands for Angular. the ng-app directive is a starting point of AngularJS application. Angular Framework first checks the ng-app directive within the HTML page. If its found then Angular bootstrap itself and starts to manage the section of the page that have a ng-app directive. Everything within the HTML tag section will be managed by Angular.
- 7. Let’s do some Angular Let’s compute the sum of 40 + 50. <!DOCTYPE html> <html lang="en" ng-app=""> <head > <meta charset="UTF-8"> <title>First AngularJS program</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> </head> <body > <div > 40 + 50 = {{ 40+50 }} </div> </body> </html>
- 8. Here, we use double curly braces {{ }} in Angular it means binding expressions. Within that, we can specify any Angular expression. In above code, 40+50 treated as an expression and add both values. When we execute the above program, it will produce the following output – 40 + 50 = 90
- 9. Now let’s change ng-app directive position in our current code In our previous code <html> code contain ng-app directive. Let’s move the ng-app directive position to <div> tag and add another <div> and it also contains an Angular expression.
- 10. <!DOCTYPE html> <html lang="en" > <head > <meta charset="UTF-8"> <title>First AngularJS program</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> </head> <body> <div ng-app=""> 40 + 50 = {{ 40+50 }} </div> <div> 50 + 60 = {{ 50+60 }} </div> </body> </html>
- 11. Here, ng-app directive only present in first <div> that means Angular going to manage only that section of the page and any children element it contains. Angular is not responsible for rest of the page that means second <div> element which contains Angular expression is not been evaluated. When we execute the above program, it will produce the following output – 40 + 50 = 90 50 + 60 = {{ 50+60 }}
- 12. Valid expressions Using relational operator to create an expression. It returns True or False based on values. <div ng-app=""> {{ 31 > 20 }} {{ 43 < 50 }} {{ 13 >= 23 }} {{ 12 <= 40 }} {{ 5 == 5 }} {{ 4 != 5 }} </div> Its gives the following Output – true true false true true true
- 13. Using JavaScript object in expression <div ng-app=""> {{ {name:'Yogesh',age:22}.name }} </div> Its gives the following Output – Yogesh JavaScript Array in expression <div ng-app=""> {{ ['Yogesh','Sonarika','Vishal'][1] }} </div> Its gives the following Output – Sonarika
- 14. Advantages ● Two-way Data binding In AngularJS Framework Two-way data binding is an approach to synchronize the data between model and view that means if there is any change made in the model then the view will be updated. While you can write a simple two-way data-binding event in jQuery, JavaScript MVC libraries provide a more declarative (using HTML) way of connecting models to your view.
- 15. Advantages ● Faster application Development The MVC architecture ensures that the application development, testing & maintenance is fast & quick! It helps in enhancing the productivity of the developers too! ● Templating Angular combines the template with information from the model and controller to render the dynamic view that a user sees in the browser.
- 16. Advantages ● Greate for SPA (Single Page Application) Single Page Application(SPA) is a web application that fits on a single web page with dynamic actions without refreshing the page. Single Page Application interactions can be handled without reaching the server. Single Page Application can improve performance in several ways like loading time, using AJAX, easy to navigate pages etc. End users will be more comfortable with Single Page Application, It is very easy to navigate to different page and filter content. ● Supported by Google and a great development community.
- 17. Why? To built more responsive web applications, full page refresh takes the time to built up a connection with the server while AJAX is amazingly fast in fetching data from already connected server. The community is awesome, it’s google. Plus you can build an app like Gmail using it. I have listened from sources that Google is reinventing its Gmail app using AngularJS and the new design will roll out to soothe the eye of consumer and suit the needs of current web era.