Download as PDF, PPTX
![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']);](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/85/CFUGbe-talk-about-Angular-JS-11-320.jpg)
![DEFINE CONTROLLER
module.controller('name', function(depencies){});
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location){
// Code goes here
});](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/85/CFUGbe-talk-about-Angular-JS-12-320.jpg)
![or...
module.controller('name', [dependencies,
function(injected dependencies){
});
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$location', function($scope, $location){
}]);
code obfuscation](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/85/CFUGbe-talk-about-Angular-JS-13-320.jpg)
![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('/');
});](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/85/CFUGbe-talk-about-Angular-JS-16-320.jpg)
![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
}
}]);](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/85/CFUGbe-talk-about-Angular-JS-19-320.jpg)
![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;
}]);](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/85/CFUGbe-talk-about-Angular-JS-20-320.jpg)
![INJECT SERVICES / FACTORY
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, RegistrationModel){
$scope.registrations = RegistrationModel.registrations
});](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/85/CFUGbe-talk-about-Angular-JS-21-320.jpg)
![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']);](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/75/CFUGbe-talk-about-Angular-JS-11-2048.jpg)
![DEFINE CONTROLLER
module.controller('name', function(depencies){});
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $location){
// Code goes here
});](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/75/CFUGbe-talk-about-Angular-JS-12-2048.jpg)
![or...
module.controller('name', [dependencies,
function(injected dependencies){
});
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$location', function($scope, $location){
}]);
code obfuscation](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/75/CFUGbe-talk-about-Angular-JS-13-2048.jpg)
![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('/');
});](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/75/CFUGbe-talk-about-Angular-JS-16-2048.jpg)
![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
}
}]);](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/75/CFUGbe-talk-about-Angular-JS-19-2048.jpg)
![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;
}]);](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/75/CFUGbe-talk-about-Angular-JS-20-2048.jpg)
![INJECT SERVICES / FACTORY
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, RegistrationModel){
$scope.registrations = RegistrationModel.registrations
});](https://image.slidesharecdn.com/cfug-angularjs-140930054149-phpapp01/75/CFUGbe-talk-about-Angular-JS-21-2048.jpg)
Uploaded byAlwyn Wymeersch
CFUGbe talk about Angular JS
This document summarizes a presentation about AngularJS given to a ColdFusion user group. It introduces AngularJS basics like model-driven development using directives like ng-app and ng-model. It explains defining an Angular app and controllers. It covers routing with $routeProvider and using services/factories to share data between controllers. It also discusses getting external data with $http and promises.
More Related Content
Similar to CFUGbe talk about Angular JS
CFUGbe talk about Angular JS
- 1. ANGULAR JS COLDFUSIONUSER GROUP MEETING Presentation by Alwyn Wymeersch / @alwynW
- 2. WHO'S THIS GUY? ALWYN WYMEERSCH Freelance webdeveloper & instructor Flames Productions
- 3. HOW DID IGET TO ANGULAR?
- 4. BACKBONE JS moreOOP approach
- 5.
- 7. HEY... IT'S GOOGLEWHAT DID YOU EXPECT?
- 8.
- 9.
- 10. Extend html withng-tags ng-app ng-model ng-repeat ... Bind content with {{}}
- 11. 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']);
- 12. DEFINE CONTROLLER module.controller('name',function(depencies){}); var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $location){ // Code goes here });
- 13. or... module.controller('name', [dependencies, function(injected dependencies){ }); var app = angular.module('myApp', []); app.controller('myCtrl', ['$scope', '$location', function($scope, $location){ }]); code obfuscation
- 14.
- 15. Navigation through locationchange 1. Change url (#) 2. app maps view with ctrl 3. wait for optional dependencies 4. view loaded in ng-view container 5. optional animation(s) Configured in app config via $routeprovider
- 16. 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('/'); });
- 17. NESTED VIEWS? Useui-router
- 18. SHARE DATA BETWEENCONTROLLERS Service or Factory Injectable Single instance
- 19. 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 } }]);
- 20. 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; }]);
- 21. INJECT SERVICES /FACTORY var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, RegistrationModel){ $scope.registrations = RegistrationModel.registrations });
- 22. GETTING EXTERNAL DATA Any source that outputs json format $http service promises
- 23.