Playing with Angular2
Today I decided to do a todo with Angular2 and see how far I can get with the framework.
As in any todo app, it was supposed to do basic crud. In addition to that, I wanted to check out some tooling around it in case there is something useful. This is what I found interesting in the journey:
I started with trying to fetch all the dependencies from npm and implement a module and a couple of components. Fortunately, I quickly figured out that all the wiring can be automated with an awesome angular-cli, so I'd suggest make its installation to be the first step.
1. Install angular-cli:
It does a lot of magic, but removes a fair bit of boilerplate making writing useful code more a priority.
2. Generate components, services, interfaces etc you need and make sure you like the project structure. With all the files generated you want to change it as little as possible as it would be a little bit of a pain to move those pieces of magic around.
You can read more at the project github page. Quick commands to generate some code:
and so on and so forth... Note, thatin a lot of cases, the files generated will end up being included in the root of the app (unlike components) - so make sure you provide a name similar to /services/remote/my-service to put it into the needed place. You would also need to add some extra wiring so make sure you read all the console prompts.
For the app I ended up having the following:
- 3 components - TodoBox, TodoItem and TodoAddForm.
- a mock-up service: TodoDataService
- an interface: TodoItem
The CLI is pretty good, especially with components, it's a real pleasure to use it.
3. Add logic and temples. Here, I found that data binding and workflow is pretty good too - it makes absolute sense and is very easy to read and modify the code. Typescript is extra chocolate on the layers upon layers of chocolate in angular2, happy days - more type safety:). Oh, also, syntax highlight - yum!
The event names typically are those we all got used to without the "ng" prefixes. For example, if you want to bind a button click event to a method, you do it like this:
As in any todo app, it was supposed to do basic crud. In addition to that, I wanted to check out some tooling around it in case there is something useful. This is what I found interesting in the journey:
I started with trying to fetch all the dependencies from npm and implement a module and a couple of components. Fortunately, I quickly figured out that all the wiring can be automated with an awesome angular-cli, so I'd suggest make its installation to be the first step.
1. Install angular-cli:
npm install -g angular-cliIt does a lot of magic, but removes a fair bit of boilerplate making writing useful code more a priority.
2. Generate components, services, interfaces etc you need and make sure you like the project structure. With all the files generated you want to change it as little as possible as it would be a little bit of a pain to move those pieces of magic around.
You can read more at the project github page. Quick commands to generate some code:
ng g component my-componentng g service my-serviceand so on and so forth... Note, thatin a lot of cases, the files generated will end up being included in the root of the app (unlike components) - so make sure you provide a name similar to /services/remote/my-service to put it into the needed place. You would also need to add some extra wiring so make sure you read all the console prompts.
For the app I ended up having the following:
- 3 components - TodoBox, TodoItem and TodoAddForm.
- a mock-up service: TodoDataService
- an interface: TodoItem
The CLI is pretty good, especially with components, it's a real pleasure to use it.
3. Add logic and temples. Here, I found that data binding and workflow is pretty good too - it makes absolute sense and is very easy to read and modify the code. Typescript is extra chocolate on the layers upon layers of chocolate in angular2, happy days - more type safety:). Oh, also, syntax highlight - yum!
The event names typically are those we all got used to without the "ng" prefixes. For example, if you want to bind a button click event to a method, you do it like this:
<button (click)="edit()">Edit</button>[class]="variableName" or [class]="{className: truthyStatement, className2: falsyStatement}". Emitting events is also quite straightforward as along as you import EventEmitter from angular, you can simpley do the .emit(item) type calls from any method you have.4. Run the
ng serve command from the console to start your web app and see the results in the browser. The errors that might appear are very straightforward and well-written, which is another plus.5.Adding styling. This was a bit of a pain for me, I wanted to try material libraries and, as it happens, there is more than one of them out there :) This one is the one from the Angular team, so it shouldn't be that bad... From my experience, there are some rough edges there and that is explainable as it is still in beta now. So let's not be annoyed by it and try it out.
npm install --save @angular/materialYou would also need to install some other libraries to get full support. The layout is provided separately and this is another installation. You can read more here.
In addition to that, it worth mentioning, that any unsupported by cli css/js libraries can still be included for the project - you just need to modify the angular-cli.json file and add any dependencies to the "styles" or "scripts" array.
6. The final result is shown below.
It's not much, but I think the exercise is good enough to grasp some angular2 basics. The verdict: it lives! I definitely liked it so when I will be doing something on the front end next time, I would really consider using it as a competitor to react.
Comments
Post a Comment