Angular.js Fundamentals

1.
@markbates

2.
@markbates

5.
FLUENT2014 www.metacasts.tv

6.
www.angularmasterclass.com

7.
Angular Fundamentals

8.
Enough Angular to beDangerous!

9.
What Will Cover?

10.
What Will Cover?* *hopefully

11.
• Controllers! • ngRoute! •Templates! • ngResource! • Directives! • Filters! • Scope! • Testing! • Code Organization! • Best Practices

12.
Part 1 • Features/Why Angular?! •Getting Started/Setting Up! • Directives, Filters, and Data Binding! • Controllers, Templates, and Scope! • Modules! • Routing! • Custom Directives and Event Handling! • Testing

13.
Part 2 We Code!

14.
Part 1

15.
Features

16.
Features • Plain JavaScript •Data Binding • Routing/PushState • Testing • Templates/Directives/ Controllers • Modular • Dependency Injection • jqLite • Lightweight

17.
Why Angular?

18.
Philosophies

19.
Backbone.js “minimal set ofdata-structure and view primitives for building web application with JavaScript”

20.
Ember “framework for creatingambitious web applications”

21.
AngularJS “Toolset for buildingthe framework most suited to your application development”

24.
Weight

25.
“production” versions (miniﬁed) w/required dependencies

26.
AngularJS Ember Backbone.js base109kb 264kb 6.5kb templating language built-in 90kb (handlebars) ?? data adapter built-in 75kb (ember-data) 84kb (jQuery) support N/A 84kb (jQuery) 17kb (json2.js) 5.0kb (underscore.js ) 109kb 513kb 112.5kb

27.
Mindshare

28.
Google

29.
AngularJS Backbone.js Ember Watchers2,155 1,442 824 Stars 21,408 17,291 9,570 Forks 6,670 3,783 2,044 Github

30.
“Basic” Models

31.
Backbone.jsclass App.Beer extends Backbone.Model class App.Beers extends Backbone.Collection ! model: Beer

32.
EmberApp.Beer = DS.Model.extend title: DS.attr("string") abv: DS.attr("number") country_id: DS.attr("number") brewery_id: DS.attr("number") brewery: DS.belongsTo("App.Brewery") country: DS.belongsTo("App.Country")

33.
AngularJS App.Beer = {}

34.
“Remote” Models

35.
Backbone.jsclass App.Beer extends Backbone.Model urlRoot: "/api/v1/beers" class App.Beers extends Backbone.Collection url: -‐> if @brewery_id? return "/api/v1/breweries/ #{@brewery_id}/beers" else return "/api/v1/beers" model: Beer

36.
EmberApp.Beer = DS.Model.extend title: DS.attr("string") abv: DS.attr("number") country_id: DS.attr("number") brewery_id: DS.attr("number") brewery: DS.belongsTo("App.Brewery") country: DS.belongsTo("App.Country")

37.
Ember DS.RESTAdapter.reopen namespace: 'api/v1' App.Store = DS.Store.extend revision: 14 adapter: DS.RESTAdapter.create()

38.
AngularJS App.factory "Beer", ($resource) -‐> return $resource "/api/v1/ beers/:id", {id: "@id"}, {update: {method: "PUT"}}

39.
Routers

40.
Backbone.js@Router = Backbone.Router.extend initialize: -‐> @countries = new Countries() routes: "breweries/:brewery_id": "brewery" "breweries/:brewery_id/edit": "breweryEdit" brewery: (brewery_id) -‐> @changeView(new BreweryView(collection: @countries, model: new Brewery(id: brewery_id))) breweryEdit: (brewery_id) -‐> @changeView(new BreweryEditView(collection: @countries, model: new Brewery(id: brewery_id))) changeView: (view) => @currentView?.remove() @currentView = view $("#outlet").html(@currentView.el)

41.
Ember App.Router.map -‐> @resource "brewery", {path: "brewery/:brewery_id"}

42.
EmberApp.BreweryRoute = Ember.Route.extend model: (params)-‐> App.Brewery.find(params.brewery_i d)

43.
AngularJSApp.config ($routeProvider) -‐> $routeProvider .when("/breweries/:id", { templateUrl: "/assets/ brewery.html", controller: "BreweryController" }) .when("/breweries/:id/edit", { templateUrl: "/assets/ edit_brewery.html", controller: "EditBreweryController" })

44.
Controllers/Views

