one page app with angularjs
DESCRIPTION
Why is AngularJS so cool.TRANSCRIPT
![Page 2: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/2.jpg)
WTF, WHICH TOOL I NEED ???Backbone.jsEmber.jsGoogle ClosureSpinejQuery (non FW)Este.js (Is it not dead? ;-))...
No thanks, AngularJS is cool ;-)
![Page 3: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/3.jpg)
WHY ?
(It's fucking good)
BootstrappingModule basedTemplates2-way data bindingDependency InjectionRoutingDirectives
![Page 4: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/4.jpg)
BOOTSTRAPPINGStep 1:
Step 2:
Result:
I'm using this way (RequireJS)
<script src="lib/js/angular.min.js"></script>
<html ng-app>
{{1+2}} is 3
var app = angular.module('app', [/* deps */]);angular.bootstrap(document, ['app']);
![Page 5: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/5.jpg)
MODULE BASEDHTML
JS
<html ng-app="myApp">
var myApp = angular.module('myApp', []); // No deps.
// Collection of UI directives.angular.module('uiDirectives', [/*...*/]);
var myApp = angular.module('myApp', ['uiDirectives']);
![Page 6: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/6.jpg)
TEMPLATES
webelement#14
<ul> <li ng-repeat="item in ['web', 'element', '#14']"> {{item}} </li></div>
![Page 7: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/7.jpg)
WITH CONTROLLERSJS
Template
Result
web 0 element 1 #14 2
myApp.controller('TemplatesController', function($scope) { $scope.items = ['web', 'element', '#14'];});
<div ng-controller="TemplatesController"> <span ng-repeat="item in items"> {{item}}<small>{{$index}}</small> </span></div>
![Page 8: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/8.jpg)
ASYNC TEMPLATESBut, you can use this
with nested levels ;-)
AngularJS loads the templates asynchronously.
<div ng-view> <!-- Only one on the page -->
<div ng-include="templates/foo.html">
![Page 9: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/9.jpg)
2-WAY DATA BINDINGController
Template
Result
Clear!
$scope.input = ""
$scope.input = "";$scope.clearInput = function() { $scope.input = "";};
<input ng-model="input"><input ng-click="clearInput()" type="button" value="Clear!">
![Page 10: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/10.jpg)
HOW IT WORKS?ONE WAY DATA BINGING
![Page 11: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/11.jpg)
HOW IT WORKS?TWO IS MORE THAN ONE, BRO
![Page 12: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/12.jpg)
HOW IT WORKS?SCOPES
![Page 13: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/13.jpg)
DEPENDENCY INJECTIONDependecny injector is better than Chuck N.
myApp.service('myService', function() {/*...*/});
myApp.controller('SomeItemsController', function(myService) { // myService was automatically injected
myService.get('some/path').success(function(data) { $scope.items = data.items; });});
![Page 14: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/14.jpg)
HOW IT WORKS?
![Page 15: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/15.jpg)
ROUTING$routeProvider
myApp.config(['$routeProvider', function($rp) { $rp .when('/foo', { templateUrl: 'tpl/foo.html', controller: FooController }) .otherwise({redirectTo: '/bar'});}]);
![Page 16: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/16.jpg)
DIRECTIVESIt's all about directives.
Value of slider: 5
myApp.directive('slider', function() { return { link: function(scope, element, attrs) { $(element).slider(); } }});
![Page 17: One page app with AngularJS](https://reader034.vdocuments.us/reader034/viewer/2022051411/547cfce7b4af9faa158b52e0/html5/thumbnails/17.jpg)
and so much more on
Thanks for coming
|
angularjs.org
@new_POPE newpope.org