Building Angular applications and further resources
This final Angular article covers how to build an app ready for production, and provides further resources for you to continue your learning journey.
Prerequisites: | Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. |
---|---|
Objective: | To learn how to build your Angular app. |
Building your finished application
Now that you are finished developing your application, you can run the Angular CLI build
command.
When you run the build
command in your todo
directory, your application compiles into an output directory named dist/
.
In the todo
directory, run the following command at the command line:
ng build --prod
The CLI compiles the application and puts the output in a new dist
directory.
The --prod
flag with ng build
gets rid of stuff you don't need for production.
Deploying your application
To deploy your application, you can copy the contents of the dist/my-project-name
folder to your web server.
Because these files are static, you can host them on any web server capable of serving files, such as:
- Node.js
- Java
- .NET
You can use any backend such as Firebase, Google Cloud, or App Engine.
What's next
At this point, you've built a basic application, but your Angular journey is just beginning. You can learn more by exploring the Angular documentation, such as:
- Tour of Heroes: An in-depth tutorial highlighting Angular features, such as using services, navigation, and getting data from a server.
- The Angular Components guides: A series of articles that cover topics such as lifecycle, component interaction, and view encapsulation.
- The Forms guides: Articles that guide you through building reactive forms in Angular, validating input, and building dynamic forms.
Summary
That's it for now. We hope you had fun with Angular!
In this module
- Introduction to client-side frameworks
- Framework main features
- React
- Ember
- Vue
- Getting started with Vue
- Creating our first Vue component
- Rendering a list of Vue components
- Adding a new todo form: Vue events, methods, and models
- Styling Vue components with CSS
- Using Vue computed properties
- Vue conditional rendering: editing existing todos
- Focus management with Vue refs
- Vue resources
- Svelte
- Angular