Angular #6

Transcript

1. AngularJS 1.5.x Marchenkov Danila, Software Developer
2. AngularJS DI
3. .config() Gets executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks.
4. .run() Gets executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks
5. implicit annotation • ng-annotate • strict-di • $inject someModule.controller('MyController', function($scope, greeter) {
6. angular.module('myApp', []) .factory('willBreak', function($rootScope) { // $rootScope is implicitly injected }) .run(['willBreak', function(willBreak) { // AngularJS will throw when this runs }]); var MyController = function($scope, greeter) {} MyController.$inject = ['$scope', 'greeter']; someModule.controller('MyController', MyController); npm install -g ng-annotate
7. manual bootstrapping angular.bootstrap(document, ['myApp']);
8. npm install angular-animate ngAnimate
9. ngAnimate support
10. API • CSS-animations • css class hooks • ng-enter • ng-leave • JS-animations • module.animation() api
11. Animation JS api myModule.animation('.slide', [function() { return { enter: function(element, doneFn) { jQuery(element).slideIn(1000, doneFn); } } }]); .slide.ng-enter { transition:0.5s linear all; transform:translateY(-100px); } .slide.ng-enter.ng-enter-active { transform:translateY(0); } <div class="slide"> Slide in and out </div>
12. $animateCss myModule.animation('.slide', ['$animateCss', function($animateCss) { return { enter: function(element) { return $animateCss(element, { event: 'enter', structural: true, addClass: 'maroon-setting', from: { height: 0 }, to: { height: 200 } }); } } }]);
13. $http.get(‘/some/endpoint’) .then(res => { if (!!res.data) { this.someData = res.data; } });
14. npm install angular-resource ngResource
15. let User = $resource('/user/:userId', { userId: ’@id’ }); let user = User.get({ userId: 123 }, () => { user.abc = true; user.$save(); });
16. { 'get': { method:’GET’ }, 'save': { method:’POST' }, 'query': { method:'GET', isArray:true}, 'remove': { method:’DELETE' }, 'delete': { method:’DELETE' } }; var app = angular.module('app', ['ngResource', 'ngRoute']); app.factory('Notes', ['$resource', function($resource) { return $resource('/notes/:id', null, { 'update': { method:'PUT' } }); }]); app.controller('NotesCtrl', ['$scope', '$routeParams', ‘Notes', function($scope, $routeParams, Notes) { var note = Notes.get({ id: $routeParams.id }); $id = note.id; }]);
17. XSS
18. npm install angular-sanitize ng-sanitize
19. https://plnkr.co/edit/hFzZqLfk7beFxYXlzOlJ
20. $sce Strict Contextual Escaping
21. –Johnny Appleseed “Type a quote here.”
22. little more • ng-cookies • ng-messages • ng-mock • ng-touch