angularPractice

angularPractice

by Paco86

HTML

<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<div ng-app="articalApp">
  <artical></artical>
</div>

JavaScript

angular.module('articalApp',[])
.component('artical', {
  	controller: function(ArticalData){
    	this.header = 'Hello World!';
    	this.content = 'This is content!';
      this.author = ArticalData.author;
      this.capitalize = function(){
      	this.content = this.content.toUpperCase();
      };
      this.title = ArticalData.getTitle();
    },
    template: `
			<h1>{{$ctrl.header}}</h1>
      <p>Author is {{$ctrl.author}}.</p>
      <p>{{$ctrl.title}}</p>
			<content my-content='$ctrl.content' my-capitalize='$ctrl.capitalize()'><content/>`
})
.component('content', {
    controller: function(){},
    controllerAs: 'ContentCtrl',
    bindings: {
    	myContent: '=',
      myCapitalize: '&'
    },
  	template: `<p ng-click='ContentCtrl.myCapitalize()'>{{ContentCtrl.myContent}}</p>`
})
.service('ArticalData', function(){
	this.author = 'Paco';
  this.getTitle = function(){
  	return 'This is title.';
  }
})