By Nicolas CHALET - Extia - Juillet 2016
{
"nom" : 'Nicolas',
"prenom" : 'CHALET',
"company" : 'Extia',
"currentClient" : 'PMU',
"profession" : 'Full-Stack software engineer',
"centerOfInterests" : [
'Web developpement',
'Java/Javascript ♥♥♥',
'Science',
'Music player',
'Video games'
]
}
// app.module.js
angular.module('moduleName', [ // <== Setter, déclaration du module
'otherModule' // <== Et de ses dépendances
]);
// app.filter.js
angular.module('moduleName') // <== Getter, récupération de l'instance'
.filter('moduleFilter', function ModuleFilter() {
// code
})
// app.controller.js
angular.module('moduleName')
.controller('ModuleController', function ModuleController() {
// code
});
{{'Hello, ' + moduleCtrl.firstname}}
// app.controller.js
angular.module('moduleName')
.controller('ModuleController', function ModuleController() {
this.firstname = 'Nico';
this.action = () => {
console.log(this.firstname);
};
});
{{moduleCtrl.name | uppercase}}
Formation Angular: {{moduleCtrl.eventDate | date: 'dd/MM/YYYY'}}
// app.controller.js
angular.module('moduleName')
.controller('ModuleController', function ModuleController() {
this.eventDate = '2016-07-11T10:30:00Z';
});
Résultat
Formation Angular: 11/07/2016
angular.module('moduleName')
.filter('myUppercase', function() {
return function (item) {
return item.toUpperCase();
}
})
.controller('ModuleController', function ModuleController() {
this.username = 'Todd Motto';
});
User Name: {{moduleCtrl.username | myUppercase}}
Résultat
User Name: TODD MOTTO
angular.module('moduleName')
.service('greetingsService', function() {
this.sayHello = function(name) {
console.log('Hello, ' + name);
};
})
.factory('greetingsFactory', function() {
return function(name) {
var greetName = name || 'Default';
return {
sayHello = function(aName) {
console.log('Hello, ' + aName || greetName);
}
};
};
})
.provider('greetings', function() {
this.$get = function() {
return function() {
this.sayHello = function(name) {
console.log('Hello, ' + name);
};
};
};
});
Controller :
this.items = ['John', 'Peter', 'Bruce'];
View :
- {{item}}
Résultat :
angular.module('moduleName')
.directive('directiveName', function() {
return {
restrict : 'A/E/C', // Attribute, element, className
template : '... html code ...', // Row html
templateUrl : 'some/path/to.html', // Path to a template file
scope : {}, // Attributes to use in the directive
link : function(scope, attr, ele) {}, // bindings
controller : function() {}, // External API
controllerAs : 'ctrl'
};
});
angular.module('moduleName')
.component('MyComponent', {
template : '... html code ...', // Row html
templateUrl : 'some/path/to.html', // Path to a template file
bindings : {}, // Attributes to use in the component
controller : function () {}, // bindings
controllerAs : 'ctrl'
});
gulp serve