Skip to main content

Introduction to Angel Dart Framework

Angel Examples.

Here is a detailed step-by-step tutorial on the Angel Dart Framework.

Introduction to Angel Dart Framework​

Angel is a powerful and flexible framework for building web applications using the Dart programming language. It follows a modular and extensible architecture that allows developers to create scalable and maintainable web applications with ease. Angel provides a range of features such as routing, middleware, authentication, database integration, and much more.

History of Angel Dart Framework​

Angel was initially created by Tobe O and is actively maintained by a community of developers. It was first released in 2016 and has since gained popularity among Dart developers for its simplicity and versatility. Angel is inspired by popular web frameworks like Express.js and Ruby on Rails, and aims to provide a similar experience for Dart developers.

Features of Angel Dart Framework​

  1. Routing: Angel provides a powerful and intuitive routing system that allows developers to define routes and handle HTTP requests easily. Here's an example:
app.get('/hello', (req, res) => res.write('Hello, world!'));

In this example, a GET request to '/hello' will be handled by the provided callback function, which writes 'Hello, world!' as the response.

  1. Middleware: Angel supports middleware, which are functions that can intercept and modify incoming HTTP requests before they reach the route handler. Middleware can be used for tasks like authentication, logging, error handling, etc. Here's an example:
app.use((req, res, next) {
  print('Request received: ${req.uri}');
  next();
});

In this example, the middleware function logs the incoming request URI before passing it on to the next middleware or route handler.

  1. Authentication: Angel provides built-in support for various authentication strategies, including JWT (JSON Web Tokens), OAuth, and session-based authentication. It makes it easy to secure your application and protect routes based on user roles and permissions.

  2. Database Integration: Angel seamlessly integrates with popular databases like MongoDB, PostgreSQL, MySQL, and more. It provides an ORM (Object-Relational Mapping) system called 'AngelORM' that simplifies database operations and allows you to define models and perform CRUD operations effortlessly.

  3. Templating: Angel supports various templating engines like Mustache, Handlebars, and Jade. This allows you to generate dynamic HTML pages by combining templates with data from your application.

  4. Real-time Communication: Angel includes support for real-time communication through WebSockets and HTTP/2 push. This enables you to build interactive applications that can push updates to clients in real-time.

  5. Testing: Angel provides a testing framework that makes it easy to write unit tests for your application. It includes utilities for mocking HTTP requests and responses, making it simple to test routes and middleware.

Examples of Angel Dart Framework​

Example 1: Hello World​

Let's start with a simple "Hello, world!" example using Angel:

import 'package:angel_framework/angel_framework.dart';

void main() {
  var app = Angel();

  app.get('/', (req, res) => res.write('Hello, world!'));

  app.start();
}

In this example, we create an instance of the Angel class and define a route handler for the root path ('/'). The handler simply writes 'Hello, world!' as the response. When you run this code and navigate to http://localhost:3000, you should see the message 'Hello, world!' displayed in your browser.

Example 2: Middleware​

Let's add a simple logging middleware to our application:

import 'package:angel_framework/angel_framework.dart';

void main() {
  var app = Angel();

  app.use((req, res, next) {
    print('Request received: ${req.uri}');
    next();
  });

  app.get('/', (req, res) => res.write('Hello, world!'));

  app.start();
}

In this example, we add a middleware function using the app.use method. The middleware logs the incoming request URI before passing it on to the next middleware or route handler. Try running this code, and you should see the request URI printed in the console every time a request is made to your application.

Example 3: Database Integration​

Let's integrate Angel with a MongoDB database using the 'angel_mongo' package:

import 'package:angel_framework/angel_framework.dart';
import 'package:angel_mongo/angel_mongo.dart';
import 'package:mongo_dart/mongo_dart.dart';

void main() async {
  var app = Angel();
  var connection = await MongoClient.connect('mongodb://localhost:27017/mydb');
  var db = connection.db('mydb');
  var collection = db.collection('users');

  app.get('/users', (req, res) async {
    var users = await collection.find().toList();
    res.json(users);
  });

  app.start();
}

In this example, we connect to a MongoDB database and retrieve a collection named 'users'. We define a route handler for '/users' that fetches all the users from the collection and returns them as a JSON response. Make sure you have MongoDB running locally, and you should be able to see the list of users when you navigate to http://localhost:3000/users.

Conclusion​

Angel is a powerful and flexible web framework for Dart that provides a wide range of features for building web applications. In this tutorial, we explored its introduction, history, features, and provided several examples to help you get started. You can find more information and documentation on the official Angel website: https://angel-dart.dev.