AngularJS - Quiz - Jan 2016

var myApp = angular.createModule("myApp") .inject("myApp.c", "myApp.s","myApp.f" ,"myApp.d");

var myApp = angular.module("myApp") .inject("myApp.c", "myApp.s","myApp.f" ,"myApp.d");

var myApp = angular.module("myApp", ["myApp.c", "myApp.s","myApp.f" ,"myApp.d"]);

var myApp = angular.module("myApp", "myApp.c", "myApp.s","myApp.f" ,"myApp.d");

Value, Factory, Service, Provider, Constant

Singleton, Factory, Service, Provider, Literal

Singleton, Module, Service, Provider, Constant

Value, Builder, Prototype, Provider, Constant

ngView

ngModule

ngRoute

ngApp

controller

directive

filter

service

angular.refresh();

scope.refresh();

controller.apply();

scope.apply();

Bootstrap: Loads angular application module, with all its dependent modules along with ngCore modules Execute: Executes HTML view created after compilation

Compile: Compiles HTML template to create AngularJS view with binding Execute: Executes AngularJS view listening to DOM events for triggers

Compile: Identifies / matches directives in HTML DOM Sort: Sorts directives based on priority and a combined link function is created Link: Links specific instance of scope to template, registers listeners on DOM elements, sets up required $watch with the scope

Bootstrap: Loads angular application module, with all its dependent modules along with ngCore modules Link: Links specific instance of scope to template, registers listeners on DOM elements, sets up required $watch with the scope

var myController = appModule.controller(“myController”, [“svc”, “$scope”, “$http”, “myValue”, “myConstant”, function(svc, $scope, $http, myValue, myConstant) { //TODO define controller’s constructor body here }]);

var MyController = function(svc, $scope, $http, myValue, myConstant) { //TODO define controller’s constructor body here }; MyController.$inject([“svc”, “$scope”, “$http”, “myValue”, “myConstant”]); appModule.controller(“myController”,MyController);

var myController = appModule.controller(“myController”, function(svc, $scope, $http, myValue, myConstant) { //TODO define controller’s constructor body here };

var myController = appModule.controller(“myController”, function() { var svc = appModule.lookup(“svc”); var $scope = appModule.lookup(“$scope”); var $http = appModule.lookup(“$http”); var myValue = appModule.lookup(“myValue”); var myConstant = appModule.lookup(“myConstant”); //TODO define controller’s constructor body here };

AngularJS creates a $rootScope when it encounters ngApp directive in the loaded HTML template.

AngularJS scopes are hierarchical where in child scope inherit from its parent scope through prototype chain

All AngularJS scopes including “isolated” scope inherits prototypically from its parent scope

Scope provides $apply to watch model change and $watch to propagate model changes from outside “Angular realm”

Only elements

Only attributes

Only CSS styles

Only Comments

All of the above

//no need to download angular-route separately as it is part of ngCore <script> var appModule = angular.module("myapp",['ngRoute']); appModule.map($route, “myURL1”, “partials/myPartial1.html”, partial1Controller); //TODO map remaining URLs </script>

<script src="bower_components/angular-route/angular-route.js"></script> <script> var appModule = angular.module("myapp",['ngRoute']); appModule.config(['$routeProvider', function($routeProvider) { //TODO configure route with URL mapping }]); </script>

<script src="bower_components/angular-route/angular-route.js"></script> <script> var appModule = angular.module("myapp",['ngRoute']); $route.$inject(['$routeProvider', function($routeProvider) { //TODO configure route with URL mapping }]); </script>

<script src="bower_components/angular-route/angular-route.js"></script> <script> var appModule = angular.module("myapp",['ngRoute']); $route.$inject(['urlMappings', {“url1” : {“partial1.html” : “url1template.html”, “controller”: url1Controller}, “url2” : {“partial2.html” : “url2template.html”, “controller”: url2Controller} } ]); </script>

Sorting a list of javascript objects based on a property in the object

Displaying a text in the selected language

Convert <div> element to <span> element

Filter DOM elements based on CSS selector

Reusable component that needs to be configured before it can be injected into other angular JS components

Component to manipulate your URL

Component to interact with HTTP server

All of the above

$ajax

$resource

$jsonp

$http

Karma records user interactions on the browser and can be replayed

Karma is a command-line javascript test runner in which any of the testing framework can be plugged in to execute test cases

Karma is a testing framework that provides APIs to test Angular JS components

Karma is a browser plugin to debug and test AngularJS application

var scope; beforeEach(function(){ module('appModule'); inject(function($controller, $rootScope){ scope = $rootScope.$new(); $controller('MyController',{$scope:scope}); }); //TODO set state in scope });

var scope; beforeEach(function(){ module('appModule'); var myController = angular.controller(“MyController”, [“scope”, function($scope){ //TODO set state in scope }]); });

var scope; beforeEach(function(){ module('appModule'); angular.controller(‘MyController’). inject(function($rootScope){ scope = $rootScope.$new(); //TODO set state in scope }); });

var scope; beforeEach(function(){ module('appModule'); var myController = angular.controller(“MyController”); myController.$inject([“scope”]); });