Anatomy of an Angular 2 App
Angular 2 is out and I'm currently working on a single web app hosted on Firebase. This will be a simple landing page website and
What do these new commands provide?
- It sets up boilerplate code including test files to accompany new components and models.
- It can add entries to your routes.
- It can automatically import any dependencies you might need while running a client command.
- You get a development environment that auto compile files when they change.
Step 1 - Install Angular 2 Client
Let's first (globally) install the Angular 2 command line interface.
sudo npm install -g angular-cli
Step 2 - Create an App
Create a new Angular 2 app.
ng new my-landing-page
Change directory into your app.
Start your web server.
Run Your Unit Tests
As a final check, run your unit tests to make sure everything is working.
Command Line Generators
Similar to Ruby on Rails, Angular provides a suite of commands to help you build our your app.
At a high level, there are two types of components: Smart Components and Reusable Components. There are many synonyms associate with each component so here's a cheat sheet.
They are generally application specific and are directly related to the app your making. Other names for those smart components include:
- Application Specific Components
- Controller Components
These are components that are not directly connected to any specific application. For example, a login system where you enter your email and password might be a good example of something reusable.
- Presentation Components
- Pure Components
ng g component my-new-component
Directives are the meat and potatoes of Angular. Directives add behaviour to an existing DOM element. They are super flexible to use and are three types of directives in Angular:
- Componentsâ€”directives with a template.
- Structural directivesâ€”change the DOM layout by adding and removing DOM elements.
- Attribute directivesâ€”change the appearance or behavior of an element, component, or another directive.
ng g directive my-new-directive
ng g pipe my-new-pipe
ng g service my-new-service
ng g class my-new-class
ng g interface my-new-interface
ng g enum my-new-enum
ng g module my-module
Anatomy of an Angular 2 app
e2e/is used for end-to-end testing.
src/app/is for application.
src/app/index.htmlis used to run your application.
src/app/app.component.spec.tsare your tests.
src/app/assetsare for assets.
src/app/environmentsare for environment configuration.
src/tsconfig.jsonis used to compile typescript.
karma.conf.jsis used for running unit tests.
package.jsonis where you record the libraries you are using.
protractor.conf.jsis for End-to-End testing.
tslint.jsonis used for checking your typescript.
Sending messages from Components to the DOM.
[ Property Binding ]
Sending messages from the DOM to Components.
( Event Binding )
From Components to DOM to DOM to Components.
Port Already in Use
If you see this error, run the command below:
Port 4200 is already in use. Use '--port' to specify a different port.
sudo lsof -t -i tcp:4200 | xargs kill -9