Creating FRONT-END
Before creating the project make sure that the nodejs and angular CLI is only version 14.x.x
In this section we are going to create an angular project and make a web application called myApp
First, create a folder where you want to add your project. In this case I will create this on my C: folder
under repository folder.
Then let’s go to the folder using the console (cmd) and access the folder. In this case I will use the
integrated terminal of visual studio code.
When you are inside the repository folder let’s create the application by using the syntax.
Note: just add the routing to the app.
And select SCSS as the stylesheet
After the installation was finished you will see the following:
Remember that this might be different from your device
If you see an error or issue, just delete the project folder and restart the installation of the project
Next, go the the application folder and run ng serve on the console.
After the ng serve you can view the application in the localhost:4200 by default
The above figure was the default boiler plate of angular.
Lets look at the folder structure
COMPONENT
Now lets create a layout component inside the app component, you folder structure should be like the
figure on the right
Lets create two other components in the app folder using the ng g c [component name] syntax (login,
registration)
Your folder structure should be like this
Now inside the layout folder lets create multiple components that will serve as our pages inside the
layout.
Dashboard, Users-management.
Now that the components we need as a page is already created, let’s create the module and routing for
each and every component we created (layout, dashboard, user-management, login, registration)
Steps: go to each components folder and run the following command
Module - “ng g m [components name] --flat”
Routing - “ng g m [components name]-routing --flat”
Make sure that the –flat is included or else it will create a new folder for the module
In this example I’ve create a module inside the routing folder. Notice that I run the command INSIDE the
layout folder
NOTE: repeat the process to each component mentioned above
Setting up the routing
Now let’s set up the routing
Go the app routing file and set up the layout, login and registration
Layout as our default page after logging in
We include the layout, login and registration module in the app routing those are the components we
need to access first.
Inside the app.module remove the components inside the ngModule except AppComponent. App
module should look like the figure below:
Now let’s setup the routing of the other component with this structure
-routing module
Module
Example
Login-routing.module.ts
Login.module.ts
Repeat the process to all components created (layout, dashboard, user-management, login,
registration)
After the setup run the application and it should look like this
Now lets create REUSABLE COMPONENTS
Create a “components” folder inside the app folder
Inside the components folder create the following component WITHOUT routing
topnav, sidenav, screen
Remove the newly created component on the app.module and place it on the layout.module, your
layout should be like this:
Now inside the layout component HTML, call the following components
Modify the SCREEN component HTML
View the app on the browser, it should look like this.
DESIGNING
In this section, let’s add a library called ngBootstrap to make designing easy.
Note: there are still part of the application that we’re going to design manually using SCSS
Inside our project, run a new terminal and run the following:
Notice that I included a specific version to use. We’re going to use v13 of ngbootstrap for this application
After the installation we can use the ngBootstrap by adding the module on the App.module
Now lets try it on the dashboard component
As you can see, ngBootstrap is now ready to use.
Alternative imports
If you want to use a certain component of ngBootstrap here is an example on how you can import it on a
specific component
For further reference please see the link below:
https://ng-bootstrap.github.io/#/home
TODO
Make your project look good.
1. Design the sidenav (any appealing design)
2. Design the topnav (any appealing design)
3. Make sure that the screen is in the middle of the two navigation
(this design should be on the layout and only the screen will change its content)
4. Design a login form (any appealing design)
5. Design the registration form (any appealing design)
