juanpablocs/angular.es6.md

## angular.es6.md

      
    Raw
  

              angular.es6.md
            
          
    usar alguna herramienta para tratar modulos ejemplo : (webpack, browserify)
ejemplo básico
js:
// import angular
import angular from 'angular';
// init angular
angular.module('myApp',[]);
// set controller
angular.controller('HomeController', ()=> {
  this.hello = 'hello';
});
html:
<body ng-app="myApp">
 <div id="home" ng-controller="HomeController as home">
  <p> say: {{ home.hello }}</p>
 </div>
</body>
ejemplo usando imports y class
App.js:
import angular from 'angular';
import HomeController from './HomeController'; //no es obligatorio .js

angular.module('myApp',[]);
angular.controller('HomeController', HomeController);
HomeController.js:
class HomeController{
  constructor(){
    this.hello = 'Hello Wold';
  }
}
export default HomeController;
html:
<body ng-app="myApp">
 <div id="home" ng-controller="HomeController as home">
  <p> say: {{ home.hello }}</p>
 </div>
</body>
ejemplo usando ngNewRouter
App.js:
import angular from 'angular';
import router from 'angular-new-router';

import './components/home/home'; //no es obligatorio .js

angular
  .module('myApp',[
    'ngNewRouter',
    'myApp.home'
  ])
  .controller('AppController', ['$router', ($router)=>{
    // set routing
    $router.config([
      { path: '/', redirectTo: '/home' },
      { path: '/home', component: 'home' }
    ]);
  
  }]);
components/home/home.js
import angular from 'angular';
import HomeController from './HomeController';

(function(){
	'use strict';
	angular.module('myApp.home',[])
		.controller('HomeController', HomeController)
})();
component/home/HomeController.js:
class HomeController {
  constructor(){
    this.hello = 'Hello World';
  }
}
export default HomeController;
component/home/home.html
<p> {{home.hello}} </p>
index.html
<body ng-app="myApp" ng-controller="AppController">
  <h1>Welcome to future</h1>
  <div ng-viewport class="container-fluid"></div>
</body>