Angular Architecture
One of the major design considerations in angular is to reduce the size of the final bundle, with this, some of the libraries that are required for angular app to work are provided through core libraries, and other optional libraries can be imported as per needs.
Components are the basic building blocks of angular applications, this uses other dependencies like services, directives etc to perform its task.
Below architecture diagram can give a better idea on how each parts interact each other.
Modules
Angular Modules contains different parts of the application and are the way to group related component, services, directives and pipes to a single unit.
Component
Major development in angular is done using component. Each component is linked to view. It can be viewed as a reusable component as well.
Components are part of ngModules and each component can use other components as well. It can be viewed as a tree structure.
Template represents the html view and it communicates with the component through property and events.
Services are nothing but reusable functions that are separated from components but can be injected through dependency injection. This is very useful when you want to use same methods or properties in multiple places.
Components are part of ngModules and each component can use other components as well. It can be viewed as a tree structure.
Template represents the html view and it communicates with the component through property and events.
Services are nothing but reusable functions that are separated from components but can be injected through dependency injection. This is very useful when you want to use same methods or properties in multiple places.
Routing
When it come to Single Page Application(SPA), we often hear angular associated with it. Angular is designed to mainly with the objective of SPA. Angular router framework evolved over the years and become a well matured framework to support all needs of SPA.
Routing works based on the URL structure. It allows us to define the routes and its corresponding components using a Route array. When the URL matches the defined route, its component get loaded in to main template.
Environment Setup
- Setup the development environment. Install the latest version of Node.js and npm. If node is already present, please verify the version using command node - v and npm -v in console. Please note that node version should be higher that 6.9.x.
- Install the Angular CLI using npm install -g @angular/cli command. Angular CLI installation is global and not with respect to angular project.
- Install your preferred IDE like VS Code or Webstorm etc. I suggest you to use Visual Studio Code.You can download it from here.
Create New Project
You can create a new project from CLI using below command.
ng new app-name
This creates an angular project with all required modules and some predefined components. Developer can use this default project template for further modification.
Run Your App
Use below command to launch your application.
cd app-name
ng serve
The ng serve command launches the server. It can be accessed through default url http://localhost:4200/. Any changes made in the files after launching the app will reflect automatically in the browser if the rebuild is successful.
You can use below command to open the browser automatically and launch the application in default url.
ng serve --open (or) ng serve --o
We can discuss about angular project structure, list of files and use of each files in next blog.
No comments:
Post a Comment