45.
Backbone.jsclass @BreweryEditView extends Backbone.View template: "brewery_edit" events: "click #save-‐button": "saveClicked" "keypress #brewery-‐title": "titleEdited" initialize: -‐> super @countriesView = new CountriesView(collection: @collection) @$el.html(@countriesView.el) @model.on "change", @render @model.fetch() render: => @$("#country-‐ outlet").html(@renderTemplate()) return @ saveClicked: (e) => e?.preventDefault() attrs = title: @$("#brewery-‐title").val() synonyms: @$("#brewery-‐synonyms").val() address: @$("#brewery-‐address").val() @model.save attrs, success: (model, response, options) => App.navigate("/breweries/#{@model.id}", trigger: true) error: (model, xhr, options) -‐> errors = [] for key, value of xhr.responseJSON.errors errors.push "#{key}: #{value.join(", ")}" alert errors.join("n") titleEdited: (e) => title = @$("#brewery-‐title").val() @$("h2").text(title) ! # further code omitted

46.
Ember App.BreweryController = Ember.ObjectController.extend save: -‐> @store.commit() # further code omitted

47.
AngularJS@EditBreweryController = ($scope, $routeParams, $location, Brewery) -‐> $scope.brewery = Brewery.get(id: $routeParams.id) $scope.save = -‐> success = -‐> $location.path("/breweries/#{$routeParams.id}") $scope.errors = null failure = (object)-‐> $scope.errors = object.data.errors $scope.brewery.$update {}, success, failure

48.
Templates

49.
Backbone.js <h2><%= @model.displayName() %></h2> <form> <div class="control-‐group"> <label class="control-‐label" for="title">Title</label> <div class="controls"> <input type='text' class='input-‐xxlarge' value='<%= @model.get("title") %>'id='brewery-‐title'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="synonyms">Synonyms</label> <div class="controls"> <input type='text' class='input-‐xxlarge' value='<%= @model.get("synonyms") %>'id='brewery-‐synonyms'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="address">Address</label> <div class="controls"> <textarea class='input-‐xxlarge' id='brewery-‐address'><%= @model.get("address") %></textarea> </div> </div> <button class='btn btn-‐primary' id='save-‐button'>Save</button> <a href="/breweries/<%= @model.id %>" class='btn'>Cancel</a> </form>

50.
Backbone.js <h2><%= @model.displayName() %></h2> <form> <div class="control-‐group"> <label class="control-‐label" for="title">Title</label> <div class="controls"> <input type='text' class='input-‐xxlarge' value='<%= @model.get("title") %>'id='brewery-‐ title'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="synonyms">Synonyms</label> <div class="controls"> <input type='text' class='input-‐xxlarge' value='<%= @model.get("synonyms") %>'id='brewery-‐synonyms'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="address">Address</label> <div class="controls"> <textarea class='input-‐xxlarge' id='brewery-‐address'><%= @model.get("address") %></textarea> </div> </div> <button class='btn btn-‐primary' id='save-‐button'>Save</button> <a href="/breweries/<%= @model.id %>" class='btn'>Cancel</a> </form>

51.
Backbone.js<h2><%= @model.displayName() %></h2> <form> <div class="control-‐group"> <label class="control-‐label" for="title">Title</label> <div class="controls"> <input type='text' class='input-‐xxlarge' value='<%= @model.get("title") %>'id='brewery-‐title'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="synonyms">Synonyms</label> <div class="controls"> <input type='text' class='input-‐xxlarge' value='<%= @model.get("synonyms") %>'id='brewery-‐synonyms'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="address">Address</label> <div class="controls"> <textarea class='input-‐xxlarge' id='brewery-‐address'>< %= @model.get("address") %></textarea> </div> </div> <button class='btn btn-‐primary' id='save-‐button'>Save</button> <a href="/breweries/<%= @model.id %>" class='btn'>Cancel</a> </form>

