ANGULAR JSCOLDFUSION USER GROUP MEETING

Presentation by / Alwyn Wymeersch @alwynW

WHO'S THIS GUY?ALWYN WYMEERSCH

Freelance webdeveloper & instructorFlames Productions

HOW DID I GET TO ANGULAR?

BACKBONE JSmore OOP approach

LET'S TRY SOMETHING NEW!

HEY... IT'S GOOGLE WHAT DID YOU EXPECT?

THE BASICS

MODEL DRIVEN

Extend html with ng-tags

ng-appng-modelng-repeat...

Bind content with {{}}

DEFINE APP angular.module('name', [dependencies]);

* dependencies: other modules, libraries, everything that’s not‘core’ (animation, routing, ext libs)

var myApp = angular.module('myApp', ['ngRoute','ngAnimate']);

DEFINE CONTROLLER module.controller('name', function(depencies){});

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, $location){// Code goes here });

or...

module.controller('name', [dependencies, function(injected dependencies){});

var app = angular.module('myApp', []);app.controller('myCtrl', ['$scope', '$location', function($scope, $location){}]);

code obfuscation

ROUTINGMULTI-VIEW APPS

Navigation through location change

1. Change url (#)2. app maps view with ctrl3. wait for optional dependencies4. view loaded in ng-view container5. optional animation(s)

Configured in app config via $routeprovider

ROUTEPROVIDER

var myApp = angular.module('myApp',['ngRoute']);myApp.config(['$routeProvider', function ($routeProvider){ $routeProvider.when("home", { url: "/", controller: "HomeController", templateUrl: "app/views/HomeView.html" }) .when("register", { controller: "RegisterController", templateUrl: "app/views/RegisterView.html" }) .otherwise('/');});

NESTED VIEWS?Use ui-router

SHARE DATA BETWEEN CONTROLLERSService or Factory

InjectableSingle instance

SERVICE

module.service('name', [dependencies, function(injected dependencies){ // Instance variables and functions });

var app = angular.module('myApp', []);app.service('RegistrationModel', [ function(){

this.registrations = [];

this.getRegistrations = function(){ // go fetch }

}]);

FACTORY

module.factory('name', [dependencies, function(injected dependencies){ // Return object with variables and functions });

var app = angular.module('myApp', []);app.factory('RegistrationModel', [ function(){ var model = {}; model.registrations = [];

model.getRegistrations = function(){ // go fetch } return model;}]);

INJECT SERVICES / FACTORY

var app = angular.module('myApp', []);app.controller('myCtrl', function($scope, RegistrationModel){ $scope.registrations = RegistrationModel.registrations });

GETTING EXTERNAL DATAAny source that outputs json format$http servicepromises

QUESTIONS?ALWYN@FLAMESPRODUCTIONS.COM