![<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-repeat Directive](https://cdn.statically.io/img/image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/75/AngularJS-in-60ish-Minutes-14-2048.jpg)
![<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](https://cdn.statically.io/img/image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/75/AngularJS-in-60ish-Minutes-21-2048.jpg)
![var demoApp = angular.module('demoApp', []);
What's the
Array for?
var demoApp = angular.module('demoApp',
['helperModule']);
Module that demoApp
depends on
Creating a Module](https://cdn.statically.io/img/image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/75/AngularJS-in-60ish-Minutes-26-2048.jpg)
![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](https://cdn.statically.io/img/image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/75/AngularJS-in-60ish-Minutes-27-2048.jpg)
![Defining Routes
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl:'View1.html'
})
.when('/partial2',
{
controller: 'SimpleController',
templateUrl:'View2.html'
})
.otherwise({ redirectTo: '/' });
});
Define Module
Routes](https://cdn.statically.io/img/image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/75/AngularJS-in-60ish-Minutes-29-2048.jpg)
![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](https://cdn.statically.io/img/image.slidesharecdn.com/simplifyspadevelopmentwiththeangularjsjavascriptframework-130411140215-phpapp02/75/AngularJS-in-60ish-Minutes-31-2048.jpg)
Uploaded byDan Wahlin
AngularJS in 60ish Minutes
The document provides an overview of AngularJS, focusing on its features for building single-page applications (SPA) such as directives, filters, data binding, and routing. It includes practical examples of using controllers, views, and factories, demonstrating how to create and manage dynamic content within an application. Additionally, it offers resources for further learning and tutorials related to AngularJS development.
AngularJS in 60ish Minutes
- 1. AngularJS in 60ishMinutes
- 2.
- 3. Win a freecopy of the video course! More details at: http://tinyurl.com/AngularJSJumpStart
- 4.
- 5. Agenda AngularJS Features Getting Started Directives, Filters and Data Binding Views, Controllers and Scope Modules, Routes and Factories
- 6.
- 7. Single Page Application(SPA) SPA Demo http://www.myspa.com View View View View
- 8. The Challenge withSPAs DOM Manipulation History Routing Module Loading Data Binding Object Modeling Ajax/Promises Caching View Loading
- 10. ngularJS is afull-featured SPA framework Data Binding MVC Routing Templates ViewModel Views Controllers Dependency Injection Directives Testing Controllers jqLite Validation FactoriesHistory
- 11. Directives, Filters and DataBinding
- 12. What are Directives? Theyteach HTML new tricks!
- 13. <!DOCTYPE html> <html ng-app> <head> <title></title> </head> <body> <divclass="container"> Name: <input type="text" ng-model="name" /> {{ name }} </div> <script src="Scripts/angular.js"></script> </body> </html> Directive Directive Data Binding Expression Using Directives and Data Binding Syntax
- 14. <html data-ng-app=""> ... <div class="container" data-ng-init="names=['Dave','Napur','Heedy','Shriva']"> <h3>Loopingwith 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-repeat Directive
- 15. AngularJS Help forDirectives
- 16. <ul> <li data-ng-repeat="cust incustomers | 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
- 17. AngularJS Help forFilters
- 18.
- 19.
- 20. View Controller$scope $scope isthe "glue" (ViewModel) between a controller and a view View, Controllers and Scope
- 21. <div class="container" data-ng-controller="SimpleController"> <h3>Addinga 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
- 22.
- 23.
- 24.
- 25.
- 26. var demoApp =angular.module('demoApp', []); What's the Array for? var demoApp = angular.module('demoApp', ['helperModule']); Module that demoApp depends on Creating a Module
- 27. 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
- 28. The Role ofRoutes SPA Demo http://www.myspa.com View1 View2 View4 View3 /view2 /view3 /view4 /view1
- 29. Defining Routes var demoApp= angular.module('demoApp', ['ngRoute']); demoApp.config(function ($routeProvider) { $routeProvider .when('/', { controller: 'SimpleController', templateUrl:'View1.html' }) .when('/partial2', { controller: 'SimpleController', templateUrl:'View2.html' }) .otherwise({ redirectTo: '/' }); }); Define Module Routes
- 30. SPA Demo http://www.myspa.com Where doViews 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
- 31. The Role ofFactories 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
- 32.
- 33.
- 34. Summary AngularJS providesa robust "SPA" framework for building robust client-centric applications Key features: Directives and filters Two-way data binding Views, Controllers, Scope Modules and Routes
- 35.
- 36. Win a freecopy of the video course! More details at: http://tinyurl.com/AngularJSJumpStart
- 37. Newsletter and FlipBoardMagazines http://weblogs.asp.net/dwahlin
- 38.
Editor's Notes
- #6 First time I looked at it I felt like it was a little strange….but I could go with it.
- #7 As I researched more I came across some things that looked really strange and just didn't click with me.
- #8 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.
- #9 But, I stuck with it, kept on researching and playing around with the samples,took a deep breath and….
- #10 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!
- #11 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.
- #12 And then at some point it hit me – this framework is really powerful!