I am currently working up a simple couchapp that uses AngularJS and have decided to use TypeScript
I am basing it off of the AngularJS angular-phonecat tutorial. I have most of the application converted to idiomatic TypeScript. I have based this off of the pwalat / Piotr.Productlist bits1, however they only cover Controllers and Models.
I am struggling to figure out how to create the correct TypeScript equivalent for the angular router $routeProvider
//app/js/app.js[2]
angular.module('phonecat', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
I know it needs to be a module {} of some sort?
The angular-vs team has some stuff that is really worth looking at:
https://github.com/kriasoft/angular-vs/blob/master/App/Scripts/App.ts
...in this case, they do a sort of a cast on the initial string in the any array passed to config that avoid the trouble that Typescript seems to have figuring out which version of config to use (.config(<any>'$routeProvider'...).
Example:
angular
.module('phonecat', [])
.config([
<any>'$routeProvider',
($routeProvider: angular.RouteProvider) {
$routeProvider
.when('/phones', { templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl })
.when('/phones/:phoneId', { templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl })
.otherwise({ redirectTo: '/phones' });
}
]);
...I should mention, that I installed the AngularJS TypeScript declations source from here:
http://nuget.org/packages/Schmulik.AngularTS
..and then reference them at the top of my routing file:
/// <reference path="../AngularTS/angular.d.ts" />
/// <reference path="../AngularTS/ng/route.d.ts" />
You can also use ng.route.IRouteProvide
I found the answer here: http://morrisdev.com/2016/01/angular-controllers-with-typescript/
interface IRouteParams extends ng.route.IRouteParamsService {
userId: number;
}
I haven't looked up AngularJS to find out all the details, but hopefully this will help you with the process of declaring an existing library, which is more useful than just giving you an AngularJS definition.
I have created these definitions based on your usage. The important bits are...
The Angular definition describes the functions you can expect to call on an instance of an Angular class.
The RouteProvider definition describes the functions you can expect to call on an instance of a RouteProvider class
I then declare angular and $routeProvider and tell the compiler they are instances of the classes defined in the previous steps.
Disclaimer: because I don't know what the arguments in your example represent I have used names like param1 but these should be updated to reflect what is actually expected, for example filePath: string - or whatever it actually is.
Here is the example:
// I don't know what the param names should be, so they
// need to be changed to sensible names
declare class Angular {
module (param1: string, param2: any[]) : Angular;
config(param1: any[]) : Angular;
}
declare class RouteProvider {
when(param1: string, param2: any) : RouteProvider;
otherwise(param1: any) : RouteProvider;
}
declare var angular: Angular;
declare var $routeProvider: RouteProvider;
// These are just because I don't know where you define them...
declare var PhoneDetailCtrl: any;
declare var PhoneListCtrl: any;
function myFunction ($routeProvider: RouteProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones' });
}
angular
.module('phonecat', [])
.config(['$routeProvider', myFunction]);
Related
I am relative new to angular and tried to create a new webapp with a yeoman generator. All good but then I try to add a new route,
angular
.module('App', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/reset', {
templateUrl: 'views/test.html',
controller: 'TestCtrl',
controllerAs: 'test'
})
});
However when I try to access the route like:
http://localhost:8081/#/reset
It keeps getting replaced with:
http://localhost:8081/#!#%2Freset
Take a look at this answer and see if it solves your problem. It looks like you may need to add $locationProvider.hashPrefix(''); to the route config.
There are a ton of examples of using the newer angular directives like ng-blur, ng-focus, form validation, etc. They all work great in a single page, or in plinkr, jsfiddle, etc. with the exception of the people who try to define the function on the global namespace, that mistake is WELL documented.
However, I was having a different problem.
I was using an example from Scotch.io. This one works great...until you introduce it into an SPA that is using angular-route :(
After many hours of fighting with the error 'Argument 'mainController' is not a function, got undefined', I found the answer in a comment from Hajder Rabiee.Thanks Hadjer, Love you man!
Hajder left this comment and in it, he says:
If you're using routes (high probability) and your config has a reference to a controller in a module that's not declared as dependency then initialisation might fail too.
E.g assuming you've configured ngRoute for your app, like
angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });
Be careful in the block that declares the routes,
.when('/resourcePath', {
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});
Declare secondModule as a dependency after 'ngRoute' should resolve the issue. I know I had this problem.
Even with this help it took me a minute to get it working, so I thought I would share my sample code here to help the next poor bastard that gets stuck on this.
First, in the place where i declare my routes:
var app = angular.module('sporkApp', ['ngRoute','validationApp']);
app.config(function ($routeProvider) {
$routeProvider
.when('/home',
{
controller: 'HomeController',
templateUrl: 'home/home.template.html'
})
.when('/tags',
{
controller: 'TagsController',
templateUrl: 'tags/tags.template.html'
})
.when('/test',
{
controller: 'mainController',
templateUrl: 'test/test.template.html'
})
.otherwise({ redirectTo: '/home' });
});
Then, you need to add your controller code somewhere, where it will get loaded in your shell page:
// create angular app
var validationApp = angular.module('validationApp', []);
// create angular controller
validationApp.controller('mainController', function($scope) {
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
alert('our form is amazing');
}
};
});
Finally, you need to add the corresponding ng-app and ng-controller to some page element that wraps the controls you want to validate. I put the following inside of a div tag:
<div ng-app="validationApp" ng-controller="mainController">
so, following best practice I've started using ng-strict-di. It's worked well so far, but I have hit the following problem using ui-router
// nested list with custom controller
.state('dashboard.list', {
url: '/list',
templateUrl: 'partials/dashboard-list.html',
controller: function($scope) {
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
this causes angular to barf with the "Error: error:strictdi
Explicit annotation required" error.
I know that I should be using the inline bracket notation, or $inject, but obviously can't put it in this code as is.
I was thinking that I could declare the controller in another part of the script, with $inject and then just reference it in the code ?
function GoodController1($scope) {
}
GoodController1.$inject = ["$scope"];
and then
// nested list with custom controller
.state('dashboard.list', {
url: '/list',
templateUrl: 'partials/dashboard-list.html',
controller: GoodController1
})
would this work ? Are there any problems with this approach ?
There are no problems, with this approach. I am using typescript, and the generated syntax of controlelr class is almost the same as yours.
Here is a working plunker
...
// the contoller funciton to be instantiated
// by angular using new
var GoodController1 = function($scope){
$scope.title = "good title";
};
// set of dependencies
// (in typescript that would be a static property)
GoodController1.$inject = ["$scope"];
// before angular 2.0, this is the must
// we still have to register controller in the module
app
.controller('GoodController1', GoodController1)
...
and later in state:
.state('good', {
url: "/good",
templateUrl: 'tpl.html',
controller: "GoodController1",
})
check it here
I am just getting started with an angular project. We have a number of simple views and controllers, and have been using the mechanism provided by $routeProvider to map controllers to views. Upon updating to angular v1.2.0 the $routeProvider mechanism appears to be gone and replaced with something better. However, I have not been able to find a coherent code example showing how to make the switch.
What I have looks like this:
theApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/foo', {
templateUrl: 'views/foo.html',
controller: 'FooCtrl'
})...
What has that changed to?
Thanks
It is still $routeProvider, but they moved it out into a module. You need to add it to the list of dependencies for your app by injecting 'ngRoute'.
You can get the routing module with the others for http://code.angularjs.org/1.2.0-rc.2/
here.
I see a lot of Angular codes more like this.
The following one is from their tutorial.
angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
However, I am more familiar with like this;
var app = angular.module('phonecat', ['phonecatFilters', 'phonecatServices']);
app.config(function($routeProvider) {
$routeProvider.
when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}).
when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
otherwise({redirectTo: '/phones'});
}]);
I even want to define that function($routeProvider) { ...} as a variable, but I am not confident about that will work.
Is there a reason behind this to avoid global variable, in this case app.
Or it's just one of best practices in AngularJs community?
angular.module(..) returns a module, and you can;
assign to a variable app(which is a global variable).
or continue chaining it
You saw a lot of chained examples because it is in a single file.
You will also see a lot of examples using global variable 'app' or whatever, because codes needs to be organized to many files.
I recommend the first one if you make an single file example.
I recommend the second one if you make an actual app, which requires name spacing.
Namespacing is good. Best practive is using angular.value instead of global variables
app.value('myVariable', 'myValue')
.controller('myController', function($scope, myVariable) {
...
});