Giter Site home page Giter Site logo

angularplayground's Introduction

AngularPlayground

A playground to try out Angular 2.0, ASP.NET Core and Entity Framework Core. This project was initially created following the steps from the following blog posts by @chsakellsBlog:

I'm now working through the Angular 2 Book to get my head around Angular. You can see more about the book here. Check out the branch ng-book to see my progress.

Prerequisites

  • Visual Studio 2015 with Update 3 (Community will be fine) OR
  • A text editor with OmniSharp installed (eg. VS Code, or Atom)
  • .NET Core 1.0.1
  • SQL Server LocalDB
  • nodejs
  • Bower

Running the code in this project

1. Set up the Database

The database I'm using for this project is just LocalDB. Feel free to change this to SQL Server if you want. Connection info is stored in the appsettings.json file of Scheduler.API

  1. Open a command window within Scheduler.Data
  2. Run the following commands:
dotnet ef migrations add "initial"
dotnet ef database update

2. Run the API

There are two folders in the project. One folder consists of a Visual Studio Solution file with three projects:

  • Scheduler.Data
  • Scheduler.Model
  • Scheduler.API

These projects can be opened and built in Visual Studio by opening Scheduler.sln in src\Scheduler. You can also run the API using one of the following options:

Option 1: Running in IIS Express

If you're running Visual Studio, ensure the Scheduler.API project is set as your startup project, and run.

Note: Take a note of the address IISExpress uses to host the API project. You will need this for the next section.

Option 2: Running in Kestrel

Open a command prompt in the Scheduler.API folder and enter the following

dotnet restore
dotnet run

3. Run the SPA

There is another folder called Scheduler.SPA, which houses an app written in Angular 2.0 and TypeScript

Go to the file shared\utils\config.service.ts and update the following line:

this._apiURI = 'http://localhost:26372/api/';

to whatever the url of the API is on your machine.

Repeat the process for shared\services\data.service.ts

_baseUrl: string = 'http://localhost:26372/api/';

After any changes to your TypeScript files, transpile by hitting [CTRL]+[SHIFT]+[B]

To build Scheduler.SPA, run the following commands:

npm install
bower install

When the dependencies have installed, run the following:

npm run lite

Navigate to http://localhost:3000 and enjoy!

Roadmap

  • Get Kestrel working
  • Use NMockaroo to build mock domain objects
  • Build and run on Visual Studio Online
  • Host on Azure
  • Lots of playing around

Copyright

Source code based almost entirely on https://github.com/chsakell/angular2-features

Distributed under the MIT License.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.