// myapp.interface.js
export default angular.module('myApp', []);
export function helloWorld() {
return 'Hello, World!';
}
// myapp.component.js
export default function MyAppController() {
this.message = 'Welcome to My App!';
}
export default {
controller: MyAppController,
template: `
<h1>{{ $ctrl.message }}</h1>
<p>{{ hello() }}</p>
`,
bindings: {
hello: '&'
}
};
// main.js
import angular from 'angular';
import myAppModule, { helloWorld } from './myapp.interface';
import myAppComponent from './myapp.component';
angular.module(myAppModule.name, [])
.component('myApp', myAppComponent);
export { helloWorld };
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="path/to/angular.min.js"></script>
<script src="path/to/main.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
</head>
<body>
<my-app hello="helloWorld()"></my-app>
</body>
</html>
