Planning an Angular Application
Angular is in the air these days, recently Angular 5 was released. You have got an idea. You also have all the resources. You have programmers or maybe just yourself. But the most important question in everyone's mind.... Where to start and how to start building an Angular application? So now here is my post on Planning an Angular Application before making your hands dirty in the code. Every piece of work needs a little planning pre-work. So I am gonna start with simplifying the concepts to keep in mind while Planning an Angular Application. Digging in deep.
It is rightly said....
“A goal without a plan is just a wish.”
Simplification
A diagram will help simplify a lot of problems. So here is an example you all can consider while planning your own angular app.
Concepts to take care of while Planning an Angular Application
- AppComponent (filename: app.component.ts) is the root component.
- All the created components will be child to the AppComponent.
- Decide carefully where to keep a component Child or Sibling to another component.
- Communication from parent to child will always be an easy task without any performance risk.
- On the other hand if you want to communicate a data back to parent from child or between siblings, you will have to use @Outputs and EventEmitters or Services which cause performance issue.
- Performance will always be best if your application is broken down into components for each feature.
- Keep things simple.
 |
| Fig.1: Components in Angular |
First go through the above diagram carefully and try to understand the best you can by your own.
Explanation of Fig.1
- "AppComponent" is the root component. All the other components are contained inside it.
- Component A, B and C are Child components to AppComponent.
- Component A, B and C are siblings to each other.
- Component B has child D and E.
- Component D and E are siblings.
- Component C has child F. So Component C will contain features of its own and all the features of Component F and its children.
- Component F has child G, H, I and J.
- Components G, H, I and J are siblings to each other.
*Concept of components provide extensive scalability and reusability to Angular applications. So plan one component for some feature which is repetitive and play with its values.
For example: Maybe a navigation bar has to have different options in two different Components. So you will create one navbar component in which you can pass values and use angular directives to customize its view and behavior for each parent component it will be used in.
Example of a Student Application
 |
| Fig.2: Example of a Student Application in Angular. |
The above image explains the complete idea of how to make a plan for an angular app or any web application for development.
Root is the main app component or what Angular generates "AppComponent". It will be containing a "HEADER" which is basically a navigation bar in this case. So this "HEADER" will be created as a different component which can be reused.
This "ROOT" app will contain 2 basic features i.e, "Students List" and other one is "Syllabus". Both Features itself will be a component also. *Components only contain the feature or the business logic.
Other components inherited by the "Students List" component will be "Students Details" and "Students Performance".
Other components inherited by the "Syllabus" component will be "Syllabus Details" and "Syllabus Edit".
You all maybe thinking that these inherited components sound like features. So here is my reply, These components only will contain the feature as I mentioned above.
In next post I will help you understand the file hierarchy of angular project and what all are tricks to get the best out of angular.
This was all about planning an Angular application before getting your hands dirty. Credits for this post goes to:
At last, always create a Smooth, Objective sketch of your application which conveys you a rough picture but helps you not stumble your feet.
- Angular Official Documentation
- Maximilian Schwarzmüller - Professional Web Developer and Instructor
