Intro toAngularJS

View Github Repository Open presentation in a new window

dpiatek

See all presentation from dpiatek

Intro toAngularJS

0 0

angular-talk-slides

On Github dpiatek / angular-talk-slides

Intro toAngularJS

A bunch of inaccurate facts

  • Started as proprietary framework for building web apps, meant to be sold to enterprises
  • Main author, Miško Hevery was part of Google but the project was intended as start-up
  • Open sourced after a year or so of development
  • Picked up by some Google teams, most notably doubleclick
  • Received some official Google support

What is AngularJs?

AngularJS is a toolset for building the framework most suited to your application development.

Main tools

  • Two-way data-binding
  • MVC components
  • DOM based templates
  • Dependency Injection
  • Directives, Services and Filters
  • Testing tooling (mocks, Karma)

Bootstrapping

<div ng-app></div>

But also, manually with angular.bootstrap(...)

The Model

{}, a POJO.

  • no get
  • no set
  • nada, just data binding.
<input type="text" ng-model="name"> {{ name }} How does data-binding in angular work
ng-init ng-click ng-mouseenter ng-hide

Controller

function MainCtrl($scope) {
  $scope.name = "Crocodile Dundee";
}
ng-controller="MainCtrl"
$scope.items = ['apples', 'oranges', 'bananas']
<ul ng-repeat="item in items">
  <li>{{ item }}</li>
</ul>
Controller
$scope
View

Typical structure

var myApp = angular.module('myApp',[]) 
myApp.controller('MainCtrl',
  function ($scope, $log) { ... })

myApp.service('users',
  function ($http, $location) { ... })

myApp.directive('tabs',
  function ($filter) { ... })

Services

Angular services are singletons that carry out specific tasks common to web apps, such as the $http service that provides low level access to the browser's XMLHttpRequest object.

Many ways to create:

return an instance ->
myApp.service('tabs', function () ...)

return an object ->
myApp.factory('tabs', function () ...)

configure when module is load ->
myApp.provider('tabsProvider', function () ...)

Several modules

var modal = angular.module('modal', []);
modal.controller('MainCtrl',
  function () { ... });

var monolithicSPA = angular.module('SPA2012', ['redisclient', 'modal', 'phase4buttons']);

Minifaction

...is a pain, due to DI.

// inferred (only works in unminified code)
$injector.invoke(function(serviceA){});

// annotated
function explicit(databaseService) {};
explicit.$inject = ['databaseService'];
$injector.invoke(explicit);

// inline (used in ngSchedule)
$injector.invoke(['databaseService', function(databaseService){}]);

Resources