Angular JS, A dive to concepts
Download as PPTX, PDF2 likes530 views
The document discusses AngularJS, a JavaScript MVC framework developed by Google for building maintainable web applications, particularly Single Page Applications (SPAs). It covers key features such as directives, data binding, and MVC/MVVM design patterns, while also emphasizing the framework's advantages like improved organization and use of HTML for application development. The document includes practical demonstrations and highlights the resources available for learning AngularJS.
![Iterating with ng-repeat Directive
<html data-ng-app="">
...
<div class="container"
data-ng-init="names=['Dave','Napur','Heedy','Shriva']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="name in names">{{ name }}</li>
</ul>
</div>
...
</html>
Iterate through names](https://image.slidesharecdn.com/angularjssagaracharya-151228185609-160521181410/85/Angular-JS-A-dive-to-concepts-15-320.jpg)
![Filters
Angular filters format data for display to the user.
{{ expression [| filter_name[:parameter_value] ... ] }}
{{ uppercase_expression | uppercase }}
{{ expression | filter1 | filter2 }}
Can create custom filters](https://image.slidesharecdn.com/angularjssagaracharya-151228185609-160521181410/85/Angular-JS-A-dive-to-concepts-16-320.jpg)
Angular JS, A dive to concepts
- 1. Working with Angular JS, A dive to SPA! ~Abhishek Sur
- 2. Agenda • Misunderstandings • What is angular? • SPAs • Why angular? • Features • MVC/MVVM • Directives, filters, expression • Some cool Demo
- 3. Another JS Lib Lots of new learning Difficult to learn Useful for web only Used for styling purpose
- 4. What is ANGULARJS? • It’s not a JavaScript library (As they say). There are no functions which we can directly call and use. • It is not a DOM manipulation library like jQuery. But it uses subset of jQuery for DOM manipulation (called jqLite).
- 5. What is ANGULAR JS? (contd…) • Focus more on HTML side of web apps. • For MVC/MVVM design pattern • AngularJS is a Javascript MVC framework created by Google to build properly architectured and maintenable web applications. • “ANGULARJS is what HTML could have been if it had been designed for web application development.” • AngularJS extends HTML with new attributes.
- 6. Single Page Application (SPA) SPA Demo http://www.myspa.com View View View View
- 7. The Challenge with SPAs DOM Manipulation History Routing Module Loading Data Binding Object Modeling Ajax/Promises Caching View Loading
- 8. Solution?
- 9. Why ANGULARJS? • Defines numerous ways to organize web application at client side. • Enhances HTML by attaching directives, custom tags, attributes, expressions, templates within HTML. • Encourage TDD • Encourage MVC/MVVM design pattern • Code Reuse • Good for Single Page Apps (SPA) • Cool Features -> Next Slide
- 10. Key Features of ANGULARJS ngularJS is a full-featured SPA framework Data Binding MVC Routing Templates ViewModel Views Controllers Dependency Injection Directives Testing Controllers jqLite Validation FactoriesHistory
- 11. MVC : Model View Controller View ControllerModel 1. Event or User Action or View Load 2. Maps to particular Model after fetching the data 3. Implement the Business Logic on response data and Bind it to View View : • Renders the Model data • Send User actions/events to controller • UI Controller: • Define Application Behavior • Maps user actions to Model • Select view for response Model: • Business Logic • Notify view changes • Application Functionality • Data in general
- 12. MVVM: Model View ViewModel View ViewModelModel UI Presentation LogicBusiness Logic and Data • User actions, commands • Data binding • Notifications • Data Access • Update ViewModel about change
- 13. What are Directives? • The directives can be placed in element names, attributes, class names, as well as comments. Directives are a way to teach HTML new tricks. • A directive is just a function which executes when the compiler encounters it in the DOM. • <input ng-model='name'> • Custom Defined Directives • <span draggable>Drag ME</span>
- 14. What are Directives? (contd..) <!DOCTYPE html> <html ng-app> <head> <title></title> </head> <body> <div class="container"> Name: <input type="text" ng-model="name" /> {{ name }} </div> <script src="Scripts/angular.js"></script> </body> </html> Directive Directive Data Binding Expression
- 15. Iterating with ng-repeat Directive <html data-ng-app=""> ... <div class="container" data-ng-init="names=['Dave','Napur','Heedy','Shriva']"> <h3>Looping with the ng-repeat Directive</h3> <ul> <li data-ng-repeat="name in names">{{ name }}</li> </ul> </div> ... </html> Iterate through names
- 16. Filters Angular filters format data for display to the user. {{ expression [| filter_name[:parameter_value] ... ] }} {{ uppercase_expression | uppercase }} {{ expression | filter1 | filter2 }} Can create custom filters
- 17. Using Filters <ul> <li data-ng-repeat="cust in customers | orderBy:'name'"> {{ cust.name | uppercase }} </li> </ul> Order customers by name property <input type="text" data-ng-model="nameText" /> <ul> <li data-ng-repeat="cust in customers | filter:nameText | orderBy:'name'"> {{ cust.name }} - {{ cust.city }}</li> </ul> Filter customers by model value
- 18. Expression Expressions are JavaScript-like code snippets that are usually placed in bindings such as {{ expression }} <body> 1+2={{1+2}} </body>
- 19. Demo
- 20. Why should we use Angular JS? • Bootstrap features • Directives for animation & effects for interactive UI • SPA : modern way to represent WEB APP • Compatible with mobile app development
- 21. Why Developer should use Angular JS? • It is developed by google. • RESTful actions (Using one line of JS you can quickly communicate with server) • Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. • Provides several options for testing (TDD) • Flexibility with filters • Good documentation & resources.
- 22. Some Statistics! o Angular JS is 3 times faster than any external JS available till now ~Google.
- 23. More Statistics! (Interesting One) • GITHUB Stats: • Stars: o if you star a repository, you basically want to show your appreciation as well as keep track of repositories that you find interesting without it spamming your timeline. o In top 3 of github stars project list, only bootstrap & node js is ahead of it. o Check stars stats: o https://github.com/search?utf8=%E2%9C%93&q=stars%3A%3E30000&type=Repositories&ref=searchresult s • fork: o In software engineering, a project fork happens when developers take a legal copy of source code from one software package and start independent development on it, creating a distinct piece of software. o In top 7 of github fork project list. o Check fork stats: o https://github.com/search?utf8=%E2%9C%93&q=forks%3A%3E10000&type=Repositories&ref=searchresult s
- 24. Resources Documentation • AngularJS Developer Guide • AngularJS API • AngularJS Tutorial Videos • AngularJS Fundamentals In 60-ish Minutes • Introduction to Angular JS • AngularJS end-to-end web app tutorial Part I
- 26. Abhishek Sur Email : [email protected] Twitter: @abhi2434 Facebook : /abhi2434
Editor's Notes
- #27: In Slide Show mode, click the arrow to enter the PowerPoint Getting Started Center.