Angular Heroes ASP.NET Core REST Web App

This project contains an implementation of AngularJS Heroes sample app implemented using ASP.NET Core REST API backend that use SQL/JSON functionalities. AngularJs code is modified version of johnpapa Github sample project. In this example you will see how easily you can integrate Single-page apps implemented using Angular JS with SQL Server 2016 or Azure SQL Database using ASP.NET Core and JSON functions.

About this sample
Before you begin
Run this sample
Sample details
Disclaimers
Related links

About this sample

Applies to: SQL Server 2016 (or higher), Azure SQL Database
Key features: JSON functionalities in SQL Server 2016/Azure SQL Database.
Programming Language: JavaScript/AngularJS, C#, Transact-SQL
Authors: Jovan Popovic

Before you begin

To run this sample, you need the following prerequisites.

Software prerequisites:

SQL Server 2016 (or higher) or an Azure SQL Database
Visual Studio 2015 Update 3 (or higher) or Visual Studio Code Editor with the ASP.NET Core 1.0 (or higher)
.NET Core SDK for Windows or other operating systems
Node.js installation Node.js

Azure prerequisites:

Permission to create an Azure SQL Database

Run this sample

Create a database on SQL Server 2016 or Azure SQL Database.
From SQL Server Management Studio or Sql Server Data Tools connect to your SQL Server 2016 or Azure SQL database and execute sql-scripts/setup.sql script that will create and populate Hero table.
Add a connection string in appsettings.json or appsettings.development.json file. An example of the content of appsettings.development.json is shown in the following configuration:

{
  "ConnectionStrings": {
    "HeroDb": "Server=.;Database=HeroDb;Integrated Security=true"
  }
}

If your database is hosted on Azure you can add something like:

{
  "ConnectionStrings": {
    "HeroDb": "Server=<<SERVER>>.database.windows.net;Database=HeroDb;User Id=<<USER>>;Password=<<PASSWORD>>"
  }
}

Build and run sample

Restore NugetPackages using dotnet restore command. This command will create project.lock.json file.
Restore npm packages using npm install command lines. This command will download packages in node_modules folder.
Build project using dotnet build command executed from command line (from project root folder) or using Visual Studion 2015.
Run the sample app using dotnet run executed in the command prompt of the project root folder.

Sequence of commands is:

npm install
dotnet restore
dotnet build
dotnet run

Run the app

. Open /index.html Url to see heroes from database. See more details about functionalities in AngularJS Heroes sample app

Sample details

This sample application shows how to create REST API service is used as beckend for AngularJS app. Front-end code stored in wwwroot folder is modified johnpapa Github sample project. ASP.NET Core Web API is used to implement REST Service called by Hero front-end app. Service uses FOR JSON clause that is available in SQL Server 2016 and Azure SQL Database.

Disclaimers

The code included in this sample is not intended demonstrate some general guidance and architectural patterns for web development. It contains minimal code required to create REST API, and it does not use some patterns such as Repository. Sample uses built-in ASP.NET Core Dependency Injection mechanism; however, this is not prerequisite. You can easily modify this code to fit the architecture of your application.

You can find more information about the components that are used in this sample on these locations:

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

License

These samples and templates are all licensed under the MIT license. See the license.txt file in the root.

Questions

Email questions to: [sqlserversamples@microsoft.com](mailto: sqlserversamples@microsoft.com).

5.1 KiB Raw Blame History