-
Bulma CSS Framework with Angular 6 | Responsive menu and Navbar burger
-
Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix)
-
How to Create Reusable Angular Confirmation Dialog in 3 Steps
-
How to change page title with routing in Angular application?
-
π₯π₯π₯ Angular 16 JWT User Authentication Example Tutorial
-
How to define a top-level folder structure for your Angular project
-
[Angular File Upload Step-by-Step Guide
-
π₯π₯ Angular's "CanActivate" interface is deprecated. How to replace it?
-
π₯π₯π₯ How to resolve CanActivate deprecated in Angular-15 Auth Guard ?
-
π₯π₯π₯ Angular Authentication With JSON Web Tokens (JWT): The Complete Guide
-
π₯π₯π₯ Preventing unauthorized access using route guards
- To create a new workspace and initial starter app, run :
ng new my-app
- Run the Development Server : Navigate to the workspace folder, such as my-app &&
ng serve -o
- The --open (or just -o) option automatically opens your browser to http://localhost:4200/.
TypeScript, JSON Server, Angular 10+, Angular Material, Bulma css
- home page
- todos page
- products page
- employees page
- about page
- π Todos Management.
- π¬ Products Management.
- π₯ Employees Management.
- Make five components by typing the following command :
ng g c home
// ng g c todos
// ng g c products
// ng g c employees
ng g c about
ng g c register
ng g c login
ng g c layout/header
ng g c layout/footer
- create a xxxModule with routing in the xxx folder and register it with the root AppModule.
// --module=app => Tells ng generate to register it in the imports array of the AppModule.
// --flat => Puts the file in src/app instead of its own directory
//
ng g m xxx/xxx --module=app --flat --routing
// For example:
ng generate module posts/posts --module app --flat --routing
// Then
ng g c posts/post-detail
ng g c posts/post-list
ng g c posts/add-post
ng g c posts/edit-post
// Then,
ng generate interface posts/post
// Then, create
ng generate service posts/post
// Then create inside the posts folder
post.model.ts
ng g s services/authentication --skip-tests
ng generate interface users/user --skip-tests
ng g c users/user-profile --skip-tests
$ ng g c components/confirmation-dialog/confirmation-dialog --module=app --flat
$ ng g i components/confirmation-dialog/confirmation-dialog
$ ng g s components/confirmation-dialog/confirmation-dialog
ng g m angular-components/angular-components --module app --flat --routing
ng g c angular-components/index
//---------------------
ng g c --standalone components/counter
ng g c --standalone components/view-child
@NgModule({
...
imports: [CounterComponent], // <----------------- Using standalone components in NgModule-based applications
})
//---------------------
ng g c --standalone components/alert
ng g s components/alert
@NgModule({
...
imports: [AlertComponent], // <----------------- Using standalone components in NgModule-based applications
})
- Most applications should implement a routing module for consistency. It keeps the code clean when configuration becomes complex.
- How to write and run tests in Angular using Jasmine & Karma.
- How to write tests for : Classes, Components, Pipes & Directives
- How to write tests to test the Router.
- How to write tests using mocks and spies.
- How to write tests that involve an asynchronous action.
- How to write tests that involve the Http service.
- How to write tests that involve model-driven forms (template-driven forms require E2E testing).
- How to use the Angular Test Bed to help test behaviours that depend on the Angular framework.
This is a free and open source app. Want to say thanks? Click the β at the top of the page. π