52.
<div class='span12'> <h2>{{displayName}}</h2> <h3> {{cityState}} {{#linkTo "country" country}} {{country.title}} {{/linkTo}} </h3> {{#if isEditing}} <form> <div class="control-‐group"> <label class="control-‐label" for="title">Title</label> <div class="controls"> {{view Ember.TextField valueBinding="title" class='input-‐xxlarge'}} </div> </div> <div class="control-‐group"> <label class="control-‐label" for="synonyms">Synonyms</label> <div class="controls"> {{view Ember.TextField valueBinding="synonyms" class='input-‐xxlarge'}} </div> </div> <div class="control-‐group"> <label class="control-‐label" for="synonyms">Synonyms</label> <div class="controls"> {{view Ember.TextArea valueBinding="address" class='input-‐xxlarge'}} </div> </div> <button class='btn btn-‐primary' {{action "save"}}>Save</button> </form> {{ else }} {{ partial "brewery/show" }} {{/if}} </div> Ember

53.

54.

55.
<form> <h3>{{brewery.title}}</h3> <div ng-‐include='"/assets/_errors.html"'></div> <div class="control-‐group"> <label class="control-‐label" for="title">Title</label> <div class="controls"> <input type='text' class='input-‐xxlarge' ng-‐ model='brewery.title'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="synonyms">Synonyms</label> <div class="controls"> <input type='text' class='input-‐xxlarge' ng-‐ model='brewery.synonyms'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="address">Address</label> <div class="controls"> <textarea class='input-‐xxlarge' ng-‐model='brewery.address'></ textarea> </div> </div> <button class='btn btn-‐primary' ng-‐click='save()'>Save</button> </form> AngularJS

56.
AngularJS<form> <h3>{{brewery.title}}</h3> <div ng-‐include='"/assets/_errors.html"'></div> <div class="control-‐group"> <label class="control-‐label" for="title">Title</label> <div class="controls"> <input type='text' class='input-‐xxlarge' ng-‐ model='brewery.title'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="synonyms">Synonyms</label> <div class="controls"> <input type='text' class='input-‐xxlarge' ng-‐model='brewery.synonyms'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="address">Address</label> <div class="controls"> <textarea class='input-‐xxlarge' ng-‐model='brewery.address'></textarea> </div> </div> <button class='btn btn-‐primary' ng-‐click='save()'>Save</button> </form>

57.
<form> <h3>{{brewery.title}}</h3> <div ng-‐include='"/assets/_errors.html"'></div> <div class="control-‐group"> <label class="control-‐label" for="title">Title</label> <div class="controls"> <input type='text' class='input-‐xxlarge' ng-‐model='brewery.title'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="synonyms">Synonyms</label> <div class="controls"> <input type='text' class='input-‐xxlarge' ng-‐model='brewery.synonyms'> </div> </div> <div class="control-‐group"> <label class="control-‐label" for="address">Address</label> <div class="controls"> <textarea class='input-‐xxlarge' ng-‐model='brewery.address'></textarea> </div> </div> <button class='btn btn-‐primary' ng-‐ click='save()'>Save</button> </form> AngularJS

58.
Pros/Cons

59.
Backbone.js • Too simple •Not opinionated enough • “Memory” management • Unstructured • Spaghetti code • Lightweight • Not opinionated • Simple • Easy to read source • “widget” development Pros Cons

60.
Ember • Too complex •Overly opinionated • Heavyweight • ember-data - not production ready (very buggy) • Little to no mind-share outside of Rails • Difﬁcult to read source code • Structured • Highly opinionated • “less” code • “large” apps Pros Cons

61.
AngularJS • Difﬁcult toread source code • jQuery plugins require custom directives • Large apps requiring self- imposed structure • Lightly structured • Lightly opinionated • “less” code • Plain JavaScript • Simple/Powerful • Easy to test • Lightweight • small, medium, or large apps Pros Cons

62.
Getting Started

69.
5 Minute Break

70.
Directives, Filters, and DataBinding

71.
Directives <body ng-app>! <ng-view></ng-view>! <ul>! <li ng-repeat='commentin comments'>! {{comment.body}}! </li>! </ul>! </body>

72.

73.

74.

75.

76.
Demo

77.
Filters <ul>! <li ng-repeat='c incomments | orderBy:"date"'>! {{c.author | uppercase}}! </li>! </ul>

78.

79.

80.
<ul>! <li ng-repeat='c incomments | orderBy:"date"'>! {{c.author | uppercase}}! </li>! </ul> Filters

81.
Demo

82.
Controllers, Templates, and Scope

83.
Controllers, Templates and Scope Template

84.
Controllers, Templates and Scope TemplateController

85.

86.

87.
Demo

88.
Modules

89.
Module angular.module('app', []);

90.
Module Conﬁg angular.module('app', []);

91.
Module Conﬁg Controller angular.module('app', []);

92.
Module Conﬁg Controller Factories angular.module('app',[]);

93.
Module Conﬁg Controller FactoriesDirectives angular.module('app', []);

94.
Module Conﬁg Controller FactoriesDirectives Filters angular.module('app', []);

95.
Module Conﬁg Controller FactoriesDirectives Filters Routes angular.module('app', []);

96.
Demo

97.
Routing

98.
App.config(function($routeProvider, $locationProvider) {! $locationProvider.html5Mode(true);! ! $routeProvider.when('/posts',{! controller: 'PostsIndexController',! templateUrl: 'posts/index.html'! })! .when('/posts/:id',{! controller: 'PostsShowController',! templateUrl: 'posts/show.html'! })! .otherwise({! redirectTo: '/posts'! });! }); Routing

99.

100.

101.

102.

103.

104.

105.

106.

107.

108.

109.
Demo

110.
Custom Directives and EventHandling

111.
App.directive("upCaser", function() {! return{! link: function(scope, el, attrs) {! $(el).find('p').each(function(i, p) {! p = $(p);! p.text(p.text().toUpperCase());! });! }! };! }); Directives

112.
DirectivesApp.directive("upCaser", function() {! return{! link: function(scope, el, attrs) {! $(el).find('p').each(function(i, p) {! p = $(p);! p.text(p.text().toUpperCase());! });! }! };! });

113.

114.

115.

116.

117.

118.

119.
<div up-caser>! <p>some text</p>! <p>someother text</p>! </div> Directives

120.
Directives <up-caser>! <p>some text</p>! <p>some othertext</p>! </up-caser>

121.
App.directive("upCaser", function() {! return{! restrict: 'E',! link: function(scope, el, attrs) {! $(el).find('p').each(function(i, p) {! p = $(p);! p.text(p.text().toUpperCase());! });! }! };! }); Directives

122.
Directives <up-caser>! <p>some text</p>! <p>some othertext</p>! </up-caser>

123.
App.directive("upCaser", function() {! return{! restrict: 'AEC',! link: function(scope, el, attrs) {! $(el).find('p').each(function(i, p) {! p = $(p);! p.text(p.text().toUpperCase());! });! }! };! }); Directives

124.
Demo

125.
Events

126.
Scope

127.
Events $broadcast $emit

128.
App.directive("alerter", function() {! return{! restrict: 'E',! link: function(scope, el, attrs) {! setTimeout(function() {! scope.$emit("up", "Hello Up!");! scope.$broadcast("down", "Hello Down!");! scope.$apply();! }, 3000);! }! };! }); Events

129.

130.

131.

132.

133.

134.
App.controller('SomeController', function($scope) {! $scope.$on("up",function(data, message) {! $scope.up_message = message;! });! }); Events

135.

136.

137.

138.

139.

140.
Demo

141.
App.controller('Main', function($scope) {! $scope.clicker= function() {! $scope.pressed = true;! };! }); Events

142.
App.directive("alerter", function() {! return{! restrict: 'E',! link: function(scope, el, attrs) {! scope.$watch('pressed', function() {! if (scope.pressed) {! $(el).text('Oi!');! }! });! }! };! }); Events

143.
App.directive("alerter", function() {! return{! restrict: 'E',! link: function(scope, el, attrs) {! scope.$watch('pressed', function() {! if (scope.pressed) {! $(el).text('Oi!');! }! });! }! };! }); Events

144.
Demo

145.
Testing

147.
App.controller('FooController', function($scope) {! ! $scope.setFoo= function(val) {! $scope.foo = val;! };! ! }); Testing

148.
describe('FooController', function() {! ! beforeEach(function(){module('app')});! ! beforeEach(inject(function($rootScope, $controller) {! this.scope = $rootScope.$new();! $controller('FooController', {$scope: this.scope})! }));! ! describe('setFoo()', function() {! ! it('sets the foo value', function() {! expect(this.scope.foo).not.toBeDefined();! this.scope.setFoo('Bar');! expect(this.scope.foo).toEqual('Bar');! });! });! }); Testing

149.

150.

151.

152.

153.

154.

155.

156.

157.

158.

159.
Demo

160.
Part 2

161.
Setup!

162.
Base Project! github.com/markbates/ ﬂuent-2014

163.
Node.js! http://nodejs.org

164.
Lineman.js! npm install -g lineman@0.27.2

165.
Install Modules! npm install

166.
Code Time!!

167.
Thanks! @markbates www.angularmasterclass.com

Angular.js Fundamentals

More Related Content

What's hot

Viewers also liked

Similar to Angular.js Fundamentals

More from Mark

Recently uploaded

Angular.js Fundamentals