Skip to content

Instantly share code, notes, and snippets.

@andresaraujo
Last active August 29, 2015 14:24
Show Gist options
  • Save andresaraujo/62d95500499da14174df to your computer and use it in GitHub Desktop.
Save andresaraujo/62d95500499da14174df to your computer and use it in GitHub Desktop.
Angular 1 with component directives
angular
.module('myApp', [])
.constant('profileId', 1)
.service('profileService', ProfileService)
.directive('profile', ProfileComponent);
function ProfileService() {
this.mockData = {
1 : {'name': 'Daenerys Targaryen', 'quote': 'I am Daenerys Stormborn and I will take what is mine with fire and blood.'},
2 : {'name': 'Jon Snow', 'quote': 'Don’t call me Lord Snow.'},
3 : {'name': 'Hodor', 'quote': 'hodor'}
};
}
ProfileService.prototype.get = function(id) {
return this.mockData[id];
}
function ProfileComponent() {
return {
controllerAs: "profile",
controller: ['profileId', 'profileService', function(profileId, profileService){
this.data = profileService.get(profileId);
}],
// inline template only for brevity, should be templateUrl: 'profile.html'
template: '{{ profile.data.name }} - "{{ profile.data.quote }}"',
scope: {}
};
}
<body ng-app="myApp">
<profile></profile>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment