In this post, we are going to focus on some pretty basic stuff, like setting up the application and getting it working. Posts will become more advanced during the series progress. Feedback is always appreciated, so please, if you have any thoughts on how this and future posts can be improved, leave your comments below.
Who is this article for
If you are a beginner on Angular2, if the framework is something new for you and you wish to learn more about it, this is the article for you. We are going to setup Angular2 with TypeScript on VSCode, getting a very basic hello world application.
Article is updated to follow latest Angular2 final version.
Regarding tooling, you will need to have installed NodeJS, NPM, VSCode and TypeScript.
So, make sure you have NodeJS installed on your machine first. If not, find it here.
Then, make sure you have NPM installed. NPM ships with NodeJS, so if you have it, then you have NPM as well in your machine. Make sure you got the latest by running the following command in a CMD window:
Finally make sure you have TypeScript…
… and VSCode installed.
The Angular2 movement
Angular2 (yes, no AngularJS 2, just Angular2) is the new kid in the block, in SPA frameworks. It comes sexiest than ever, faster, powerful, cleaner, it is really the dreamland for a web developer. It comes with support in ES6, TypeScript and Dart.
Careful though. This is a framework that is designed (until this time of writing at least) to be a solely SPA framework, so if you are considering an SPA application, yes this is the way to go. I mean, really, give it a try, you are going to love it.
If not, you are probably planning to span the framework across pages, having a non-SPA application, so this framework is not meant for your. This could be done with the previous AngularJS, or Backbone.js, to have the app module, lets say in AngularJS, and use it in different pages to register controllers, which doesn’t use the routing feature though. I don’t find a very good reason to do so, but I am here to warn you.
This is a reddit discussion on the matter, where some hacks are introduced, but I wouldn’t recommend that. If the guys at Google wanted you to do so, they would have included it, so try to stick around with the framework.
What’s new compared to AngularJS?
This will be a brief introduction in Angular2 vs AngularJS, as this can be a very lengthy section, which fits on its own article.
First, performance. Angular2 has made significant refactoring on the framework, compared to the previous version, such as killing off watchers and digest cycles. From this you can understand how much pain you are saved from, because, yes, lets admit it, it was pain, which needed extra consideration as well as performance tuning. If you are not familiar with tuning techniques on AngularJS, check this amazing presentation by Todd Motto, which I had the pleasure to watch it live (streaming). Thanks Todd!
IDE’s today have very good support on Angular2, like VSCode, Atom, Sublime, Webstorm, etc. You must be wondering why I didn’t include Visual Studio 2015. Read on Tips section below.
Also, universal apps are possible through Angular2. The framework is not focused on Web Applications, like the previous one, which was designed only to support responsive web applications, instead it has a wide range of devices support, as well as creating mobile applications, with NativeScript and ReactNative.
Last, but not least in this quick brief intro to Angular2, is forget about controllers, forget about factories, providers, directives, as everything is a component now. Yes, Angular2 is following the steps of React on componetizing the UI and it is doing a great job. Forget setting a controller and working with
$scope, no more. Now you have the power to construct your designs, extracting small components on functionality throughout your UI, something that was not that straightforward in the previous framework, or was too cumbersome with Backbone.js and Marionette.js (it was kinda similar in mindset).
Let’s first show the structure we are going to create and then move on with the walkthrough.
Pretty basic setup, a package.json to fetch all NPM modules we need, a tsconfig.json to provide instructions to the TypeScript compiler, a typings.json to provide some TypeScript definitions, a system-config.js to configure SystemJS module loader, an index.html as the default document of the application and in the src folder we have all the Angular2 specific code. In css folder we just have some global CSS styles.
Main.ts is responsible for bootstraping the Angular2 application by loading the application module, which is the
AppModule class. This loads all the underlying components as well as the root
App.component.ts is the main component, which hosts all components in the Angular2 application, so think about it as a master component, the root of all components. These three, app.module.ts, main.ts and app.component.ts are the minimum requirements in every Angular2 application you build.
home.component.ts will be just a hello world component for the sake of this walkthrough. As you can see, all related to component resources (*.css, *.html) are component specific, so we have component specific CSS and HTML code, which serves as its template.
Make sure to add all the above folder and files, and we are going to talk about their implementation in the next sections.
Let’s go through all the necessary steps for creating this basic application.
Go to your file system and create a new folder, for the application. Name it Angular2FromScratch.
Open VSCode now, go to menu File > Open Folder and navigate to the folder you just created.
We need to install all the required dependencies for the application. On VSCode press Ctrl + Shift + C to open a Command Prompt Window. There, type
npm init to create the package.json. Answer to the questionnaire and when its finished, paste the following code:
Just be sure to overwrite the
scripts section with the one above, so you can have the web-server ready to run, as well as compiling your TypeScript code through the commands. The
tsc command compiles the TypeScript files in your application, whereas the
tsc -w command compiles them and watches for changes, recompiling if needed.
lite-server command kicks-off the lite web server, running and hosting the application.
So, regarding the libraries, these are the minimum required for this simple application. Angular2 has packages for different framework features, so everything is modular, we have a core package, with core functionality, like Components, we have an Http package to provide communication through the network by the use of HTTP providers, etc.
Next is the tsconfig.json to set, in order to provide some compiler instructions. Paste the following code in this file.
We instruct the compiler the following:
- Use ES6 as ECMAScript target version.
- Use commonjs as module code generation technique.
- Use node as module resolution strategy.
- Generate source maps.
- Emit design-type metadata for decorated declarations in source.
- Use the expirimental decorators.
- Remove comments from the generated .js files.
- Warn on expressions or declarations that use
Lastly, we exclude certain directories from the compilation process.
Paste the following code in typings.json.
Or alternatively open the terminal (Ctrl+`) and type the following:
Now, go to the CMD you have open (if not, press Ctrl + Shift + C) and type
npm install. This will install all the dependencies and devDependencies you have on package.json.
When this operation is completed, we can proceed in creating the index.html, the systemjs-config.js and the rest Angular2 code.
In order for our Angular2 app to be up and running, we need to add some dependencies, which are the core-js shim, the zone.js and Reflect.js. After that, we can provide our systemjs configuration, with the Angular2 and Rx.js scripts.
The app-component selector, is the template of app.component.ts component. We’ll see more about that in a moment.
In this file, we provide configuration to SystemJS, on how to resolve imports (remember, SystemJS is a module loader, we need to tell it where it can find all the required packages/dependencies).
We locate all angular2 packages under bundles folder, which is located in each package directory. Ultimately, we are interested in the <package_name>.umd[.min].js file, which is exactly what we are loading at the moment.
Lastly, before we go into the Angular2 code, we need to add the styles.css file in css directory. So add this file, with the following code:
First, we add the application module, as every Angular application has at least one module class. Modules are very handy and help a lot to organize an application into cohesive blocks of functionality. To create a module, you need to import the
NgModule decorator from
@angular/core. Then you create a class, named AppModule here, which is decorated by NgModule. In this decorator, we register all the components in
declarations property. If we had any services, we’d register them in
providers property. Angular2 dependency injection takes care of the rest, so you don’t need to register you components/directives/services/pipes in components anymore, everything is going into you module.
imports property we inject other modules whose exposed classes are needed by component templates declared in this very module.
BrowserModule is loaded here, which is a module every browser application must import. It registers critical application service providers and includes common directives. All these become immediately available and usable in any component this module contains.
bootstrap property identifies the application component or AppComponent as the bootstrap component, so Angular launches the application with this component serving as the root.
In main.ts we do the application bootstraping. Main.ts (ultimately main.js) is the main entry point to our application, something we defined already in systemjs-config.js (main.js is mapped to “app” module).
We need the
platformBrowserDynamic method, which is located under
platform-browser-dynamic module, surprisingly, as many people would think that this is a core module. The thing is that bootstraping in Angular2 is platform specific, like bootstraping Angular2 from another environment like Apache Cordova, which requires a different kind of bootstrap function, as well as different library to be imported. Also, we import the
AppModule component, which is something we’ve created.
After we execute the
platformBrowserDynamic() method, it returns a
PlatformRef, so we can call the
bootstrapModule method that takes an
NgModule as input and returns a
Promise. If the module is loaded, success kicks-in, else error handler is called.
Take note that the app.module.ts is in the same directory as the main.ts. Be careful with the module paths, as this can sometimes be confusing. We have defined a module resolution strategy already in tsconfig.json. Look the imported module from the current directory (the file’s directory), you don’t need to use absolute paths or anything like that.
In app.component.ts we need to create a
Component. We are going to name it
AppComponent. This component will have its template, as well style (app.component.html, app.component.css), as well as a child component (home.component).
As you can see, a component has a very simple structure.
First, we have the imports, which are modules imported in our component.
Next we have the metadata, which is the
@Component decorator declaration. This essentially describes the component.
Finally, we have the component definition, the class itself, in this case the
AppComponent class, which goes with its implementation, of course.
OnInit interface from
Component is a decorator, while
OnInit is an interface, it implements the
ngOnInit method, which kicks-off when the component is initialized (it runs after the constructor of course).
Next we define all the metadata for the component. Let’s take them one-by-one.
- moduleId. We set it to
module.id, which is the fully resolved filename, defined at module load time. Defining it, we can reference *.css, *.html files in component, for
styleUrls, in a relative manner. Now we don’t see this in app.component.ts, but I will show you what happens in home.component.ts later. Just be sure you have
commonjsset as module in tsconfig.json. There is different approach on systemjs module or webpack, which we will discuss in another post.
- selector. The name of the selector of the component. Remember the index.html with the
<app-component>element? This is the
AppComponentselector, so essentially, the template of the
- templateUrl. We provide the path for the .html template file. It is just a string.
- styleUrls: We provide in an array, all the paths for the .css files.
We name the class
AppComponent and we make sure we export it as a module, so other files can access it (like the main.ts which imports
In class body, we just set the value of the
Let’s go the app.component.html to see how we render the message.
Nothing new here, just normal string interpolation, we put the message (the property we wish to render) into double braces
Below, we have the
<home-component> directive. Notice its usage. We didn’t define anything in AppComponent, yet we can use the HomeComponent markup. The metadata become available from the application module, in which we registered the HomeComponent component. If we hadn’t registered it there (in declarations property) the code above would throw an error, indicating it cannot find the
Standard CSS code for this file, no need to get into this, just paste the following code:
For the home.component.ts we work in the same fashion with the app.component.ts, by getting the
OnInit interface. Next, we define the metadata and lastly, we define the class and its body. Let’s see it.
Nothing new here, we just set a message on the
message property, which will be rendered in home.component.html.
That’s the power of components in Angular2. We can have infinite components in our UI, which can be children of the parent component, from them build a structure, with each one being responsible for individual operations, promoting component reuse.
Take a look at
styleUrls properties. If we haven’t defined the
moduleId to be
module.id we would get a
404 Not Found error for the .html and .css files. So we should define a path from the root of our application, which is the
app, essentially where the main.ts resides.
Thanks to that though we are defining the resources in a relative manner.
Nothing special with the
Finishing with the styling for the
Application is ready
Everything is in place, so if you have followed along, you are now ready to run the application in the browser. Open a CMD window (Ctrl + Shift + C) and type the following:
This will kick-off the lite web-server and, of course, the application itself.
Essentially, you are going to get this as a result.
For developing on VSCode, be sure to download Angular2 TypeScript Snippets, by John Pappa. This can boost your productivity, when you are familiar with the bits and bolts of Angular2. Some of the snippets available in this extension:
ng2-component-root // Angular 2 root App component ng2-bootstrap // Angular 2 bootstraping, for main.ts ng2-component // Angular 2 component ng2-pipe // Angular 2 pipe ng2-route-config // Angular 2 @RouteConfig ng2-route-path // Angular 2 routing path ng2-service // Angular 2 service ng2-subscribe // Angular 2 observable subscription
ng2-ngClass ng2-ngFor ng2-ngIf ng2-ngModel ng2-routerLink ng2-ngStyle ng2-ngSwitch
Visual studio 2015
If you intend to use VS 2015 to create an Angular2 application, just think about it twice. I had many problems such as looking for updates to resolve issues, like one with file indexing, which made VS 2015 crash if the node_modules folder was large enough.
For front-end code I would suggest go with VSCode, it just isn’t that frustrating when developing, you don’t want to be frustrated, do you?
Another reason is the lack of the hot module replacement, I want to write code for my front-end and immidiatelly see the changes in browser, I do not want to rebuild the application (yes it happened to me and I spend 3-4 hours trying to find what was wrong with my configuration) or refresh the browser. For gods sake, we are in 2016, with lots of tools in our hands that do exactly this job, why to be primitive because of the VS 2015 tooling issues?
Ah, and if you intend to use Angular-CLI with VS 2015 be prepared for the pain I mentioned above (VS 2015 super slow, crashes, etc.). The newest update partially resolved these issues, but it is not as fast as VSCode is.
Download and play around with the code, which you can find on my Github page.
If you liked this blog post, please like, share and subscribe! For more, follow me on Twitter @giorgosdyrra.