The next step to preparing yourself for Angular 2.0 is to move from the Controller model to Component model. If you’ve had any experience with directives, you’ll see the format of what we’d use for a controller in TypeScript is similar.
(I stripped out our main code, leaving what we use as a framework.)
module Application.Controllers.Contact {
class contactList {
static $inject = ['$location', '$window', '$cookies', '$log', '$http', 'contactFact'];
constructor(
private $location: ng.ILocationService,
private $window: ng.IWindowService,
private $cookies: Types.ICookiesService,
private $log: ng.ILogService,
private $http: ng.IHttpService,
private contactFact: Application.Services.Contact.contactFact
) {
}
}
app.component("contacts", {
templateUrl: "partials/contact-list.html",
bindings: { /* values we want to access from outside the component */},
controller: contactList,
controllerAs: "vm"
});
}
So, we’ve taken the template and controller function away from the ngRoute and put it in the components. We’ve also added “bindings”, which are just like directives, where you can add one-way or two-way variables. In this case, variables that you name as “public” in the controller function will be used.
The route is changed a bit. There are several ways to change it, but I’ve just settled on an extremely easy method for now:
basically, I just ditch everything and change the template to what would be a directive!
app.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
// console.log($routeProvider);
$routeProvider
.when('/', {
template: "
There is a LOT more detailed information here: https://app.pluralsight.com/library/courses/building-components-angular-1-5/table-of-contents
