• Stars
    star
    268
  • Rank 150,195 (Top 4 %)
  • Language
    JavaScript
  • Created about 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Example of Angular calling into a RESTful service

Angular RESTful Service Example

This project provides a simple look at getting started using Angular to call into a RESTful service. Simply clone the project or download and extract the .zip to get started.

Angular Concepts Covered

  • Using TypeScript classes and modules
  • Modules are loaded with System.js
  • Using Custom Components
  • Using the Http object for Ajax calls along with RxJS observables
  • Performing GET and PUT requests to the server
  • Working with Angular service classes for Ajax calls
  • Using Angular databinding and built-in directives

Software Requirements To Run Locally (there's a Docker option below as well)

  • Node.js 4.0.0 or higher
  • MongoDB 3.2 or higher

Running the Application Locally

  1. Install Node.js and MongoDB on your dev box

  2. Execute 'mongod' to start the MongoDB daemon if it's not already running

  3. Install Nodemon: npm install nodemon -g

  4. Open config/config.development.json and change the host from mongodb to localhost

  5. Run npm install to install app dependencies

  6. Run npm start to compile the TypeScript and start the server

  7. Browse to http://localhost:3000

Running the Application with Docker

  1. Install Docker for Mac/Windows or Docker Toolbox - https://www.docker.com/products/overview

  2. Open a command prompt window

  3. Run npm install

  4. Run npm run tsc:w to compile TypeScript to JavaScript locally (leave the window running). This is only needed when in "dev" mode.

  5. Open another command window and navigate to this application's root folder in the command window

  6. Run docker-compose build to build the images

  7. Run docker-compose up to run the containers

  8. Navigate to http://localhost:3000 if using Docker for Mac/Windows or http://192.168.99.100:3000 if using Docker Toolbox in a browser

  9. Live long and prosper

More Repositories

1

Angular-JumpStart

Angular and TypeScript JumpStart example application
TypeScript
1,527
star
2

angular-architecture

Examples of Angular Architecture Concepts
TypeScript
786
star
3

CustomerManager

CustomerManager AngularJS/BreezeJS Application with a custom route provider.
JavaScript
709
star
4

CustomerManagerStandard

Customer Manager AngularJS/BreezeJS Application.
JavaScript
648
star
5

Observable-Store

Observable Store provides a simple way to manage state in Angular, React, Vue.js and other front-end applications.
TypeScript
619
star
6

DockerAndKubernetesCourseCode

Course code for the Docker and Kubernetes course: https://codewithdan.com/products/docker-kubernetes
C#
350
star
7

TypeScriptDemos

A set of TypeScript demos showing various features of the language.
HTML
233
star
8

Angular-Docker-Microservices

Example of serving an Angular app to the browser using nginx. App calls Node.js/MongoDB and ASP.NET Core/PostgreSQL microservices.
C#
213
star
9

AngularIn20TypeScript

Simple AngularJS Applications with TypeScript
JavaScript
203
star
10

CodeWithDanDockerServices

Demonstration of using Docker and/or Kubernetes to orchestrate multiple services
JavaScript
197
star
11

AspNetCorePostgreSQLDockerApp

ASP.NET Core with PostgreSQL Docker App Demo
C#
193
star
12

ES2015Samples

A set of ECMAScript 2015 examples as well as a Gulp file that converts them to ES5 using Babel.
JavaScript
180
star
13

Angular-NodeJS-MongoDB-CustomersService

Code for the Integrating Angular with Node.js RESTful Services Pluralsight course.
TypeScript
162
star
14

Angular-Core-Concepts

Provides a simple demo application covering Angular core concepts (components, services, modules, routing)
TypeScript
160
star
15

NodeExpressMongoDBDockerApp

Node.js with MongoDB Docker App Demo
CSS
152
star
16

Angular-BareBones

Angular and TypeScript Bare Bones Project
TypeScript
149
star
17

AngularOverlay

AngularJS directive used to automatically intercept XHR requests and show an overlay and message in a web page.
JavaScript
147
star
18

Angular-Forms

Angular/TypeScript template-driven and reactive forms example.
TypeScript
122
star
19

AngularCLI-ASPNET-Core-CustomersService

Example of integrating Angular with ASP.NET Core RESTful Services
C#
93
star
20

Docker-for-Web-Developers

Code from the Docker for Web Developers Course on Pluralsight - https://www.pluralsight.com/courses/docker-web-development
HTML
84
star
21

Angular-ASPNET-Core-Seed

An Angular and ASP.NET Core Seed Project to simplify getting started with the two technologies.
TypeScript
77
star
22

AngularTypeScript

An Angular and TypeScript demo app that integrates with Azure AD and Office 365 cloud services.
TypeScript
72
star
23

Angular-ASPNET-Core-CustomersService

Angular and ASP.NET Core RESTful Services
C#
62
star
24

Angular-WebSockets

Example of using Angular services and RxJS observables with a WebSockets Server
TypeScript
60
star
25

typescript-fundamentals

Sample code from the TypeScript Fundamentals course on Pluralsight.com
TypeScript
55
star
26

ES6-Modules-Starter

Simple ES6 Modules starter project that uses Gulp, Babel and SystemJS
JavaScript
46
star
27

MasteringJavaScriptCourseCode

Code for the Mastering JavaScript course.
JavaScript
45
star
28

AngularCLI-NodeJS-MongoDB-CustomersService

Code for the Integrating Angular with Node.js RESTful Services Pluralsight course.
JavaScript
36
star
29

FluidAngular

Angular/Fluid demos
TypeScript
32
star
30

AngularWorkshopLabs

Angular and TypeScript Workshop Labs
TypeScript
31
star
31

ASP.NETCoreDemos

ASP.NET Core Demos
C#
29
star
32

Angular-Snippets

This VS Code extension adds Angular/TypeScript/HTML code snippets into your editor.
26
star
33

ASPNETCore-Sync-Async-EF

Demo app showing sync versus async calls with ASP.NET Core and Entity Framework Core. Also includes a simple Angular app that consumes the data.
C#
23
star
34

AccountAtAGlance

ASP.NET MVC, Entity Framework, Web API, jQuery, HTML5 application that demonstrates how multiple technologies can be used together.
JavaScript
23
star
35

AccountAtAGlance-ASPCore

ASP.NET Core MVC and Entity Framework Core Dashboard Application
JavaScript
22
star
36

Microservices-ASPNET-Core-Docker-Course

Code for Microservices, ASP.NET Core and Docker Training Course from https://codewithdan.com
C#
18
star
37

AngularAppDevCourseCode

Code used in the Angular Application Development course.
TypeScript
17
star
38

NodeJSEndToEndCourseCode

Lab code and samples for the Node.js End-to-End Development Course.
JavaScript
16
star
39

openai-acs-msgraph

Example of using Microsoft Graph Toolkit with Angular
TypeScript
16
star
40

So-You-Want-To-Be-A-Web-Developer

Code from the "So You Want To Be A Web Developer" workshop series.
HTML
13
star
41

AngularJSEndToEndCourseCode

Lab code and samples for the AngularJS End-to-End Development Course.
JavaScript
11
star
42

express-convention-routes

Convention-based routes for Express
JavaScript
10
star
43

AngularCustomDirectives

A few simple custom Angular directives for learning purposes.
JavaScript
10
star
44

CoreWebAPIAndAngular

Demonstration of using ASP.NET Core Web API features with Angular 2
C#
10
star
45

Getting-Started-With-TypeScript

JavaScript
8
star
46

M365EndToEnd

Microsoft 365 end-to-end application demo (SSO, Teams, bot, etc.)
JavaScript
8
star
47

ASP.NETCoreCourseCode

ASP.NET Core Course Code
HTML
7
star
48

React-Core-Concepts

Provides a simple demo application covering React core concepts.
JavaScript
7
star
49

angular-swapi

Simple example of using Angular to call into the Star Wars API (https://swapi.co)
TypeScript
7
star
50

NodeJSWorkshop

Node.js Samples
JavaScript
6
star
51

Angular-DynamicComponentDashboard

Example of using Angular to build a dynamic dashboard
TypeScript
6
star
52

AngularIn20JavaScript

Simple AngularJS Application with JavaScript
JavaScript
6
star
53

react-hooks-demos

Simple demos of using React hooks.
TypeScript
5
star
54

AdvancedCSCourseCode

Code for the Advanced C# Course
C#
5
star
55

FluidBrainstorm

TypeScript
5
star
56

AzureForDevelopersCourse

Code for the Azure for Web Developers instructor-led course - https://codewithdan.com/products/azure-for-developers
5
star
57

Timesheets

Old prototype app to convert
JavaScript
5
star
58

FluidVue

TypeScript
5
star
59

Angular-In120

Sample application and code used for the Angular 120-Minute JumpStart video course.
TypeScript
4
star
60

angular-todo-list-fluid

TypeScript
4
star
61

FluidFAST

Fluid demos using FAST web components
TypeScript
3
star
62

github-repo-stats

JavaScript
3
star
63

TailwindTraders-M365

LOB demo app for Teams/M365
TypeScript
3
star
64

HTML5CourseCode

HTML5/CSS3 Course Code
HTML
3
star
65

CopilotChallenge

Copilot challenges
JavaScript
2
star
66

React-Todos-With-Hooks

JavaScript
2
star
67

microsoft-cloud-services-builder

Visual builder tool to help find services and documentation across the Microsoft Cloud.
TypeScript
2
star
68

github-slideshow

A robot powered training repository ๐Ÿค–
Ruby
2
star
69

jQuery-Tips-And-Tricks

HTML
2
star
70

acs-voice-calling-quickstart

Example of getting started with Azure Communication Services voice calling.
JavaScript
2
star
71

Featured-Content

Application framework that can be used to feature and filter content.
TypeScript
2
star
72

jQueryCourseCode

Code for the Mastering jQuery course created by Wahlin Consulting.
HTML
1
star
73

GDClassCodeSept2016

C# and ASP.NET MVC Course Code Samples/Labs
JavaScript
1
star
74

Angular-HelloWorld

HTML
1
star
75

Teams-Webhooks-Connectors

Code from the Learn module located at https://docs.microsoft.com/en-us/learn/modules/msteams-webhooks-connectors/
TypeScript
1
star
76

React-Recoil-And-Hooks

Demonstration of using React Hooks with Recoil.
TypeScript
1
star