Valentine with AngularJS
•Download as PPTX, PDF•
1 like•988 views
AngularJS is a full-featured framework for building single page applications. It provides features like data binding, routing, templates, dependency injection and directives. The document discusses key AngularJS concepts like directives, filters, views, controllers, scope, modules and routes. Directives allow extending HTML with new syntax and attributes. Filters filter or format data. Views and controllers work with scope to provide the model for the view. Modules are containers for controllers and services. Routes map URLs to controllers and views.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Valentine with AngularJS
Similar to Valentine with AngularJS (20)
More from Vidyasagar Machupalli
More from Vidyasagar Machupalli (20)
Recently uploaded
Recently uploaded (20)
Valentine with AngularJS
- 2. @iAmVMac
- 3. Vidyasagar Machupalli About.ME Microsoft MVP-Games for Windows Developer at DELL http://about.me/mscvidyasagar Twitter @iAmVMac
- 10. MVW / MV* framework
- 12. Agenda AngularJS Features Getting Started Directives, Filters and Data Binding Views, Controllers and Scope Modules, Routes and Factories @iAmVMac
- 13. Getting Started
- 15. Single Page Application (SPA)
- 16. The Challenge with SPAs DOM Manipulation History Routing Module Loading Data Binding Object Modeling Ajax/Promise s Caching View Loading
- 18. ngularJS is a full-featured SPA framework Data Binding MVC Routing Templates ViewModel Views Controllers Dependency Injection Directives Testing Controllers jqLite Validation FactoriesHistory
- 19. Directives, Filters and Data Binding
- 20. What are Directives? They teach HTML new tricks!
- 21. Using Directives and Data Binding <!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
- 22. <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 Iterating with the ng-repea Directive
- 23. AngularJS Help for Directives
- 24. <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 Using Filters
- 25. AngularJS Help for Filters
- 26. Demo
- 28. View Controller$scope $scope is the "glue" (ViewModel) between a controller and a view View, Controllers and Scope
- 29. <div class="container" data-ng-controller="SimpleController"> <h3>Adding a Simple Controller</h3> <ul> <li data-ng-repeat="cust in customers"> {{ cust.name }} - {{ cust.city }} </li> </ul> </div> <script> function SimpleController($scope) { $scope.customers = [ { name: 'Dave Jones', city: 'Phoenix' }, { name: 'Jamie Riley', city: 'Atlanta' }, { name: 'Heedy Wahlin', city: 'Chandler' }, { name: 'Thomas Winter', city: 'Seattle' } ]; } </script> Define the controller to use Basic controller $scope injected dynamically Access $scope Creating a View and Controller
- 30. Demo
- 33. ControllerFactoryDirective Routes Module Config Service Provider <html ng-app="moduleName"> Modules are Containers Value Filter
- 34. var demoApp = angular.module('demoApp', []); What's the Array for? var demoApp = angular.module('demoApp', ['helperModule']); Module that demoApp depends on Creating a Module
- 35. var demoApp = angular.module('demoApp', []); demoApp.controller('SimpleController', function ($scope) { $scope.customers = [ { name: 'Dave Jones', city: 'Phoenix' }, { name: 'Jamie Riley', city: 'Atlanta' }, { name: 'Heedy Wahlin', city: 'Chandler' }, { name: 'Thomas Winter', city: 'Seattle' } ]; }); Define a Module Define a Controller Creating a Controller in a Module
- 36. The Role of Routes SPA Demo http://www.myspa.com View1 View2 View4 View3 /view2 /view3 /view4 /view1
- 37. Defining Routes var demoApp = angular.module('demoApp', ['ngRoute']); demoApp.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'SimpleController', templateUrl:'View1.html' }) .when('/view2', { controller: 'SimpleController', templateUrl:'View2.html' }) .otherwise({ redirectTo: '/' }); }); Define Module Routes
- 38. SPA Demo http://www.myspa.com Where do Views Go in a Page? Dynamically loaded views are injected into the shell page as a module loads: <div ng-view></div> <ng-view></ng-view> OR View1
- 39. The Role of Factories var demoApp = angular.module('demoApp', []) .factory('simpleFactory', function () { var factory = {}; var customers = [ ... ]; factory.getCustomers = function () { return customers; }; return factory; }) .controller('SimpleController', function ($scope, simpleFactory) { $scope.customers = simpleFactory.getCustomers(); }); Factory injected into controller at runtime
- 41. Summary AngularJS provides a robust "SPA" framework for building robust client-centric applications Key features: Directives and filters Two-way data binding Views, Controllers, Scope Modules and Routes @iAmVMac
- 42. Thank You Resources • https://thinkster.io/a-better-way-to-learn- angularjs/ • https://github.com/jmcunningham/AngularJ S-Learning
- 43. @iAmVMac
Editor's Notes
- 5
- As I researched more I came across some things that looked really strange and just didn't click with me.
- I saw a lot of words that were confusing and after more research I started to get a little frustrated…kind of felt like this kid.
- But, I stuck with it, kept on researching and playing around with the samples, took a deep breath and….
- I chilled out, and once a few things started to click I started to realize that I could really take advantage of some great features!
- Once you have that "light bulb moment" you realize how powerful and flexible AngularJS is. That's when it truly changes how you think about writing Single Page Applications (SPAs) and client-side applications in general.
- And then at some point it hit me – this framework is really powerful!