{"id":13403061,"url":"https://github.com/RickStrahl/AlbumViewerVNext","last_synced_at":"2025-03-14T08:31:20.968Z","repository":{"id":22704165,"uuid":"26048177","full_name":"RickStrahl/AlbumViewerVNext","owner":"RickStrahl","description":"West Wind Album Viewer ASP.NET Core and Angular Sample","archived":false,"fork":false,"pushed_at":"2024-05-16T09:09:19.000Z","size":21246,"stargazers_count":507,"open_issues_count":5,"forks_count":356,"subscribers_count":59,"default_branch":"master","last_synced_at":"2025-03-12T16:56:26.529Z","etag":null,"topics":["angular","asp-net-core"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RickStrahl.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["RickStrahl"],"custom":"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=K677THUA2MJSE\u0026source=url"}},"created_at":"2014-11-01T10:47:49.000Z","updated_at":"2024-11-07T22:40:01.000Z","dependencies_parsed_at":"2024-10-25T23:29:11.419Z","dependency_job_id":"75b66096-b37d-475a-912d-89accd4ce5e0","html_url":"https://github.com/RickStrahl/AlbumViewerVNext","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2FAlbumViewerVNext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2FAlbumViewerVNext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2FAlbumViewerVNext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RickStrahl%2FAlbumViewerVNext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RickStrahl","download_url":"https://codeload.github.com/RickStrahl/AlbumViewerVNext/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243547338,"owners_count":20308690,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","asp-net-core"],"created_at":"2024-07-30T19:01:24.892Z","updated_at":"2025-03-14T08:31:20.928Z","avatar_url":"https://github.com/RickStrahl.png","language":"JavaScript","funding_links":["https://github.com/sponsors/RickStrahl","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=K677THUA2MJSE\u0026source=url"],"categories":["Sample Projects","JavaScript","angular","例子"],"sub_categories":["Workflow","工作流"],"readme":"# West Wind Album Viewer ASP.NET Core Sample\n\n**Sample Angular application demonstrating ASP.NET Core API features**\n\nThis is a sample **ASP.NET Core application** that *demonstrates* basic features of `ASP.NET` Core in an API backend application with an Angular frontend. The application allows browsing and editing of a list of albums and artists interactively.\n\n**On the Desktop:**\n\n![](AlbumViewer.png)\n\n**In a Mobile Web Browser:**\n\n![](AlbumViewerMobile.jpg)\n\n**Online Sample:**\n* [Live AlbumViewer Sample](https://albumviewer.west-wind.com)\n\n### ASP.NET Core Features\nThe **ASP.NET Core** Backend demonstrates:\n\n* Creating an API backend service\n* Isolating business logic and Controller code\n* Using a base Repository for business logic\n* Separating code into separate projects\n* Custom User Authentication\n* CORS Support\n* Using ASP.NET Core as a backend to an Angular 2.0 front end\n\nThe sample also includes a few Server Side Rendered MVC pages for browsing and viewing of albums and artists. I'll be adding the edit pages at a later point.\n\nVersion supported:  \n* **.NET Core 6.0**\n* **6.0 SDK or later**\n* **Visual Studio 2022 or later**\n\n### Angular Features\nThe **Angular** front end application demonstrates:\n\n* Page based Application\n* Mobile friendly, adaptive UI\n* Routing\n* Animations and Page Transitions\n* Client side and server side Authentication tracking\n* Client side and server side Validation\n* Managing Server Urls (dev/production)\n* Angular CLI Project\n\nVersion supported:  \n* **Angular 11.1.1**  \n* **Angular CLI 11.1**\n\n\n### Getting Started\nTo check out the application you can:\n\n* Run the Docker Image\n* Run everything local\n\n#### .NET Core API Configuration\nYou should just be able to clone this repo as is on either Windows or Mac (and probably Linux) and do:\n\n```\ncd \u003cBase Solution Folder\u003e\ndotnet restore\ncd .\\src\\AlbumViewerNetCore\ndotnet run\n```\n\nThen navigate to [http://localhost:5000](http://localhost:5000) to start the application. First launch might fail due a timeout due to the initial DB creation, but subsequent requests should work.\n\nIf you're running the application locally through IIS or Kestrel, the application should just work as is. By default it uses a SqLite data base that is created in the Web app's content (not Web) root. \n\nThe sample also works with SQL Server but you have to create the database for that to work and set the connection string in `appsettings.json`. \n\n\nTo switch between SqLite and Sql Server use the `useSqlLite` configuration settings:\n\n```json\n  \"Data\": {\n    \"AlbumViewer\": {\n      \"useSqLite\": \"true\",\n      \"SqlServerConnectionString\": \"server=.;database=AlbumViewer;integrated security=true;\",\n    } \n  },\n  //... other settings omitted\n}\n```  \n\nIn either case initial albums/artist data should auto-create the first time the app is run.\n\n##### Using SqLite\nSqLite will automatically create the database file in the content content root of the project (same folder as project.json). For this to work make sure that the account the Web application is running under has appropriate rights to create a new file and read/write to that file in the content folder.\n\n##### Using Sql Server\nTo use Sql Server create a new empty database and then point the connection string at the new database. Make sure the account the Web server is running under has rights to create tables and then read/write data.\n\nIn `appsettings.json` (or other configuration settings) set `Data.useSqLite: false` and set the `Data.SqlServerConnectionString` to a valid connection string to your database.\n\n```json\n{\n    \"Data\": {\n        \"useSqLite\": \"false\",\n        \"SqlServerConnectionString\": \"server=.;database=AlbumViewer;integrated security=true;MultipleActiveResultSets=true;App=AlbumViewer\"\n    },\n    ...\n```    \n\n#### To develop the AlbumViewer Angular example\nThe Angular front end sits in a separate AlbumViewerAngular project folder and is built separately from the ASP.NET Core application.\n\nThe sample however, does ship with pre-compiled .js files for the sample that have been copied into the Web project's **wwwroot** folder so the application will just run through IIS Express/IIS or Kestrel.\n\nMaking changes to the Angular application requires transpiling of the typescript source files. In order to make changes to the Angular 2 client sample run the following from a command window:\n\n```ps\ncd \u003cinstallFolder\u003e\\src\\AlbumViewerAngular\nnpm install\nng serve\n```\n\nthen navigate to http://localhost:4200 to run the application. Note this uses the WebPack development server rather than running through IIS Express or Kestrel for the front end assets - `index.html`, all css, images etc. are served from the development server and only API requests go through Kestrel/IIS.\n\nDepending on which port you run the ASP.NET Core application you may have to change the API server base URL which defaults to http://localhost:5000/ in the `app/business/appConfiguration.ts` file. The default is when running the development server that requests are routed to http://localhost:5000/ which is where Kestrel runs by default.\n\nOnce you've made your changes, you need to build the application's final output which builds into the API applications `wwwroot` folder.\n\nRun:\n\n```\nng build --prod\n```\n\nwhich creates the final transpiled bundles you can use to run through the ASP.NET Core application on http://localhost:5000/. \n\nI've changed the default output folder in `angular-cli.json` from the `.\\dist` folder to the ASP.NET Core app's `wwwroot` folder so that the application can run entirely served by Kestrel or IIS. It also still works using `ng serve` which uses whatever path is used in `angular-cli.json`.\n\n#### Run in Docker\nIf you just want to run the application from a docker file, you can use the following from a command line if Docker is installed:\n\n```ps\ndocker pull rickstrahl/albumviewer\ndocker run  -it -p 5004:80 --name albumviewer  rickstrahl/albumviewer\n```\n\nYou should then be able to navigate to:\n\nhttp://localhost:5004\n\nto run the application.\n\nTo later stop the container:\n\n```ps\n# docker stop albumviewer\n```\n\nor to restart:\n\n```\ndocker start albumviewer -i\n```\n\nThis runs a fixed container that was build with `dockerbuild.ps1` or `dockerbuild.sh`. You can update the application and create a new container using these files.\n\n#### Platforms \nCurrently the app has been tested to run under Windows and Mac and under Docker running Linux.\n\n**License:**  \nThis sample is licensed under MIT license. Use, play with, integrate code from\nthis repository as you see fit at your own risk. I try to update this code regularly to reflect the latest current builds of ASP.NET Core and Angular.\n\n**Warranty Disclaimer: No Warranty!**\n\nIN NO EVENT SHALL THE AUTHOR, OR ANY OTHER PARTY WHO MAY MODIFY\nAND/OR REDISTRIBUTE THIS PROGRAM AND DOCUMENTATION, BE LIABLE \nFOR ANY COMMERCIAL, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES\nARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM INCLUDING, \nBUT NOT LIMITED TO, LOSS OF DATA OR DATA BEING RENDERED INACCURATE\nOR LOSSES SUSTAINED BY YOU OR LOSSES SUSTAINED BY THIRD PARTIES OR\nA FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS, EVEN\nIF YOU OR OTHER PARTIES HAVE BEEN ADVISED OF THE POSSIBILITY OF \nSUCH DAMAGES.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRickStrahl%2FAlbumViewerVNext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRickStrahl%2FAlbumViewerVNext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRickStrahl%2FAlbumViewerVNext/lists"}