I’ve been doing some work the last couple of weeks with Angular2. I really like it. Not just because it uses typescript, but also because it feels really natural and straightforward while working with it. No more string based dependency injection, or strange digest cycle stuff, it just seems to work. This last week I’ve migrated our beta-13 Angular app to the latest rc-1, and used that to keep track of the fun and easy stuff Angular 2 provides. Note though, that the application we’re developing is really that complex, so I can only assume we’ll run into more complex Angular2 features in the near future. For now, though, let me share some general tips and tricks we’ve encountered thus far (in no particular order). Oh, all examples are in typescript, since after using that, I really don’t want to go back to plain old javascript (POJS?).<\/p>\n
If you need to format some output string, in the old Angular version you used Filters. In Angular 2, though, the name of filters have changed and they are now called pipes. Using pipes is very easy and only takes a couple of steps to get working. First, you need to define a pipe:<\/p>\n
import {Pipe} from '@angular\/core';\r\nimport {FormatUtils} from '..\/utils\/formatUtils';\r\n\u00a0\r\n@Pipe ({\r\n name : \"humanReadableNumber\"\r\n})\r\nexport class HumanReadableNumber {\r\n\u00a0\r\n transform(value: any) {\r\n \/\/ converts a size to something human readable\r\n return FormatUtils.humanSize(+value);\r\n }\r\n}<\/pre>\nNow that we’ve got a pipe we can import it in our component, and use it to format a value in our page. We import is like this, and add it to the pipes<\/strong> property of the<\/p>\nimport {Component} from '@angular\/core';\r\nimport {CORE_DIRECTIVES} from '@angular\/common';\r\nimport {HumanReadableNumber} from '..\/..\/..\/shared\/pipes\/humanReadablePipe'\r\n\u00a0\r\n@Component({\r\n\ttemplateUrl: 'some-template.html',\r\n directives: [CORE_DIRECTIVES],\r\n pipes: [HumanReadableNumber]\r\n})\r\nexport class SomeCmp {\r\n ...\r\n}<\/pre>\nAnd using it in our code is just as simple:<\/p>\n
<div class=\"col-sm-3\">\r\n <span class=\"text-red\">{{failureCount | humanReadableNumber}}<\/span>\r\n<\/div><\/pre>\nAnd the cool thing is you can chain pipes together, and of course also create parameterized pipes. The official documentation for pipes can be found here: https:\/\/angular.io\/docs\/ts\/latest\/guide\/pipes.html<\/a><\/p>\n2. HTTP is easy to use<\/h2>\n
You can’t have a web application without making some HTTP calls to pull in data. With Angular 2 this is suprisingly easy. Just inject the **http** component, pass in the headers and parameters, and you get back on observable. As soon as you subscribe to the observable, the call will be executed, and you can easily use the functions provides by rx.js to transform the response (see next tip):<\/p>\n
private getSomeData(timePeriod: TimePeriod): Observable<any> {\r\n\u00a0\r\n let headers = new Headers();\r\n headers.append('Content-Type', 'application\/json');\r\n\u00a0\r\n \/\/ handle the today case differently, since we need to go to start of day\r\n let [from, to] = (timePeriod.name === Configuration.timePeriod.today.name)\r\n ? [moment().utc().hours(0), moment()]\r\n : [moment().subtract(timePeriod.amount, timePeriod.period), moment()];\r\n\u00a0\r\n \/\/ setup and add the query parameters\r\n let params = new URLSearchParams();\r\n params.set('environment', 'test');\r\n params.set('interval', timePeriod.period);\r\n params.set('from', from.toISOString());\r\n params.set('to', to.toISOString());\r\n\u00a0\r\n return this.http.get('http:\/\/the.url', { headers: this.getHeaders(), search: params })\r\n .map((res: any) => res.json());\r\n}<\/pre>\nAnd the result is an observable, which can be consumed like this:<\/p>\n
someService.getSomeData(period).subscribe((json: any) => ({\/\/ do something with the json}));<\/pre>\nThe official documentation for HTTP can be found here: https:\/\/angular.io\/docs\/ts\/latest\/guide\/server-communication.html<\/a><\/p>\n3. Observables are really cool<\/h2>\n
In Angular 1 when communicating over HTTP, or doing stuff asynchronously you would use promises. In Angular 2, promises have been replaced with Observables. Without going too deep into what Observables are, in short they provide a way to subscribe to a sequence of events and act whenever the observable emits a new event. The really cool thing is that you can apply all kinds of operations and transformations on the events before they are processed by a subscriber. You can for instance map it to a domain object, group multiple events together and much, much more (see the rx.js documentation for all the options: http:\/\/reactivex.io\/rxjs\/class\/es6\/Observable.js~Observable.html<\/a>)<\/p>\nThe easiest example of an Observable is when you want to do an HTTP request in Angular 2. Instead of working with promises you now do something like this:<\/p>\n
import {Http} from '@angular\/http';\r\nimport {Inject} from '@angular\/core';\r\nimport {Headers} from '@angular\/http';\r\n\u00a0\r\nexport class SomeService {\r\n\u00a0\r\n constructor(@Inject(Http) private http: Http) {};\r\n\u00a0\r\n getPerson() : Observable<Person> {\r\n let headers = new Headers();\r\n headers.append('Content-Type', 'application\/json');\r\n\u00a0\r\n return this.http.get('http:\/\/the.url.endpoint', {headers})\r\n .map(res => res.json())\r\n .map(res => new Person(res.name, res.age));\r\n }\r\n}<\/pre>\nAs you can see the result is an Observable<\/strong>. We can now use this Observable very simply like this:<\/p>\nimport {Component} from '@angular\/core';\r\nimport {Person} from '..\/shared\/domain';\r\nimport {SomeService} from 'some-service';\r\n\u00a0\r\n@Component({\r\n templateUrl: 'someTemplate.html'\r\n})\r\nexport class AnotherCmp {\r\n\u00a0\r\n public person: Person;\r\n\u00a0\r\n constructor(private someService: SomeService) {\r\n someService.getPerson().subscribe((person) => (this.person = person));\r\n }\r\n}<\/pre>\nWe subscribe to the observable. When we do this, the HTTP call will be made, and when it returns, we just assign the response to a public variable. Another feature of Observables we use is to wait for multiple calls to finish, before sending the message to a subscriber. This uses the forkJoin<\/strong> function provided by rxjs.<\/p>\npublic getMonthlyInfo(): Observable<MonthData[]> {\r\n let observables: Observable<MonthData>[] = [];\r\n\u00a0\r\n \/\/ create the observables for the different calls\r\n \/\/ and add them to the observables array\r\n ...\r\n\u00a0\r\n \/\/ Intellij throws a false error: https:\/\/youtrack.jetbrains.com\/issue\/WEB-20992\r\n \/\/ this returns another observable, which returns an array of results from the\r\n \/\/ observables we passed in to the forkJoin\r\n return Observable.forkJoin(observables);\r\n}<\/pre>\nAnd this is just touching upon the surface of what is possible with Observables. On a side note, if you prefer to work with Promises, you can use the *toPromise* function on an observable to turn it into a promise.<\/p>\n
4. Start with use angular2 seed<\/h2>\n
Maybe I should have added this as the first tip, but setting up a build environment using gulp systemJS (or webpack) can be a bit of an hassle. Luckily, though, there is an easy way to get started using angular seed. There are multiple angular seeds available, but I use this one: https:\/\/github.com\/mgechev\/angular2-seed<\/a>. It provides a systemJS \/ gulp based seed setup, including all kinds of nice features. Getting started with it, is also very trivial:<\/p>\ngit clone --depth 1 https:\/\/github.com\/mgechev\/angular2-seed.git\r\ncd angular2-seed\r\n# install the project's dependencies\r\nnpm install\r\n# watches your files and uses livereload by default\r\nnpm start\r\n# api document for the app\r\nnpm run build.docs\r\n\u00a0\r\n# dev build\r\nnpm run build.dev\r\n# prod build\r\nnpm run build.prod<\/pre>\nIf you want to use it as the base for your own project, it might be good to run the following git commands after cloning the repository, to point it to your own repository \/ project:<\/p>\n
rm -rf .git\r\ngit init\r\ngit remote add origin https:\/\/giturl.of.your.project.git<\/pre>\n5. Intercept requests for authentication<\/h2>\n
One of the first things I wanted to add to our application was a way to check whether a user was logged in. I was looking for global filters, and stumbled upon this example: https:\/\/github.com\/auth0-blog\/angular2-authentication-sample<\/a>. This shows how to use a RouterOutlet<\/strong> to check for certain conditions, before handling the request. Basically what you do is, you define a custom RouterOutlet<\/strong>:<\/p>\nFrom (https:\/\/github.com\/auth0-blog\/angular2-authentication-sample\/blob\/master…<\/a>):<\/p>\nimport {Directive, Attribute, ViewContainerRef, DynamicComponentLoader} from '@angular\/core';\r\nimport {Router, RouterOutlet, ComponentInstruction} from '@angular\/router-deprecated';\r\nimport {Login} from '..\/login\/login';\r\n\u00a0\r\n@Directive({\r\n selector: 'router-outlet'\r\n})\r\nexport class LoggedInRouterOutlet extends RouterOutlet {\r\n publicRoutes: any;\r\n private parentRouter: Router;\r\n\u00a0\r\n constructor(_viewContainerRef: ViewContainerRef, _loader: DynamicComponentLoader,\r\n _parentRouter: Router, @Attribute('name') nameAttr: string) {\r\n super(_viewContainerRef, _loader, _parentRouter, nameAttr);\r\n\u00a0\r\n this.parentRouter = _parentRouter;\r\n \/\/ The Boolean following each route below\r\n \/\/ denotes whether the route requires authentication to view\r\n this.publicRoutes = {\r\n 'login': true,\r\n 'signup': true\r\n };\r\n }\r\n\u00a0\r\n activate(instruction: ComponentInstruction) {\r\n let url = instruction.urlPath;\r\n if (!this.publicRoutes[url] && !localStorage.getItem('jwt')) {\r\n \/\/ todo: redirect to Login, may be there a better way?\r\n this.parentRouter.navigateByUrl('\/login');\r\n }\r\n return super.activate(instruction);\r\n }\r\n}<\/pre>\nAnd this allows you to check certain conditions before normally processing the request, or passing it on. I can explain how it works here, but just look at the github repository which will do a much better job.<\/p>\n
6. Directives are very easy to write<\/h2>\n
In Angular2 the distinction between controllers and directives is removed. A directive is just a simple component, where some of it’s values are populated when the component is instantiated. For instance a simple component that wraps one of the great https:\/\/github.com\/valor-software\/ng2-charts<\/a> charts looks like this:<\/p>\nimport {Component, Input} from '@angular\/core';\r\nimport {CORE_DIRECTIVES} from '@angular\/common';\r\nimport {CHART_DIRECTIVES} from 'ng2-charts\/ng2-charts';\r\nimport {DecisionNodeSummary} from '..\/..\/..\/shared\/domain\/dagSummary';\r\n\u00a0\r\n@Component({\r\n selector: 'dag-decnode-graph',\r\n templateUrl: 'decisionnode-graph.html',\r\n directives: [CHART_DIRECTIVES, CORE_DIRECTIVES]\r\n})\r\nexport class DagDecNodeGraph {\r\n\u00a0\r\n public title = \"\";\r\n\u00a0\r\n @Input()\r\n set nodeSummary(nodeSummary: NodeSummary) {\r\n this.routingStatusChartData = [nodeSummary.falsePath, nodeSummary.truePath];\r\n this.title = nodeSummary.name;\r\n };\r\n\u00a0\r\n public routingStatusChartLabels: string[] = ['false', 'true'];\r\n public routingStatusChartType: string = 'doughnut';\r\n public routingStatusChartLegend: boolean = false;\r\n public routingStatusChartData: number[] = [0, 0];\r\n public routingStatusChartOptions: any = {};\r\n\u00a0\r\n constructor() {\r\n }\r\n\u00a0\r\n}<\/pre>\nAnd the relevant template:<\/p>\n
<div class=\"col-md-4\">\r\n <h4 style=\"text-align: center\">{{ title }}<\/h4>\r\n <base-chart class=\"chart\"\r\n [data]=\"routingStatusChartData\"\r\n [labels]=\"routingStatusChartLabels\"\r\n [legend]=\"routingStatusChartLegend\"\r\n [chartType]=\"routingStatusChartType\"><\/base-chart>\r\n<\/div><\/pre>\nNevermind the model which is passed in, but this is basically all you need to do to define a directive. To use this directive in a page you just do something like this:<\/p>\n
<div *ngFor='let node of nodes'><dag-decnode-graph [nodeSummary]=\"node\"><\/dag-decnode-graph><\/div>\r\n<\/div><\/pre>\nHow easy is that! No more specific javascript, or custom functions. Just a simple component, just like all the other components.<\/p>\n
7. Typescript: domain objects are cheap and easy, type everything.<\/h2>\n
I couldn’t write this, without at least mentioning typescrypt. I really like typescript I come from a Java and Scala background and am used to having compile-time typechecking (and using IDEs to autocomplete some stuff). With typescript this also becomes available to Angular, and it works really great. What makes it even better is that creating basic domain objects is really easy and quick:<\/p>\n
export class Person {\r\n constructor(public name: number, public age: number) {}\r\n}<\/pre>\nAnd you can easily access the public properties, and hide the private properties. It even support default values. It isn’t quite up to Scala case classes yet, but it is a great way of defined a good domain model in your frontend applications. This combined with the **map** function of the **Observable**, it is very easy and convient to use these domain objects throughout your application.<\/p>\n
8. Use jquery<\/h2>\n
In many cases there isn’t a big need for jQuery in Angular projects. However, there is big ecosystem of great jQuery based components and libraries that will come in handy. While using jquery in Angular 2 isn’t that difficult, getting the typescript compiler to compile your code when including jquery in your dependencies might be harder. When you include jQuery you’ll quickly run into an error message something like this:<\/p>\n
Subsequent variable declarations must have the same type. \r\nVariable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'.\r\nWeb\\Scripts\\typings\\jquery\\jquery.d.ts 3936<\/pre>\nBasically, there are two different libraries claiming the $<\/strong> name. This can be quickly solved by replacing the last couple of lines from the **jquery\/index.d.ts** to this:<\/p>\ninterface JQuery {\r\n \/\/ add additional functions you might want to expose from other libraries\r\n \/\/ that append the jquery object\r\n chosen(options?:any):JQuery;\r\n bootstrapTable(...options:any[]):JQuery;\r\n}\r\n\u00a0\r\ndeclare module \"jquery\" {\r\n export = JQuery;\r\n}\r\ndeclare var jQuery: JQueryStatic;<\/pre>\nNow you can use the jquery library like this in code:<\/p>\n
declare var jQuery:JQueryStatic;\r\n\u00a0\r\n...\r\n\/\/ do whatever you want, just use jQuery instead of $\r\njQuery('.elem')<\/pre>\nWhile this works, you’ll notice that you have to repeat this process after each npm install or whenever you add a new library. Luckily you can override the typings that are retrieved when doing an **npm install**. So to permanently apply these settings, save the typings to a separate directory and change the jquery entry in the **typings.json** file to this:<\/p>\n
\"jquery\": \"file:overrides\/typings\/jquery\/index.d.ts\",<\/pre>\nThis points to our own custom jquery typings file in a separate directory. finally to get everything to work also update the tsconfig.json file to exclude this file or else you’ll get duplicate definitions errors:<\/p>\n
\"exclude\": [\r\n \"node_modules\",\r\n \"dist\",\r\n \"typings\/browser.d.ts\",\r\n \"typings\/browser\",\r\n \"src\",\r\n \"overrides\"\r\n]<\/pre>\nConclusions<\/h2>\n
This is just a quick set of observations from a couple of days intensive Angular 2 development. My main conclusion, though, it that it really is fun doing frontend development with Angular 2. It might because of typescript, but so far it feels like a really great, well thought out framework. It just works and a lot of the annoying things from Angular 1 have been solved.<\/p>\n
\n