Angula JS

Seite 1

A module contains the different components of an AngularJS app

A controller manages the app's data

An expression displays values on the page

A filter formats the value of an expression

Seite 2

//Create a module

var app = angular.module("myApp", []);

//Create a controller

app.controller('MainController', ['$scope', function($scope) { $scope.title = 'This Month\'s Bestsellers';

$scope.promo = 'The most popular books this month.';

$scope.product = {

name: 'The Book of Trees',

price: 19,

pubdate: new Date('2014', '03', '08')

};

}]);

//Use expression and filters

{{ product.price | currency }}

Seite 3

Directives

//Create a directive (appInfo.js)

app.directive('appInfo', function() {

return {

restrict: 'E',

scope: {

info: '='

},

templateUrl: 'js/directives/appInfo.html'

};

});

//Create a controller (MainController.js)

app.controller('MainController', ['$scope', function($scope) {

$scope.apps = [

{

icon: 'img/move.jpg',

title: 'MOVE',

developer: 'MOVE, Inc.',

price: 0.99

},

{

icon: 'img/shutterbugg.jpg',

title: 'Shutterbugg',

developer: 'Chico Dusty',

price: 2.99

}

];

}]);

//createa HTML file (appinfo.html)

<img class="icon" ng-src="{{ info.icon }}"> <h2 class="title">{{ info.title }}</h2>

<p class="developer">{{ info.developer }}</p>

<p class="price">{{ info.price | currency }}</p>

//Create a table using a directive

<div class="main" ng-controller="MainController">

<div class="container">

<div class="card" ng-repeat="app in apps">

<app-info info="app"></app-info>

</div>

</div>

</div>

Seite 4

Services

//Create a services (forecast.js)app.factory('forecast', ['$http', function($http) {

return $http.get('http://s3.amazonaws.com/codecademy-content/courses/ltp4/forecast-api/forecast.json')

.success(function(data) {

return data;

})

.error(function(err) {

return err;

});

}]);

/Create a controller (MainController.js)

app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) { forecast.success(function(data) {

$scope.fiveDay = data;

});

}]);