mirror of
https://github.com/Microsoft/sql-server-samples.git
synced 2025-12-08 14:58:54 +00:00
Merge remote-tracking branch 'refs/remotes/Microsoft/master'
This commit is contained in:
Jovan Popovic
@@ -0,0 +1,12 @@
|
||||
*.xproj.user
|
||||
.vs/*
|
||||
.vscode/*
|
||||
bin/*
|
||||
node_modules/*
|
||||
obj/*
|
||||
*.sln
|
||||
*.log
|
||||
Properties/PublishProfiles/*
|
||||
appsettings.development.json
|
||||
project.lock.json
|
||||
wwwroot/libs/*
|
||||
@@ -0,0 +1,77 @@
|
||||
using Belgrade.SqlClient;
|
||||
using Microsoft.AspNetCore.Mvc;
|
||||
using System.Data.SqlClient;
|
||||
using System.IO;
|
||||
using System.Threading.Tasks;
|
||||
|
||||
// For more information on enabling Web API for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
|
||||
|
||||
namespace AngularHeroApp.Controllers
|
||||
{
|
||||
[Route("app/[controller]")]
|
||||
public class HeroesController : Controller
|
||||
{
|
||||
private readonly IQueryPipe SqlPipe;
|
||||
private readonly ICommand SqlCommand;
|
||||
|
||||
public HeroesController(ICommand sqlCommand, IQueryPipe sqlPipe)
|
||||
{
|
||||
this.SqlCommand = sqlCommand;
|
||||
this.SqlPipe = sqlPipe;
|
||||
}
|
||||
|
||||
// GET: app/heroes[?name=<<name>>]
|
||||
[HttpGet]
|
||||
public async Task Get(string name)
|
||||
{
|
||||
if(string.IsNullOrEmpty(name))
|
||||
await SqlPipe.Stream("select * from Hero for json path", Response.Body, "[]");
|
||||
else
|
||||
{
|
||||
var cmd = new SqlCommand(@"select * from Hero where name like @name for json path");
|
||||
cmd.Parameters.AddWithValue("name", "%"+name+"%");
|
||||
await SqlPipe.Stream(cmd, Response.Body, "[]");
|
||||
}
|
||||
}
|
||||
|
||||
// GET app/heroes/5
|
||||
[HttpGet("{id}")]
|
||||
public async Task Get(int id)
|
||||
{
|
||||
await SqlPipe.Stream("select * from Hero where id = "+ id +" FOR JSON PATH, WITHOUT_ARRAY_WRAPPER", Response.Body, "{}");
|
||||
}
|
||||
|
||||
// POST app/heroes
|
||||
[HttpPost]
|
||||
public async Task Post()
|
||||
{
|
||||
string hero = new StreamReader(Request.Body).ReadToEnd();
|
||||
var cmd = new SqlCommand(@"EXEC InsertHero @hero");
|
||||
cmd.Parameters.AddWithValue("hero", hero);
|
||||
await SqlPipe.Stream(cmd,Response.Body,"{}");
|
||||
}
|
||||
|
||||
// PUT app/heroes/5
|
||||
[HttpPut("{id}")]
|
||||
public async Task Put()
|
||||
{
|
||||
string hero = new StreamReader(Request.Body).ReadToEnd();
|
||||
var cmd = new SqlCommand(@"
|
||||
update Hero set
|
||||
name = json.name
|
||||
from openjson(@hero) with (id int, name nvarchar(40)) as json
|
||||
where Hero.id = json.id");
|
||||
cmd.Parameters.AddWithValue("hero", hero);
|
||||
await SqlCommand.ExecuteNonQuery(cmd);
|
||||
}
|
||||
|
||||
// DELETE app/heroes/5
|
||||
[HttpDelete("{id}")]
|
||||
public async Task Delete(int id)
|
||||
{
|
||||
var cmd = new SqlCommand(@"delete Hero where Hero.id = @id");
|
||||
cmd.Parameters.AddWithValue("id", id);
|
||||
await SqlCommand.ExecuteNonQuery(cmd);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<Project ToolsVersion="14.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
|
||||
<PropertyGroup>
|
||||
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">14.0</VisualStudioVersion>
|
||||
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
|
||||
</PropertyGroup>
|
||||
<Import Project="$(VSToolsPath)\DotNet\Microsoft.DotNet.Props" Condition="'$(VSToolsPath)' != ''" />
|
||||
<PropertyGroup Label="Globals">
|
||||
<ProjectGuid>c8014cba-1952-414a-b78e-f60f9e5c5625</ProjectGuid>
|
||||
<RootNamespace>ReactCommentsApp</RootNamespace>
|
||||
<BaseIntermediateOutputPath Condition="'$(BaseIntermediateOutputPath)'=='' ">.\obj</BaseIntermediateOutputPath>
|
||||
<OutputPath Condition="'$(OutputPath)'=='' ">.\bin\</OutputPath>
|
||||
<TargetFrameworkVersion>v4.6</TargetFrameworkVersion>
|
||||
</PropertyGroup>
|
||||
<PropertyGroup>
|
||||
<SchemaVersion>2.0</SchemaVersion>
|
||||
</PropertyGroup>
|
||||
<Import Project="$(VSToolsPath)\DotNet.Web\Microsoft.DotNet.Web.targets" Condition="'$(VSToolsPath)' != ''" />
|
||||
</Project>
|
||||
@@ -0,0 +1,21 @@
|
||||
using Microsoft.AspNetCore.Builder;
|
||||
using Microsoft.AspNetCore.Hosting;
|
||||
using System.IO;
|
||||
|
||||
namespace AngularHeroApp
|
||||
{
|
||||
public class Program
|
||||
{
|
||||
public static void Main(string[] args)
|
||||
{
|
||||
var host = new WebHostBuilder()
|
||||
.UseKestrel()
|
||||
.UseContentRoot(Directory.GetCurrentDirectory())
|
||||
.UseIISIntegration()
|
||||
.UseStartup<Startup>()
|
||||
.Build();
|
||||
|
||||
host.Run();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"iisSettings": {
|
||||
"windowsAuthentication": false,
|
||||
"anonymousAuthentication": true,
|
||||
"iisExpress": {
|
||||
"applicationUrl": "http://localhost:15194/",
|
||||
"sslPort": 0
|
||||
}
|
||||
},
|
||||
"profiles": {
|
||||
"IIS Express": {
|
||||
"commandName": "IISExpress",
|
||||
"launchBrowser": true,
|
||||
"launchUrl": "index.html",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
}
|
||||
},
|
||||
"HeroApp": {
|
||||
"commandName": "Project",
|
||||
"launchBrowser": true,
|
||||
"launchUrl": "http://localhost:5000/index.html",
|
||||
"environmentVariables": {
|
||||
"ASPNETCORE_ENVIRONMENT": "Development"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,118 @@
|
||||
# Angular Heroes ASP.NET Core REST Web App
|
||||
|
||||
This project contains an implementation of [AngularJS Heroes sample app](https://angular.io/docs/ts/latest/tutorial/) implemented using ASP.NET Core REST API backend that use SQL/JSON functionalities. AngularJs code is modified version of johnpapa [Github sample project](https://github.com/johnpapa/angular2-tour-of-heroes).
|
||||
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.
|
||||
|
||||
### Contents
|
||||
|
||||
[About this sample](#about-this-sample)<br/>
|
||||
[Before you begin](#before-you-begin)<br/>
|
||||
[Run this sample](#run-this-sample)<br/>
|
||||
[Sample details](#sample-details)<br/>
|
||||
[Disclaimers](#disclaimers)<br/>
|
||||
[Related links](#related-links)<br/>
|
||||
|
||||
<a name=about-this-sample></a>
|
||||
|
||||
## 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
|
||||
|
||||
<a name=before-you-begin></a>
|
||||
|
||||
## Before you begin
|
||||
|
||||
To run this sample, you need the following prerequisites.
|
||||
|
||||
**Software prerequisites:**
|
||||
|
||||
1. SQL Server 2016 (or higher) or an Azure SQL Database
|
||||
2. Visual Studio 2015 Update 3 (or higher) or Visual Studio Code Editor with the ASP.NET Core 1.0 (or higher)
|
||||
3. .NET Core SDK for [Windows](https://go.microsoft.com/fwlink/?LinkID=827524) or other [operating systems](https://www.microsoft.com/net/core)
|
||||
4. Node.js installation [Node.js](https://nodejs.org/en/download/)
|
||||
|
||||
**Azure prerequisites:**
|
||||
|
||||
1. Permission to create an Azure SQL Database
|
||||
|
||||
<a name=run-this-sample></a>
|
||||
|
||||
## Run this sample
|
||||
|
||||
1. Create a database on SQL Server 2016 or Azure SQL Database.
|
||||
|
||||
2. 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](sql-scripts/setup.sql) script that will create and populate **Hero** table.
|
||||
|
||||
3. 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
|
||||
|
||||
1. Restore NugetPackages using **dotnet restore** command. This command will create **project.lock.json** file.
|
||||
2. Restore npm packages using **npm install** command lines. This command will download packages in **node_modules** folder.
|
||||
3. Build project using **dotnet build** command executed from command line (from project root folder) or using Visual Studion 2015.
|
||||
4. 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](https://angular.io/docs/ts/latest/tutorial/)
|
||||
|
||||
<a name=sample-details></a>
|
||||
|
||||
## 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](https://github.com/johnpapa/angular2-tour-of-heroes).
|
||||
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.
|
||||
|
||||
<a name=disclaimers></a>
|
||||
|
||||
## 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.
|
||||
|
||||
<a name=related-links></a>
|
||||
|
||||
## Related Links
|
||||
|
||||
You can find more information about the components that are used in this sample on these locations:
|
||||
- [ASP.NET Core](http://www.asp.net/core).
|
||||
- [JSON Support in Sql Server](https://msdn.microsoft.com/en-us/library/dn921897.aspx).
|
||||
- [AngularJS Heroes sample app](https://angular.io/docs/ts/latest/tutorial/).
|
||||
- [Github sample project](https://github.com/johnpapa/angular2-tour-of-heroes).
|
||||
|
||||
## Code of Conduct
|
||||
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto: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).
|
||||
@@ -0,0 +1,64 @@
|
||||
using Belgrade.SqlClient;
|
||||
using Belgrade.SqlClient.SqlDb;
|
||||
using Microsoft.AspNetCore.Builder;
|
||||
using Microsoft.AspNetCore.Hosting;
|
||||
using Microsoft.AspNetCore.Http;
|
||||
using Microsoft.Extensions.Configuration;
|
||||
using Microsoft.Extensions.DependencyInjection;
|
||||
using Microsoft.Extensions.FileProviders;
|
||||
using Microsoft.Extensions.Logging;
|
||||
using System.Data.SqlClient;
|
||||
using System.IO;
|
||||
|
||||
namespace AngularHeroApp
|
||||
{
|
||||
public class Startup
|
||||
{
|
||||
public Startup(IHostingEnvironment env)
|
||||
{
|
||||
var builder = new ConfigurationBuilder()
|
||||
.SetBasePath(env.ContentRootPath)
|
||||
.AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
|
||||
.AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
|
||||
.AddEnvironmentVariables();
|
||||
Configuration = builder.Build();
|
||||
}
|
||||
|
||||
public IConfigurationRoot Configuration { get; }
|
||||
|
||||
// This method gets called by the runtime. Use this method to add services to the container.
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
string ConnString = Configuration["ConnectionStrings:HeroDb"];
|
||||
|
||||
if (ConnString == null)
|
||||
throw new System.Exception("Cannot read config: " + ConnString);
|
||||
services.AddTransient<IQueryPipe>( _=> new QueryPipe(new SqlConnection(ConnString)));
|
||||
services.AddTransient<ICommand>( _=> new Command(new SqlConnection(ConnString)));
|
||||
|
||||
// Add framework services.
|
||||
services.AddMvc();
|
||||
|
||||
}
|
||||
|
||||
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
|
||||
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
|
||||
{
|
||||
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
|
||||
loggerFactory.AddDebug();
|
||||
|
||||
app.UseMvc();
|
||||
app.UseStaticFiles();
|
||||
|
||||
// Expose node_modules as virtual folder
|
||||
// becasue AngularJS uses some libraries from node_modules folder.
|
||||
app.UseStaticFiles(new StaticFileOptions()
|
||||
{
|
||||
FileProvider =
|
||||
new PhysicalFileProvider(
|
||||
Path.Combine(Directory.GetCurrentDirectory(), @"node_modules")),
|
||||
RequestPath = new PathString("/node_modules")
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"Logging": {
|
||||
"IncludeScopes": false,
|
||||
"LogLevel": {
|
||||
"Default": "Debug",
|
||||
"System": "Information",
|
||||
"Microsoft": "Information"
|
||||
}
|
||||
},
|
||||
"ConnectionStrings": {
|
||||
"HeroDb": "Server=.;Database=TourOfHeroes;Integrated Security=true"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
{
|
||||
"name": "angular2-aspnetcore-sqlserver",
|
||||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
|
||||
"lite": "lite-server",
|
||||
"postinstall": "typings install",
|
||||
"tsc": "tsc",
|
||||
"tsc:w": "tsc -w",
|
||||
"typings": "typings"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"@angular/common": "~2.1.0",
|
||||
"@angular/compiler": "~2.1.0",
|
||||
"@angular/core": "~2.1.0",
|
||||
"@angular/forms": "~2.1.0",
|
||||
"@angular/http": "~2.1.0",
|
||||
"@angular/platform-browser": "~2.1.0",
|
||||
"@angular/platform-browser-dynamic": "~2.1.0",
|
||||
"@angular/router": "~3.1.0",
|
||||
"@angular/upgrade": "~2.1.0",
|
||||
"bootstrap": "^3.3.7",
|
||||
"core-js": "^2.4.1",
|
||||
"reflect-metadata": "^0.1.8",
|
||||
"rxjs": "5.0.0-beta.12",
|
||||
"systemjs": "0.19.39",
|
||||
"zone.js": "^0.6.25"
|
||||
},
|
||||
"devDependencies": {
|
||||
"gulp": "^3.9.1",
|
||||
"concurrently": "^3.0.0",
|
||||
"lite-server": "^2.2.2",
|
||||
"typescript": "^2.0.3",
|
||||
"typings": "^1.4.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"Belgrade.Sql.Client": "0.3.0",
|
||||
"Microsoft.AspNetCore.Mvc": "1.0.0",
|
||||
"Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
|
||||
"Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
|
||||
"Microsoft.AspNetCore.StaticFiles": "1.0.0",
|
||||
"Microsoft.Extensions.Configuration.EnvironmentVariables": "1.0.0",
|
||||
"Microsoft.Extensions.Configuration.FileExtensions": "1.0.0",
|
||||
"Microsoft.Extensions.Configuration.Json": "1.0.0",
|
||||
"Microsoft.Extensions.Logging": "1.0.0",
|
||||
"Microsoft.Extensions.Logging.Console": "1.0.0",
|
||||
"Microsoft.Extensions.Logging.Debug": "1.0.0",
|
||||
"System.Data.SqlClient": "4.1.0"
|
||||
},
|
||||
|
||||
"tools": {
|
||||
"Microsoft.AspNetCore.Server.IISIntegration.Tools": {
|
||||
"version": "1.0.0-preview1-final",
|
||||
"imports": "portable-net45+win8+dnxcore50"
|
||||
}
|
||||
},
|
||||
|
||||
"frameworks": {
|
||||
"netcoreapp1.0": {
|
||||
"dependencies": {
|
||||
"Microsoft.NETCore.App": {
|
||||
"version": "1.0.0",
|
||||
"type": "platform"
|
||||
}
|
||||
}
|
||||
},
|
||||
"net46": {}
|
||||
},
|
||||
|
||||
"buildOptions": {
|
||||
"emitEntryPoint": true,
|
||||
"preserveCompilationContext": true
|
||||
},
|
||||
|
||||
"publishOptions": {
|
||||
"include": [
|
||||
"wwwroot",
|
||||
"Views",
|
||||
"appsettings.json",
|
||||
"web.config"
|
||||
]
|
||||
},
|
||||
|
||||
"scripts": {
|
||||
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
use HeroDb;
|
||||
go
|
||||
|
||||
drop table if exists Hero;
|
||||
drop procedure if exists InsertHero;
|
||||
go
|
||||
|
||||
create table Hero (
|
||||
id int primary key identity,
|
||||
name nvarchar(40)
|
||||
);
|
||||
go
|
||||
|
||||
declare @heroes nvarchar(4000) =
|
||||
N'[
|
||||
{ "name": "Mr. Nice" },
|
||||
{ "name": "Narco" },
|
||||
{ "name": "Bombasto" },
|
||||
{ "name": "Celeritas" },
|
||||
{ "name": "Magneta" },
|
||||
{ "name": "RubberMan" },
|
||||
{ "name": "Dynama" },
|
||||
{ "name": "Dr IQ" },
|
||||
{ "name": "Magma" },
|
||||
{ "name": "Tornado" }
|
||||
]';
|
||||
|
||||
insert into Hero(name)
|
||||
select name
|
||||
from openjson(@heroes) with (name nvarchar(40));
|
||||
GO
|
||||
|
||||
CREATE PROCEDURE dbo.InsertHero(@hero nvarchar(4000))
|
||||
AS BEGIN
|
||||
|
||||
insert into Hero(name)
|
||||
select name
|
||||
from openjson(@hero) with (name nvarchar(40));
|
||||
|
||||
-- put generated id in @hero JSON object and return it back to client.
|
||||
select JSON_MODIFY(@hero, '$.id', @@IDENTITY)
|
||||
|
||||
END
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"compileOnSave": true,
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"sourceMap": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"removeComments": false,
|
||||
"noImplicitAny": false
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"globalDependencies": {
|
||||
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
|
||||
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
|
||||
"node": "registry:dt/node#6.0.0+20160909174046"
|
||||
}
|
||||
}
|
||||
+3052
File diff suppressed because it is too large
Load Diff
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"resolution": "main",
|
||||
"tree": {
|
||||
"src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/25e18b592470e3dddccc826fde2bb8e7610ef863/core-js/core-js.d.ts",
|
||||
"raw": "registry:dt/core-js#0.0.0+20160725163759",
|
||||
"typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/25e18b592470e3dddccc826fde2bb8e7610ef863/core-js/core-js.d.ts"
|
||||
}
|
||||
}
|
||||
+502
@@ -0,0 +1,502 @@
|
||||
// Generated by typings
|
||||
// Source: https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c49913aa9ea419ea46c1c684e488cf2a10303b1a/jasmine/jasmine.d.ts
|
||||
declare function describe(description: string, specDefinitions: () => void): void;
|
||||
declare function fdescribe(description: string, specDefinitions: () => void): void;
|
||||
declare function xdescribe(description: string, specDefinitions: () => void): void;
|
||||
|
||||
declare function it(expectation: string, assertion?: () => void, timeout?: number): void;
|
||||
declare function it(expectation: string, assertion?: (done: DoneFn) => void, timeout?: number): void;
|
||||
declare function fit(expectation: string, assertion?: () => void, timeout?: number): void;
|
||||
declare function fit(expectation: string, assertion?: (done: DoneFn) => void, timeout?: number): void;
|
||||
declare function xit(expectation: string, assertion?: () => void, timeout?: number): void;
|
||||
declare function xit(expectation: string, assertion?: (done: DoneFn) => void, timeout?: number): void;
|
||||
|
||||
/** If you call the function pending anywhere in the spec body, no matter the expectations, the spec will be marked pending. */
|
||||
declare function pending(reason?: string): void;
|
||||
|
||||
declare function beforeEach(action: () => void, timeout?: number): void;
|
||||
declare function beforeEach(action: (done: DoneFn) => void, timeout?: number): void;
|
||||
declare function afterEach(action: () => void, timeout?: number): void;
|
||||
declare function afterEach(action: (done: DoneFn) => void, timeout?: number): void;
|
||||
|
||||
declare function beforeAll(action: () => void, timeout?: number): void;
|
||||
declare function beforeAll(action: (done: DoneFn) => void, timeout?: number): void;
|
||||
declare function afterAll(action: () => void, timeout?: number): void;
|
||||
declare function afterAll(action: (done: DoneFn) => void, timeout?: number): void;
|
||||
|
||||
declare function expect(spy: Function): jasmine.Matchers;
|
||||
declare function expect(actual: any): jasmine.Matchers;
|
||||
|
||||
declare function fail(e?: any): void;
|
||||
/** Action method that should be called when the async work is complete */
|
||||
interface DoneFn extends Function {
|
||||
(): void;
|
||||
|
||||
/** fails the spec and indicates that it has completed. If the message is an Error, Error.message is used */
|
||||
fail: (message?: Error|string) => void;
|
||||
}
|
||||
|
||||
declare function spyOn(object: any, method: string): jasmine.Spy;
|
||||
|
||||
declare function runs(asyncMethod: Function): void;
|
||||
declare function waitsFor(latchMethod: () => boolean, failureMessage?: string, timeout?: number): void;
|
||||
declare function waits(timeout?: number): void;
|
||||
|
||||
declare namespace jasmine {
|
||||
|
||||
var clock: () => Clock;
|
||||
|
||||
function any(aclass: any): Any;
|
||||
function anything(): Any;
|
||||
function arrayContaining(sample: any[]): ArrayContaining;
|
||||
function objectContaining(sample: any): ObjectContaining;
|
||||
function createSpy(name: string, originalFn?: Function): Spy;
|
||||
function createSpyObj(baseName: string, methodNames: any[]): any;
|
||||
function createSpyObj<T>(baseName: string, methodNames: any[]): T;
|
||||
function pp(value: any): string;
|
||||
function getEnv(): Env;
|
||||
function addCustomEqualityTester(equalityTester: CustomEqualityTester): void;
|
||||
function addMatchers(matchers: CustomMatcherFactories): void;
|
||||
function stringMatching(str: string): Any;
|
||||
function stringMatching(str: RegExp): Any;
|
||||
|
||||
interface Any {
|
||||
|
||||
new (expectedClass: any): any;
|
||||
|
||||
jasmineMatches(other: any): boolean;
|
||||
jasmineToString(): string;
|
||||
}
|
||||
|
||||
// taken from TypeScript lib.core.es6.d.ts, applicable to CustomMatchers.contains()
|
||||
interface ArrayLike<T> {
|
||||
length: number;
|
||||
[n: number]: T;
|
||||
}
|
||||
|
||||
interface ArrayContaining {
|
||||
new (sample: any[]): any;
|
||||
|
||||
asymmetricMatch(other: any): boolean;
|
||||
jasmineToString(): string;
|
||||
}
|
||||
|
||||
interface ObjectContaining {
|
||||
new (sample: any): any;
|
||||
|
||||
jasmineMatches(other: any, mismatchKeys: any[], mismatchValues: any[]): boolean;
|
||||
jasmineToString(): string;
|
||||
}
|
||||
|
||||
interface Block {
|
||||
|
||||
new (env: Env, func: SpecFunction, spec: Spec): any;
|
||||
|
||||
execute(onComplete: () => void): void;
|
||||
}
|
||||
|
||||
interface WaitsBlock extends Block {
|
||||
new (env: Env, timeout: number, spec: Spec): any;
|
||||
}
|
||||
|
||||
interface WaitsForBlock extends Block {
|
||||
new (env: Env, timeout: number, latchFunction: SpecFunction, message: string, spec: Spec): any;
|
||||
}
|
||||
|
||||
interface Clock {
|
||||
install(): void;
|
||||
uninstall(): void;
|
||||
/** Calls to any registered callback are triggered when the clock is ticked forward via the jasmine.clock().tick function, which takes a number of milliseconds. */
|
||||
tick(ms: number): void;
|
||||
mockDate(date?: Date): void;
|
||||
}
|
||||
|
||||
interface CustomEqualityTester {
|
||||
(first: any, second: any): boolean;
|
||||
}
|
||||
|
||||
interface CustomMatcher {
|
||||
compare<T>(actual: T, expected: T): CustomMatcherResult;
|
||||
compare(actual: any, expected: any): CustomMatcherResult;
|
||||
}
|
||||
|
||||
interface CustomMatcherFactory {
|
||||
(util: MatchersUtil, customEqualityTesters: Array<CustomEqualityTester>): CustomMatcher;
|
||||
}
|
||||
|
||||
interface CustomMatcherFactories {
|
||||
[index: string]: CustomMatcherFactory;
|
||||
}
|
||||
|
||||
interface CustomMatcherResult {
|
||||
pass: boolean;
|
||||
message?: string;
|
||||
}
|
||||
|
||||
interface MatchersUtil {
|
||||
equals(a: any, b: any, customTesters?: Array<CustomEqualityTester>): boolean;
|
||||
contains<T>(haystack: ArrayLike<T> | string, needle: any, customTesters?: Array<CustomEqualityTester>): boolean;
|
||||
buildFailureMessage(matcherName: string, isNot: boolean, actual: any, ...expected: Array<any>): string;
|
||||
}
|
||||
|
||||
interface Env {
|
||||
setTimeout: any;
|
||||
clearTimeout: void;
|
||||
setInterval: any;
|
||||
clearInterval: void;
|
||||
updateInterval: number;
|
||||
|
||||
currentSpec: Spec;
|
||||
|
||||
matchersClass: Matchers;
|
||||
|
||||
version(): any;
|
||||
versionString(): string;
|
||||
nextSpecId(): number;
|
||||
addReporter(reporter: Reporter): void;
|
||||
execute(): void;
|
||||
describe(description: string, specDefinitions: () => void): Suite;
|
||||
// ddescribe(description: string, specDefinitions: () => void): Suite; Not a part of jasmine. Angular team adds these
|
||||
beforeEach(beforeEachFunction: () => void): void;
|
||||
beforeAll(beforeAllFunction: () => void): void;
|
||||
currentRunner(): Runner;
|
||||
afterEach(afterEachFunction: () => void): void;
|
||||
afterAll(afterAllFunction: () => void): void;
|
||||
xdescribe(desc: string, specDefinitions: () => void): XSuite;
|
||||
it(description: string, func: () => void): Spec;
|
||||
// iit(description: string, func: () => void): Spec; Not a part of jasmine. Angular team adds these
|
||||
xit(desc: string, func: () => void): XSpec;
|
||||
compareRegExps_(a: RegExp, b: RegExp, mismatchKeys: string[], mismatchValues: string[]): boolean;
|
||||
compareObjects_(a: any, b: any, mismatchKeys: string[], mismatchValues: string[]): boolean;
|
||||
equals_(a: any, b: any, mismatchKeys: string[], mismatchValues: string[]): boolean;
|
||||
contains_(haystack: any, needle: any): boolean;
|
||||
addCustomEqualityTester(equalityTester: CustomEqualityTester): void;
|
||||
addMatchers(matchers: CustomMatcherFactories): void;
|
||||
specFilter(spec: Spec): boolean;
|
||||
throwOnExpectationFailure(value: boolean): void;
|
||||
}
|
||||
|
||||
interface FakeTimer {
|
||||
|
||||
new (): any;
|
||||
|
||||
reset(): void;
|
||||
tick(millis: number): void;
|
||||
runFunctionsWithinRange(oldMillis: number, nowMillis: number): void;
|
||||
scheduleFunction(timeoutKey: any, funcToCall: () => void, millis: number, recurring: boolean): void;
|
||||
}
|
||||
|
||||
interface HtmlReporter {
|
||||
new (): any;
|
||||
}
|
||||
|
||||
interface HtmlSpecFilter {
|
||||
new (): any;
|
||||
}
|
||||
|
||||
interface Result {
|
||||
type: string;
|
||||
}
|
||||
|
||||
interface NestedResults extends Result {
|
||||
description: string;
|
||||
|
||||
totalCount: number;
|
||||
passedCount: number;
|
||||
failedCount: number;
|
||||
|
||||
skipped: boolean;
|
||||
|
||||
rollupCounts(result: NestedResults): void;
|
||||
log(values: any): void;
|
||||
getItems(): Result[];
|
||||
addResult(result: Result): void;
|
||||
passed(): boolean;
|
||||
}
|
||||
|
||||
interface MessageResult extends Result {
|
||||
values: any;
|
||||
trace: Trace;
|
||||
}
|
||||
|
||||
interface ExpectationResult extends Result {
|
||||
matcherName: string;
|
||||
passed(): boolean;
|
||||
expected: any;
|
||||
actual: any;
|
||||
message: string;
|
||||
trace: Trace;
|
||||
}
|
||||
|
||||
interface Trace {
|
||||
name: string;
|
||||
message: string;
|
||||
stack: any;
|
||||
}
|
||||
|
||||
interface PrettyPrinter {
|
||||
|
||||
new (): any;
|
||||
|
||||
format(value: any): void;
|
||||
iterateObject(obj: any, fn: (property: string, isGetter: boolean) => void): void;
|
||||
emitScalar(value: any): void;
|
||||
emitString(value: string): void;
|
||||
emitArray(array: any[]): void;
|
||||
emitObject(obj: any): void;
|
||||
append(value: any): void;
|
||||
}
|
||||
|
||||
interface StringPrettyPrinter extends PrettyPrinter {
|
||||
}
|
||||
|
||||
interface Queue {
|
||||
|
||||
new (env: any): any;
|
||||
|
||||
env: Env;
|
||||
ensured: boolean[];
|
||||
blocks: Block[];
|
||||
running: boolean;
|
||||
index: number;
|
||||
offset: number;
|
||||
abort: boolean;
|
||||
|
||||
addBefore(block: Block, ensure?: boolean): void;
|
||||
add(block: any, ensure?: boolean): void;
|
||||
insertNext(block: any, ensure?: boolean): void;
|
||||
start(onComplete?: () => void): void;
|
||||
isRunning(): boolean;
|
||||
next_(): void;
|
||||
results(): NestedResults;
|
||||
}
|
||||
|
||||
interface Matchers {
|
||||
|
||||
new (env: Env, actual: any, spec: Env, isNot?: boolean): any;
|
||||
|
||||
env: Env;
|
||||
actual: any;
|
||||
spec: Env;
|
||||
isNot?: boolean;
|
||||
message(): any;
|
||||
|
||||
toBe(expected: any, expectationFailOutput?: any): boolean;
|
||||
toEqual(expected: any, expectationFailOutput?: any): boolean;
|
||||
toMatch(expected: string | RegExp, expectationFailOutput?: any): boolean;
|
||||
toBeDefined(expectationFailOutput?: any): boolean;
|
||||
toBeUndefined(expectationFailOutput?: any): boolean;
|
||||
toBeNull(expectationFailOutput?: any): boolean;
|
||||
toBeNaN(): boolean;
|
||||
toBeTruthy(expectationFailOutput?: any): boolean;
|
||||
toBeFalsy(expectationFailOutput?: any): boolean;
|
||||
toHaveBeenCalled(): boolean;
|
||||
toHaveBeenCalledWith(...params: any[]): boolean;
|
||||
toHaveBeenCalledTimes(expected: number): boolean;
|
||||
toContain(expected: any, expectationFailOutput?: any): boolean;
|
||||
toBeLessThan(expected: number, expectationFailOutput?: any): boolean;
|
||||
toBeGreaterThan(expected: number, expectationFailOutput?: any): boolean;
|
||||
toBeCloseTo(expected: number, precision?: any, expectationFailOutput?: any): boolean;
|
||||
toThrow(expected?: any): boolean;
|
||||
toThrowError(message?: string | RegExp): boolean;
|
||||
toThrowError(expected?: new (...args: any[]) => Error, message?: string | RegExp): boolean;
|
||||
not: Matchers;
|
||||
|
||||
Any: Any;
|
||||
}
|
||||
|
||||
interface Reporter {
|
||||
reportRunnerStarting(runner: Runner): void;
|
||||
reportRunnerResults(runner: Runner): void;
|
||||
reportSuiteResults(suite: Suite): void;
|
||||
reportSpecStarting(spec: Spec): void;
|
||||
reportSpecResults(spec: Spec): void;
|
||||
log(str: string): void;
|
||||
}
|
||||
|
||||
interface MultiReporter extends Reporter {
|
||||
addReporter(reporter: Reporter): void;
|
||||
}
|
||||
|
||||
interface Runner {
|
||||
|
||||
new (env: Env): any;
|
||||
|
||||
execute(): void;
|
||||
beforeEach(beforeEachFunction: SpecFunction): void;
|
||||
afterEach(afterEachFunction: SpecFunction): void;
|
||||
beforeAll(beforeAllFunction: SpecFunction): void;
|
||||
afterAll(afterAllFunction: SpecFunction): void;
|
||||
finishCallback(): void;
|
||||
addSuite(suite: Suite): void;
|
||||
add(block: Block): void;
|
||||
specs(): Spec[];
|
||||
suites(): Suite[];
|
||||
topLevelSuites(): Suite[];
|
||||
results(): NestedResults;
|
||||
}
|
||||
|
||||
interface SpecFunction {
|
||||
(spec?: Spec): void;
|
||||
}
|
||||
|
||||
interface SuiteOrSpec {
|
||||
id: number;
|
||||
env: Env;
|
||||
description: string;
|
||||
queue: Queue;
|
||||
}
|
||||
|
||||
interface Spec extends SuiteOrSpec {
|
||||
|
||||
new (env: Env, suite: Suite, description: string): any;
|
||||
|
||||
suite: Suite;
|
||||
|
||||
afterCallbacks: SpecFunction[];
|
||||
spies_: Spy[];
|
||||
|
||||
results_: NestedResults;
|
||||
matchersClass: Matchers;
|
||||
|
||||
getFullName(): string;
|
||||
results(): NestedResults;
|
||||
log(arguments: any): any;
|
||||
runs(func: SpecFunction): Spec;
|
||||
addToQueue(block: Block): void;
|
||||
addMatcherResult(result: Result): void;
|
||||
expect(actual: any): any;
|
||||
waits(timeout: number): Spec;
|
||||
waitsFor(latchFunction: SpecFunction, timeoutMessage?: string, timeout?: number): Spec;
|
||||
fail(e?: any): void;
|
||||
getMatchersClass_(): Matchers;
|
||||
addMatchers(matchersPrototype: CustomMatcherFactories): void;
|
||||
finishCallback(): void;
|
||||
finish(onComplete?: () => void): void;
|
||||
after(doAfter: SpecFunction): void;
|
||||
execute(onComplete?: () => void): any;
|
||||
addBeforesAndAftersToQueue(): void;
|
||||
explodes(): void;
|
||||
spyOn(obj: any, methodName: string, ignoreMethodDoesntExist: boolean): Spy;
|
||||
removeAllSpies(): void;
|
||||
}
|
||||
|
||||
interface XSpec {
|
||||
id: number;
|
||||
runs(): void;
|
||||
}
|
||||
|
||||
interface Suite extends SuiteOrSpec {
|
||||
|
||||
new (env: Env, description: string, specDefinitions: () => void, parentSuite: Suite): any;
|
||||
|
||||
parentSuite: Suite;
|
||||
|
||||
getFullName(): string;
|
||||
finish(onComplete?: () => void): void;
|
||||
beforeEach(beforeEachFunction: SpecFunction): void;
|
||||
afterEach(afterEachFunction: SpecFunction): void;
|
||||
beforeAll(beforeAllFunction: SpecFunction): void;
|
||||
afterAll(afterAllFunction: SpecFunction): void;
|
||||
results(): NestedResults;
|
||||
add(suiteOrSpec: SuiteOrSpec): void;
|
||||
specs(): Spec[];
|
||||
suites(): Suite[];
|
||||
children(): any[];
|
||||
execute(onComplete?: () => void): void;
|
||||
}
|
||||
|
||||
interface XSuite {
|
||||
execute(): void;
|
||||
}
|
||||
|
||||
interface Spy {
|
||||
(...params: any[]): any;
|
||||
|
||||
identity: string;
|
||||
and: SpyAnd;
|
||||
calls: Calls;
|
||||
mostRecentCall: { args: any[]; };
|
||||
argsForCall: any[];
|
||||
wasCalled: boolean;
|
||||
}
|
||||
|
||||
interface SpyAnd {
|
||||
/** By chaining the spy with and.callThrough, the spy will still track all calls to it but in addition it will delegate to the actual implementation. */
|
||||
callThrough(): Spy;
|
||||
/** By chaining the spy with and.returnValue, all calls to the function will return a specific value. */
|
||||
returnValue(val: any): Spy;
|
||||
/** By chaining the spy with and.returnValues, all calls to the function will return specific values in order until it reaches the end of the return values list. */
|
||||
returnValues(...values: any[]): Spy;
|
||||
/** By chaining the spy with and.callFake, all calls to the spy will delegate to the supplied function. */
|
||||
callFake(fn: Function): Spy;
|
||||
/** By chaining the spy with and.throwError, all calls to the spy will throw the specified value. */
|
||||
throwError(msg: string): Spy;
|
||||
/** When a calling strategy is used for a spy, the original stubbing behavior can be returned at any time with and.stub. */
|
||||
stub(): Spy;
|
||||
}
|
||||
|
||||
interface Calls {
|
||||
/** By chaining the spy with calls.any(), will return false if the spy has not been called at all, and then true once at least one call happens. **/
|
||||
any(): boolean;
|
||||
/** By chaining the spy with calls.count(), will return the number of times the spy was called **/
|
||||
count(): number;
|
||||
/** By chaining the spy with calls.argsFor(), will return the arguments passed to call number index **/
|
||||
argsFor(index: number): any[];
|
||||
/** By chaining the spy with calls.allArgs(), will return the arguments to all calls **/
|
||||
allArgs(): any[];
|
||||
/** By chaining the spy with calls.all(), will return the context (the this) and arguments passed all calls **/
|
||||
all(): CallInfo[];
|
||||
/** By chaining the spy with calls.mostRecent(), will return the context (the this) and arguments for the most recent call **/
|
||||
mostRecent(): CallInfo;
|
||||
/** By chaining the spy with calls.first(), will return the context (the this) and arguments for the first call **/
|
||||
first(): CallInfo;
|
||||
/** By chaining the spy with calls.reset(), will clears all tracking for a spy **/
|
||||
reset(): void;
|
||||
}
|
||||
|
||||
interface CallInfo {
|
||||
/** The context (the this) for the call */
|
||||
object: any;
|
||||
/** All arguments passed to the call */
|
||||
args: any[];
|
||||
/** The return value of the call */
|
||||
returnValue: any;
|
||||
}
|
||||
|
||||
interface Util {
|
||||
inherit(childClass: Function, parentClass: Function): any;
|
||||
formatException(e: any): any;
|
||||
htmlEscape(str: string): string;
|
||||
argsToArray(args: any): any;
|
||||
extend(destination: any, source: any): any;
|
||||
}
|
||||
|
||||
interface JsApiReporter extends Reporter {
|
||||
|
||||
started: boolean;
|
||||
finished: boolean;
|
||||
result: any;
|
||||
messages: any;
|
||||
|
||||
new (): any;
|
||||
|
||||
suites(): Suite[];
|
||||
summarize_(suiteOrSpec: SuiteOrSpec): any;
|
||||
results(): any;
|
||||
resultsForSpec(specId: any): any;
|
||||
log(str: any): any;
|
||||
resultsForSpecs(specIds: any): any;
|
||||
summarizeResult_(result: any): any;
|
||||
}
|
||||
|
||||
interface Jasmine {
|
||||
Spec: Spec;
|
||||
clock: Clock;
|
||||
util: Util;
|
||||
}
|
||||
|
||||
export var HtmlReporter: HtmlReporter;
|
||||
export var HtmlSpecFilter: HtmlSpecFilter;
|
||||
export var DEFAULT_TIMEOUT_INTERVAL: number;
|
||||
}
|
||||
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"resolution": "main",
|
||||
"tree": {
|
||||
"src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c49913aa9ea419ea46c1c684e488cf2a10303b1a/jasmine/jasmine.d.ts",
|
||||
"raw": "registry:dt/jasmine#2.2.0+20160621224255",
|
||||
"typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/c49913aa9ea419ea46c1c684e488cf2a10303b1a/jasmine/jasmine.d.ts"
|
||||
}
|
||||
}
|
||||
+2960
File diff suppressed because it is too large
Load Diff
+8
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"resolution": "main",
|
||||
"tree": {
|
||||
"src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/4008a51db44dabcdc368097a39a01ab7a5f9587f/node/node.d.ts",
|
||||
"raw": "registry:dt/node#6.0.0+20160909174046",
|
||||
"typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/4008a51db44dabcdc368097a39a01ab7a5f9587f/node/node.d.ts"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
/// <reference path="globals/core-js/index.d.ts" />
|
||||
/// <reference path="globals/jasmine/index.d.ts" />
|
||||
/// <reference path="globals/node/index.d.ts" />
|
||||
@@ -0,0 +1,14 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<configuration>
|
||||
|
||||
<!--
|
||||
Configure your application settings in appsettings.json. Learn more at http://go.microsoft.com/fwlink/?LinkId=786380
|
||||
-->
|
||||
|
||||
<system.webServer>
|
||||
<handlers>
|
||||
<add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModule" resourceType="Unspecified"/>
|
||||
</handlers>
|
||||
<aspNetCore processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false"/>
|
||||
</system.webServer>
|
||||
</configuration>
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var router_1 = require('@angular/router');
|
||||
var dashboard_component_1 = require('./dashboard.component');
|
||||
var heroes_component_1 = require('./heroes.component');
|
||||
var hero_detail_component_1 = require('./hero-detail.component');
|
||||
var routes = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: '/dashboard',
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: dashboard_component_1.DashboardComponent
|
||||
},
|
||||
{
|
||||
path: 'detail/:id',
|
||||
component: hero_detail_component_1.HeroDetailComponent
|
||||
},
|
||||
{
|
||||
path: 'heroes',
|
||||
component: heroes_component_1.HeroesComponent
|
||||
}
|
||||
];
|
||||
var AppRoutingModule = (function () {
|
||||
function AppRoutingModule() {
|
||||
}
|
||||
AppRoutingModule = __decorate([
|
||||
core_1.NgModule({
|
||||
imports: [router_1.RouterModule.forRoot(routes)],
|
||||
exports: [router_1.RouterModule]
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppRoutingModule);
|
||||
return AppRoutingModule;
|
||||
}());
|
||||
exports.AppRoutingModule = AppRoutingModule;
|
||||
exports.routedComponents = [dashboard_component_1.DashboardComponent, heroes_component_1.HeroesComponent, hero_detail_component_1.HeroDetailComponent];
|
||||
//# sourceMappingURL=app-routing.module.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"app-routing.module.js","sourceRoot":"","sources":["app-routing.module.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAyB,eAAe,CAAC,CAAA;AACzC,uBAAqC,iBAAiB,CAAC,CAAA;AAEvD,oCAAmC,uBAAuB,CAAC,CAAA;AAC3D,iCAAgC,oBAAoB,CAAC,CAAA;AACrD,sCAAoC,yBAAyB,CAAC,CAAA;AAE9D,IAAM,MAAM,GAAW;IACrB;QACE,IAAI,EAAE,EAAE;QACR,UAAU,EAAE,YAAY;QACxB,SAAS,EAAE,MAAM;KAClB;IACD;QACE,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,wCAAkB;KAC9B;IACD;QACE,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,2CAAmB;KAC/B;IACD;QACE,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,kCAAe;KAC3B;CACF,CAAC;AAMF;IAAA;IAAgC,CAAC;IAJjC;QAAC,eAAQ,CAAC;YACR,OAAO,EAAE,CAAC,qBAAY,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACvC,OAAO,EAAE,CAAC,qBAAY,CAAC;SACxB,CAAC;;wBAAA;IAC8B,uBAAC;AAAD,CAAC,AAAjC,IAAiC;AAApB,wBAAgB,mBAAI,CAAA;AAEpB,wBAAgB,GAAG,CAAC,wCAAkB,EAAE,kCAAe,EAAE,2CAAmB,CAAC,CAAC"}
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
|
||||
import { DashboardComponent } from './dashboard.component';
|
||||
import { HeroesComponent } from './heroes.component';
|
||||
import { HeroDetailComponent } from './hero-detail.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
redirectTo: '/dashboard',
|
||||
pathMatch: 'full'
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: DashboardComponent
|
||||
},
|
||||
{
|
||||
path: 'detail/:id',
|
||||
component: HeroDetailComponent
|
||||
},
|
||||
{
|
||||
path: 'heroes',
|
||||
component: HeroesComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
|
||||
export const routedComponents = [DashboardComponent, HeroesComponent, HeroDetailComponent];
|
||||
@@ -0,0 +1,35 @@
|
||||
h1 {
|
||||
font-size: 1.2em;
|
||||
color: #999;
|
||||
color: #555;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
nav a {
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
background-color: #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
nav a:visited, a:link {
|
||||
color: #607D8B;
|
||||
}
|
||||
nav a:hover {
|
||||
color: #039be5;
|
||||
background-color: #CFD8DC;
|
||||
}
|
||||
nav a.router-link-active {
|
||||
color: #039be5;
|
||||
}
|
||||
.header-bar {
|
||||
background-color: rgb(0,120,215);
|
||||
height: 4px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var AppComponent = (function () {
|
||||
function AppComponent() {
|
||||
this.title = 'Tour of Heroes';
|
||||
}
|
||||
AppComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
template: "\n <h1>{{title}}</h1>\n <div class=\"header-bar\"></div>\n <nav>\n <a routerLink=\"/dashboard\" routerLinkActive=\"active\">Dashboard</a>\n <a routerLink=\"/heroes\" routerLinkActive=\"active\">Heroes</a>\n </nav>\n <router-outlet></router-outlet>\n ",
|
||||
styleUrls: ['app.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppComponent);
|
||||
return AppComponent;
|
||||
}());
|
||||
exports.AppComponent = AppComponent;
|
||||
//# sourceMappingURL=app.component.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA0B,eAAe,CAAC,CAAA;AAgB1C;IAAA;QACE,UAAK,GAAG,gBAAgB,CAAC;IAC3B,CAAC;IAhBD;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,sRAQT;YACD,SAAS,EAAE,CAAC,mBAAmB,CAAC;SACjC,CAAC;;oBAAA;IAGF,mBAAC;AAAD,CAAC,AAFD,IAEC;AAFY,oBAAY,eAExB,CAAA"}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-app',
|
||||
template: `
|
||||
<h1>{{title}}</h1>
|
||||
<div class="header-bar"></div>
|
||||
<nav>
|
||||
<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
|
||||
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
|
||||
</nav>
|
||||
<router-outlet></router-outlet>
|
||||
`,
|
||||
styleUrls: ['app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
title = 'Tour of Heroes';
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var platform_browser_1 = require('@angular/platform-browser');
|
||||
var forms_1 = require('@angular/forms');
|
||||
var http_1 = require('@angular/http');
|
||||
//import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
|
||||
//import { InMemoryDataService } from './in-memory-data.service';
|
||||
require('./rxjs-extensions');
|
||||
var app_component_1 = require('./app.component');
|
||||
var app_routing_module_1 = require('./app-routing.module');
|
||||
var hero_service_1 = require('./hero.service');
|
||||
var hero_search_component_1 = require('./hero-search.component');
|
||||
var AppModule = (function () {
|
||||
function AppModule() {
|
||||
}
|
||||
AppModule = __decorate([
|
||||
core_1.NgModule({
|
||||
imports: [
|
||||
platform_browser_1.BrowserModule,
|
||||
forms_1.FormsModule,
|
||||
app_routing_module_1.AppRoutingModule,
|
||||
http_1.HttpModule //,
|
||||
],
|
||||
declarations: [
|
||||
app_component_1.AppComponent,
|
||||
hero_search_component_1.HeroSearchComponent,
|
||||
app_routing_module_1.routedComponents
|
||||
],
|
||||
providers: [
|
||||
hero_service_1.HeroService
|
||||
],
|
||||
bootstrap: [app_component_1.AppComponent]
|
||||
}),
|
||||
__metadata('design:paramtypes', [])
|
||||
], AppModule);
|
||||
return AppModule;
|
||||
}());
|
||||
exports.AppModule = AppModule;
|
||||
//# sourceMappingURL=app.module.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"app.module.js","sourceRoot":"","sources":["app.module.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAyB,eAAe,CAAC,CAAA;AACzC,iCAA8B,2BAA2B,CAAC,CAAA;AAC1D,sBAA4B,gBAAgB,CAAC,CAAA;AAC7C,qBAA2B,eAAe,CAAC,CAAA;AAE3C,mEAAmE;AACnE,iEAAiE;AAEjE,QAAO,mBAAmB,CAAC,CAAA;AAC3B,8BAA6B,iBAAiB,CAAC,CAAA;AAC/C,mCAAmD,sBAAsB,CAAC,CAAA;AAC1E,6BAA4B,gBAAgB,CAAC,CAAA;AAC7C,sCAAoC,yBAAyB,CAAC,CAAA;AAoB9D;IAAA;IAAyB,CAAC;IAlB1B;QAAC,eAAQ,CAAC;YACR,OAAO,EAAE;gBACP,gCAAa;gBACb,mBAAW;gBACX,qCAAgB;gBAChB,iBAAU,CAAA,GAAG;aAEd;YACD,YAAY,EAAE;gBACZ,4BAAY;gBACZ,2CAAmB;gBACnB,qCAAgB;aACjB;YACD,SAAS,EAAE;gBACT,0BAAW;aACZ;YACD,SAAS,EAAE,CAAC,4BAAY,CAAC;SAC1B,CAAC;;iBAAA;IACuB,gBAAC;AAAD,CAAC,AAA1B,IAA0B;AAAb,iBAAS,YAAI,CAAA"}
|
||||
@@ -0,0 +1,33 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { HttpModule } from '@angular/http';
|
||||
|
||||
//import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
|
||||
//import { InMemoryDataService } from './in-memory-data.service';
|
||||
|
||||
import './rxjs-extensions';
|
||||
import { AppComponent } from './app.component';
|
||||
import { AppRoutingModule, routedComponents } from './app-routing.module';
|
||||
import { HeroService } from './hero.service';
|
||||
import { HeroSearchComponent } from './hero-search.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
BrowserModule,
|
||||
FormsModule,
|
||||
AppRoutingModule,
|
||||
HttpModule//,
|
||||
//InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 600 })
|
||||
],
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeroSearchComponent,
|
||||
routedComponents
|
||||
],
|
||||
providers: [
|
||||
HeroService
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
+67
@@ -0,0 +1,67 @@
|
||||
[class*='col-'] {
|
||||
float: left;
|
||||
}
|
||||
*, *:after, *:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h3 {
|
||||
text-align: center; margin-bottom: 0;
|
||||
}
|
||||
[class*='col-'] {
|
||||
padding-right: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
[class*='col-']:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
.grid {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.col-1-4 {
|
||||
width: 25%;
|
||||
}
|
||||
.module {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
color: #eee;
|
||||
max-height: 120px;
|
||||
min-width: 120px;
|
||||
background-color: #607D8B;
|
||||
background-color: rgb(0,120,215);
|
||||
border-radius: 2px;
|
||||
}
|
||||
h4 {
|
||||
position: relative;
|
||||
}
|
||||
.module:hover {
|
||||
background-color: #EEE;
|
||||
background-color: #CCC;
|
||||
cursor: pointer;
|
||||
color: #607d8b;
|
||||
}
|
||||
.grid-pad {
|
||||
padding: 10px 0;
|
||||
}
|
||||
.grid-pad > [class*='col-']:last-of-type {
|
||||
padding-right: 20px;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.module {
|
||||
font-size: 10px;
|
||||
max-height: 75px;
|
||||
}
|
||||
.col-1-4 {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.grid {
|
||||
margin: 0;
|
||||
}
|
||||
.module {
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
+9
@@ -0,0 +1,9 @@
|
||||
<h3>Top Heroes</h3>
|
||||
<div class="grid grid-pad">
|
||||
<div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
|
||||
<div class="module hero">
|
||||
<h4>{{hero.name}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hero-search></hero-search>
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var router_1 = require('@angular/router');
|
||||
var hero_service_1 = require('./hero.service');
|
||||
var DashboardComponent = (function () {
|
||||
function DashboardComponent(router, heroService) {
|
||||
this.router = router;
|
||||
this.heroService = heroService;
|
||||
this.heroes = [];
|
||||
}
|
||||
DashboardComponent.prototype.ngOnInit = function () {
|
||||
var _this = this;
|
||||
this.heroService.getHeroes()
|
||||
.then(function (heroes) { return _this.heroes = heroes.slice(1, 5); });
|
||||
};
|
||||
DashboardComponent.prototype.gotoDetail = function (hero) {
|
||||
var link = ['/detail', hero.id];
|
||||
this.router.navigate(link);
|
||||
};
|
||||
DashboardComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-dashboard',
|
||||
templateUrl: 'dashboard.component.html',
|
||||
styleUrls: ['dashboard.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [router_1.Router, hero_service_1.HeroService])
|
||||
], DashboardComponent);
|
||||
return DashboardComponent;
|
||||
}());
|
||||
exports.DashboardComponent = DashboardComponent;
|
||||
//# sourceMappingURL=dashboard.component.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"dashboard.component.js","sourceRoot":"","sources":["dashboard.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAClD,uBAAuB,iBAAiB,CAAC,CAAA;AAGzC,6BAA4B,gBAAgB,CAAC,CAAA;AAQ7C;IAGE,4BACU,MAAc,EACd,WAAwB;QADxB,WAAM,GAAN,MAAM,CAAQ;QACd,gBAAW,GAAX,WAAW,CAAa;QAJlC,WAAM,GAAW,EAAE,CAAC;IAKpB,CAAC;IAED,qCAAQ,GAAR;QAAA,iBAGC;QAFC,IAAI,CAAC,WAAW,CAAC,SAAS,EAAE;aACzB,IAAI,CAAC,UAAA,MAAM,IAAI,OAAA,KAAI,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAhC,CAAgC,CAAC,CAAC;IACtD,CAAC;IAED,uCAAU,GAAV,UAAW,IAAU;QACnB,IAAI,IAAI,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAtBH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,cAAc;YACxB,WAAW,EAAE,0BAA0B;YACvC,SAAS,EAAE,CAAC,yBAAyB,CAAC;SACvC,CAAC;;0BAAA;IAkBF,yBAAC;AAAD,CAAC,AAjBD,IAiBC;AAjBY,0BAAkB,qBAiB9B,CAAA"}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-dashboard',
|
||||
templateUrl: 'dashboard.component.html',
|
||||
styleUrls: ['dashboard.component.css']
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
heroes: Hero[] = [];
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private heroService: HeroService) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.heroService.getHeroes()
|
||||
.then(heroes => this.heroes = heroes.slice(1, 5));
|
||||
}
|
||||
|
||||
gotoDetail(hero: Hero): void {
|
||||
let link = ['/detail', hero.id];
|
||||
this.router.navigate(link);
|
||||
}
|
||||
}
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
label {
|
||||
display: inline-block;
|
||||
width: 3em;
|
||||
margin: .5em 0;
|
||||
color: #607D8B;
|
||||
color: rgb(0,120,215);
|
||||
font-weight: bold;
|
||||
}
|
||||
input {
|
||||
height: 2em;
|
||||
font-size: 1em;
|
||||
padding-left: .4em;
|
||||
}
|
||||
button {
|
||||
margin-top: 20px;
|
||||
font-family: Arial;
|
||||
background-color: #eee;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer; cursor: hand;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #cfd8dc;
|
||||
}
|
||||
button:disabled {
|
||||
background-color: #eee;
|
||||
color: #ccc;
|
||||
cursor: auto;
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
<div *ngIf="hero">
|
||||
<h2>{{hero.name}} details!</h2>
|
||||
<div>
|
||||
<label>id: </label>{{hero.id}}</div>
|
||||
<div>
|
||||
<label>name: </label>
|
||||
<input [(ngModel)]="hero.name" placeholder="name" />
|
||||
</div>
|
||||
<button (click)="goBack()">Back</button>
|
||||
<button (click)="save()">Save</button>
|
||||
</div>
|
||||
+74
@@ -0,0 +1,74 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var router_1 = require('@angular/router');
|
||||
var hero_1 = require('./hero');
|
||||
var hero_service_1 = require('./hero.service');
|
||||
var HeroDetailComponent = (function () {
|
||||
function HeroDetailComponent(heroService, route) {
|
||||
this.heroService = heroService;
|
||||
this.route = route;
|
||||
this.close = new core_1.EventEmitter();
|
||||
this.navigated = false; // true if navigated here
|
||||
}
|
||||
HeroDetailComponent.prototype.ngOnInit = function () {
|
||||
var _this = this;
|
||||
this.route.params.forEach(function (params) {
|
||||
if (params['id'] !== undefined) {
|
||||
var id = +params['id'];
|
||||
_this.navigated = true;
|
||||
_this.heroService.getHero(id)
|
||||
.then(function (hero) { return _this.hero = hero; });
|
||||
}
|
||||
else {
|
||||
_this.navigated = false;
|
||||
_this.hero = new hero_1.Hero();
|
||||
}
|
||||
});
|
||||
};
|
||||
HeroDetailComponent.prototype.save = function () {
|
||||
var _this = this;
|
||||
this.heroService
|
||||
.save(this.hero)
|
||||
.then(function (hero) {
|
||||
_this.hero = hero; // saved hero, w/ id if new
|
||||
_this.goBack(hero);
|
||||
})
|
||||
.catch(function (error) { return _this.error = error; }); // TODO: Display error message
|
||||
};
|
||||
HeroDetailComponent.prototype.goBack = function (savedHero) {
|
||||
if (savedHero === void 0) { savedHero = null; }
|
||||
this.close.emit(savedHero);
|
||||
if (this.navigated) {
|
||||
window.history.back();
|
||||
}
|
||||
};
|
||||
__decorate([
|
||||
core_1.Input(),
|
||||
__metadata('design:type', hero_1.Hero)
|
||||
], HeroDetailComponent.prototype, "hero", void 0);
|
||||
__decorate([
|
||||
core_1.Output(),
|
||||
__metadata('design:type', Object)
|
||||
], HeroDetailComponent.prototype, "close", void 0);
|
||||
HeroDetailComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-hero-detail',
|
||||
templateUrl: 'hero-detail.component.html',
|
||||
styleUrls: ['hero-detail.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [hero_service_1.HeroService, router_1.ActivatedRoute])
|
||||
], HeroDetailComponent);
|
||||
return HeroDetailComponent;
|
||||
}());
|
||||
exports.HeroDetailComponent = HeroDetailComponent;
|
||||
//# sourceMappingURL=hero-detail.component.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"hero-detail.component.js","sourceRoot":"","sources":["hero-detail.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA+D,eAAe,CAAC,CAAA;AAC/E,uBAAuC,iBAAiB,CAAC,CAAA;AAEzD,qBAAqB,QAAQ,CAAC,CAAA;AAC9B,6BAA4B,gBAAgB,CAAC,CAAA;AAQ7C;IAME,6BACU,WAAwB,EACxB,KAAqB;QADrB,gBAAW,GAAX,WAAW,CAAa;QACxB,UAAK,GAAL,KAAK,CAAgB;QANrB,UAAK,GAAG,IAAI,mBAAY,EAAE,CAAC;QAErC,cAAS,GAAG,KAAK,CAAC,CAAC,yBAAyB;IAK5C,CAAC;IAED,sCAAQ,GAAR;QAAA,iBAYC;QAXC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,UAAC,MAAc;YACvC,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC;gBAC/B,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBACvB,KAAI,CAAC,SAAS,GAAG,IAAI,CAAC;gBACtB,KAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC;qBACvB,IAAI,CAAC,UAAA,IAAI,IAAI,OAAA,KAAI,CAAC,IAAI,GAAG,IAAI,EAAhB,CAAgB,CAAC,CAAC;YACtC,CAAC;YAAC,IAAI,CAAC,CAAC;gBACN,KAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,KAAI,CAAC,IAAI,GAAG,IAAI,WAAI,EAAE,CAAC;YACzB,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,kCAAI,GAAJ;QAAA,iBAQC;QAPC,IAAI,CAAC,WAAW;aACX,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;aACf,IAAI,CAAC,UAAA,IAAI;YACR,KAAI,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,2BAA2B;YAC7C,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK,IAAI,OAAA,KAAI,CAAC,KAAK,GAAG,KAAK,EAAlB,CAAkB,CAAC,CAAC,CAAC,8BAA8B;IACzE,CAAC;IAED,oCAAM,GAAN,UAAO,SAAsB;QAAtB,yBAAsB,GAAtB,gBAAsB;QAC3B,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC3B,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;YAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAAC,CAAC;IAChD,CAAC;IArCD;QAAC,YAAK,EAAE;;qDAAA;IACR;QAAC,aAAM,EAAE;;sDAAA;IARX;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,gBAAgB;YAC1B,WAAW,EAAE,4BAA4B;YACzC,SAAS,EAAE,CAAC,2BAA2B,CAAC;SACzC,CAAC;;2BAAA;IAwCF,0BAAC;AAAD,CAAC,AAvCD,IAuCC;AAvCY,2BAAmB,sBAuC/B,CAAA"}
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { ActivatedRoute, Params } from '@angular/router';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-hero-detail',
|
||||
templateUrl: 'hero-detail.component.html',
|
||||
styleUrls: ['hero-detail.component.css']
|
||||
})
|
||||
export class HeroDetailComponent implements OnInit {
|
||||
@Input() hero: Hero;
|
||||
@Output() close = new EventEmitter();
|
||||
error: any;
|
||||
navigated = false; // true if navigated here
|
||||
|
||||
constructor(
|
||||
private heroService: HeroService,
|
||||
private route: ActivatedRoute) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.route.params.forEach((params: Params) => {
|
||||
if (params['id'] !== undefined) {
|
||||
let id = +params['id'];
|
||||
this.navigated = true;
|
||||
this.heroService.getHero(id)
|
||||
.then(hero => this.hero = hero);
|
||||
} else {
|
||||
this.navigated = false;
|
||||
this.hero = new Hero();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
save(): void {
|
||||
this.heroService
|
||||
.save(this.hero)
|
||||
.then(hero => {
|
||||
this.hero = hero; // saved hero, w/ id if new
|
||||
this.goBack(hero);
|
||||
})
|
||||
.catch(error => this.error = error); // TODO: Display error message
|
||||
}
|
||||
|
||||
goBack(savedHero: Hero = null): void {
|
||||
this.close.emit(savedHero);
|
||||
if (this.navigated) { window.history.back(); }
|
||||
}
|
||||
}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
.search-result{
|
||||
border-bottom: 1px solid gray;
|
||||
border-left: 1px solid gray;
|
||||
border-right: 1px solid gray;
|
||||
width:195px;
|
||||
height: 20px;
|
||||
padding: 5px;
|
||||
background-color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#search-box{
|
||||
width: 200px;
|
||||
height: 20px;
|
||||
border: 1px solid lightgray;
|
||||
}
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
<div id="search-component">
|
||||
<h4>Hero Search</h4>
|
||||
<input #searchBox id="search-box" (keyup)="search(searchBox.value)" />
|
||||
<div>
|
||||
<div *ngFor="let hero of heroes | async"
|
||||
(click)="gotoDetail(hero)" class="search-result" >
|
||||
{{hero.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+57
@@ -0,0 +1,57 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var router_1 = require('@angular/router');
|
||||
var Observable_1 = require('rxjs/Observable');
|
||||
var Subject_1 = require('rxjs/Subject');
|
||||
var hero_search_service_1 = require('./hero-search.service');
|
||||
var HeroSearchComponent = (function () {
|
||||
function HeroSearchComponent(heroSearchService, router) {
|
||||
this.heroSearchService = heroSearchService;
|
||||
this.router = router;
|
||||
this.searchTerms = new Subject_1.Subject();
|
||||
}
|
||||
HeroSearchComponent.prototype.search = function (term) {
|
||||
// Push a search term into the observable stream.
|
||||
this.searchTerms.next(term);
|
||||
};
|
||||
HeroSearchComponent.prototype.ngOnInit = function () {
|
||||
var _this = this;
|
||||
this.heroes = this.searchTerms
|
||||
.debounceTime(300) // wait for 300ms pause in events
|
||||
.distinctUntilChanged() // ignore if next search term is same as previous
|
||||
.switchMap(function (term) { return term // switch to new observable each time
|
||||
? _this.heroSearchService.search(term)
|
||||
: Observable_1.Observable.of([]); })
|
||||
.catch(function (error) {
|
||||
// TODO: real error handling
|
||||
console.log(error);
|
||||
return Observable_1.Observable.of([]);
|
||||
});
|
||||
};
|
||||
HeroSearchComponent.prototype.gotoDetail = function (hero) {
|
||||
var link = ['/detail', hero.id];
|
||||
this.router.navigate(link);
|
||||
};
|
||||
HeroSearchComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-search',
|
||||
templateUrl: 'hero-search.component.html',
|
||||
styleUrls: ['hero-search.component.css'],
|
||||
providers: [hero_search_service_1.HeroSearchService]
|
||||
}),
|
||||
__metadata('design:paramtypes', [hero_search_service_1.HeroSearchService, router_1.Router])
|
||||
], HeroSearchComponent);
|
||||
return HeroSearchComponent;
|
||||
}());
|
||||
exports.HeroSearchComponent = HeroSearchComponent;
|
||||
//# sourceMappingURL=hero-search.component.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"hero-search.component.js","sourceRoot":"","sources":["hero-search.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAClD,uBAAuB,iBAAiB,CAAC,CAAA;AACzC,2BAA2B,iBAAiB,CAAC,CAAA;AAC7C,wBAAwB,cAAc,CAAC,CAAA;AAEvC,oCAAkC,uBAAuB,CAAC,CAAA;AAU1D;IAIE,6BACU,iBAAoC,EACpC,MAAc;QADd,sBAAiB,GAAjB,iBAAiB,CAAmB;QACpC,WAAM,GAAN,MAAM,CAAQ;QAJhB,gBAAW,GAAG,IAAI,iBAAO,EAAU,CAAC;IAIhB,CAAC;IAE7B,oCAAM,GAAN,UAAO,IAAY;QACjB,iDAAiD;QACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC;IAED,sCAAQ,GAAR;QAAA,iBAcC;QAbC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW;aAC3B,YAAY,CAAC,GAAG,CAAC,CAAQ,iCAAiC;aAC1D,oBAAoB,EAAE,CAAG,iDAAiD;aAC1E,SAAS,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAG,qCAAqC;cAE3D,KAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC;cAEnC,uBAAU,CAAC,EAAE,CAAS,EAAE,CAAC,EAJV,CAIU,CAAC;aAC7B,KAAK,CAAC,UAAA,KAAK;YACV,4BAA4B;YAC5B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACnB,MAAM,CAAC,uBAAU,CAAC,EAAE,CAAS,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,wCAAU,GAAV,UAAW,IAAU;QACnB,IAAI,IAAI,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAvCH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,aAAa;YACvB,WAAW,EAAE,4BAA4B;YACzC,SAAS,EAAE,CAAC,2BAA2B,CAAC;YACxC,SAAS,EAAE,CAAC,uCAAiB,CAAC;SAC/B,CAAC;;2BAAA;IAkCF,0BAAC;AAAD,CAAC,AAjCD,IAiCC;AAjCY,2BAAmB,sBAiC/B,CAAA"}
|
||||
+49
@@ -0,0 +1,49 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import { Subject } from 'rxjs/Subject';
|
||||
|
||||
import { HeroSearchService } from './hero-search.service';
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'hero-search',
|
||||
templateUrl: 'hero-search.component.html',
|
||||
styleUrls: ['hero-search.component.css'],
|
||||
providers: [HeroSearchService]
|
||||
})
|
||||
export class HeroSearchComponent implements OnInit {
|
||||
heroes: Observable<Hero[]>;
|
||||
private searchTerms = new Subject<string>();
|
||||
|
||||
constructor(
|
||||
private heroSearchService: HeroSearchService,
|
||||
private router: Router) { }
|
||||
|
||||
search(term: string): void {
|
||||
// Push a search term into the observable stream.
|
||||
this.searchTerms.next(term);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.heroes = this.searchTerms
|
||||
.debounceTime(300) // wait for 300ms pause in events
|
||||
.distinctUntilChanged() // ignore if next search term is same as previous
|
||||
.switchMap(term => term // switch to new observable each time
|
||||
// return the http search observable
|
||||
? this.heroSearchService.search(term)
|
||||
// or the observable of empty heroes if no search term
|
||||
: Observable.of<Hero[]>([]))
|
||||
.catch(error => {
|
||||
// TODO: real error handling
|
||||
console.log(error);
|
||||
return Observable.of<Hero[]>([]);
|
||||
});
|
||||
}
|
||||
|
||||
gotoDetail(hero: Hero): void {
|
||||
let link = ['/detail', hero.id];
|
||||
this.router.navigate(link);
|
||||
}
|
||||
}
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var http_1 = require('@angular/http');
|
||||
var HeroSearchService = (function () {
|
||||
function HeroSearchService(http) {
|
||||
this.http = http;
|
||||
}
|
||||
HeroSearchService.prototype.search = function (term) {
|
||||
return this.http
|
||||
.get("app/heroes/?name=" + term)
|
||||
.map(function (r) { return r.json(); });
|
||||
};
|
||||
HeroSearchService = __decorate([
|
||||
core_1.Injectable(),
|
||||
__metadata('design:paramtypes', [http_1.Http])
|
||||
], HeroSearchService);
|
||||
return HeroSearchService;
|
||||
}());
|
||||
exports.HeroSearchService = HeroSearchService;
|
||||
//# sourceMappingURL=hero-search.service.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"hero-search.service.js","sourceRoot":"","sources":["hero-search.service.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA2B,eAAe,CAAC,CAAA;AAC3C,qBAA+B,eAAe,CAAC,CAAA;AAM/C;IACE,2BAAoB,IAAU;QAAV,SAAI,GAAJ,IAAI,CAAM;IAAI,CAAC;IAEnC,kCAAM,GAAN,UAAO,IAAY;QACjB,MAAM,CAAC,IAAI,CAAC,IAAI;aACb,GAAG,CAAC,sBAAoB,IAAM,CAAC;aAC/B,GAAG,CAAC,UAAC,CAAW,IAAK,OAAA,CAAC,CAAC,IAAI,EAAY,EAAlB,CAAkB,CAAC,CAAC;IAC9C,CAAC;IARH;QAAC,iBAAU,EAAE;;yBAAA;IASb,wBAAC;AAAD,CAAC,AARD,IAQC;AARY,yBAAiB,oBAQ7B,CAAA"}
|
||||
+16
@@ -0,0 +1,16 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Http, Response } from '@angular/http';
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Injectable()
|
||||
export class HeroSearchService {
|
||||
constructor(private http: Http) { }
|
||||
|
||||
search(term: string): Observable<Hero[]> {
|
||||
return this.http
|
||||
.get(`app/heroes/?name=${term}`)
|
||||
.map((r: Response) => r.json() as Hero[]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
"use strict";
|
||||
var Hero = (function () {
|
||||
function Hero() {
|
||||
}
|
||||
return Hero;
|
||||
}());
|
||||
exports.Hero = Hero;
|
||||
//# sourceMappingURL=hero.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"hero.js","sourceRoot":"","sources":["hero.ts"],"names":[],"mappings":";AAAA;IAAA;IAGA,CAAC;IAAD,WAAC;AAAD,CAAC,AAHD,IAGC;AAHY,YAAI,OAGhB,CAAA"}
|
||||
@@ -0,0 +1,81 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var http_1 = require('@angular/http');
|
||||
require('rxjs/add/operator/toPromise');
|
||||
var HeroService = (function () {
|
||||
function HeroService(http) {
|
||||
this.http = http;
|
||||
this.heroesUrl = 'app/heroes'; // URL to web api
|
||||
}
|
||||
HeroService.prototype.getHeroes = function () {
|
||||
return this.http
|
||||
.get(this.heroesUrl)
|
||||
.toPromise()
|
||||
.then(function (response) { return response.json(); })
|
||||
.catch(this.handleError);
|
||||
};
|
||||
HeroService.prototype.getHero = function (id) {
|
||||
return this.http
|
||||
.get(this.heroesUrl + '/' + id)
|
||||
.toPromise()
|
||||
.then(function (response) { return response.json(); })
|
||||
.catch(this.handleError);
|
||||
};
|
||||
HeroService.prototype.save = function (hero) {
|
||||
if (hero.id) {
|
||||
return this.put(hero);
|
||||
}
|
||||
return this.post(hero);
|
||||
};
|
||||
HeroService.prototype.delete = function (hero) {
|
||||
var headers = new http_1.Headers();
|
||||
headers.append('Content-Type', 'application/json');
|
||||
var url = this.heroesUrl + "/" + hero.id;
|
||||
return this.http
|
||||
.delete(url, { headers: headers })
|
||||
.toPromise()
|
||||
.catch(this.handleError);
|
||||
};
|
||||
// Add new Hero
|
||||
HeroService.prototype.post = function (hero) {
|
||||
var headers = new http_1.Headers({
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
return this.http
|
||||
.post(this.heroesUrl, JSON.stringify(hero), { headers: headers })
|
||||
.toPromise()
|
||||
.then(function (res) { return res.json(); })
|
||||
.catch(this.handleError);
|
||||
};
|
||||
// Update existing Hero
|
||||
HeroService.prototype.put = function (hero) {
|
||||
var headers = new http_1.Headers();
|
||||
headers.append('Content-Type', 'application/json');
|
||||
var url = this.heroesUrl + "/" + hero.id;
|
||||
return this.http
|
||||
.put(url, JSON.stringify(hero), { headers: headers })
|
||||
.toPromise()
|
||||
.then(function () { return hero; })
|
||||
.catch(this.handleError);
|
||||
};
|
||||
HeroService.prototype.handleError = function (error) {
|
||||
console.error('An error occurred', error);
|
||||
return Promise.reject(error.message || error);
|
||||
};
|
||||
HeroService = __decorate([
|
||||
core_1.Injectable(),
|
||||
__metadata('design:paramtypes', [http_1.Http])
|
||||
], HeroService);
|
||||
return HeroService;
|
||||
}());
|
||||
exports.HeroService = HeroService;
|
||||
//# sourceMappingURL=hero.service.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"hero.service.js","sourceRoot":"","sources":["hero.service.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAA2B,eAAe,CAAC,CAAA;AAC3C,qBAAwC,eAAe,CAAC,CAAA;AAExD,QAAO,6BAA6B,CAAC,CAAA;AAKrC;IAGE,qBAAoB,IAAU;QAAV,SAAI,GAAJ,IAAI,CAAM;QAFtB,cAAS,GAAG,YAAY,CAAC,CAAE,iBAAiB;IAElB,CAAC;IAEnC,+BAAS,GAAT;QACE,MAAM,CAAC,IAAI,CAAC,IAAI;aACb,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;aACnB,SAAS,EAAE;aACX,IAAI,CAAC,UAAA,QAAQ,IAAI,OAAA,QAAQ,CAAC,IAAI,EAAY,EAAzB,CAAyB,CAAC;aAC3C,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;IAED,6BAAO,GAAP,UAAQ,EAAU;QACd,MAAM,CAAC,IAAI,CAAC,IAAI;aACX,GAAG,CAAC,IAAI,CAAC,SAAS,GAAC,GAAG,GAAC,EAAE,CAAC;aAC1B,SAAS,EAAE;aACX,IAAI,CAAC,UAAA,QAAQ,IAAI,OAAA,QAAQ,CAAC,IAAI,EAAU,EAAvB,CAAuB,CAAC;aACzC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACjC,CAAC;IAED,0BAAI,GAAJ,UAAK,IAAU;QACb,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;YACZ,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QACxB,CAAC;QACD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC;IAED,4BAAM,GAAN,UAAO,IAAU;QACf,IAAI,OAAO,GAAG,IAAI,cAAO,EAAE,CAAC;QAC5B,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;QAEnD,IAAI,GAAG,GAAM,IAAI,CAAC,SAAS,SAAI,IAAI,CAAC,EAAI,CAAC;QAEzC,MAAM,CAAC,IAAI,CAAC,IAAI;aACb,MAAM,CAAC,GAAG,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;aACjC,SAAS,EAAE;aACX,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;IAED,eAAe;IACP,0BAAI,GAAZ,UAAa,IAAU;QACrB,IAAI,OAAO,GAAG,IAAI,cAAO,CAAC;YACxB,cAAc,EAAE,kBAAkB;SACnC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI;aACb,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;aAChE,SAAS,EAAE;aACX,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,IAAI,EAAE,EAAV,CAAU,CAAC;aACvB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;IAED,uBAAuB;IACf,yBAAG,GAAX,UAAY,IAAU;QACpB,IAAI,OAAO,GAAG,IAAI,cAAO,EAAE,CAAC;QAC5B,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC;QAEnD,IAAI,GAAG,GAAM,IAAI,CAAC,SAAS,SAAI,IAAI,CAAC,EAAI,CAAC;QAEzC,MAAM,CAAC,IAAI,CAAC,IAAI;aACb,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;aACpD,SAAS,EAAE;aACX,IAAI,CAAC,cAAM,OAAA,IAAI,EAAJ,CAAI,CAAC;aAChB,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;IAEO,iCAAW,GAAnB,UAAoB,KAAU;QAC5B,OAAO,CAAC,KAAK,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC;QAC1C,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC;IAChD,CAAC;IAvEH;QAAC,iBAAU,EAAE;;mBAAA;IAwEb,kBAAC;AAAD,CAAC,AAvED,IAuEC;AAvEY,mBAAW,cAuEvB,CAAA"}
|
||||
@@ -0,0 +1,80 @@
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Headers, Http, Response } from '@angular/http';
|
||||
|
||||
import 'rxjs/add/operator/toPromise';
|
||||
|
||||
import { Hero } from './hero';
|
||||
|
||||
@Injectable()
|
||||
export class HeroService {
|
||||
private heroesUrl = 'app/heroes'; // URL to web api
|
||||
|
||||
constructor(private http: Http) { }
|
||||
|
||||
getHeroes(): Promise<Hero[]> {
|
||||
return this.http
|
||||
.get(this.heroesUrl)
|
||||
.toPromise()
|
||||
.then(response => response.json() as Hero[])
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
getHero(id: number): Promise<Hero> {
|
||||
return this.http
|
||||
.get(this.heroesUrl+'/'+id)
|
||||
.toPromise()
|
||||
.then(response => response.json() as Hero)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
save(hero: Hero): Promise<Hero> {
|
||||
if (hero.id) {
|
||||
return this.put(hero);
|
||||
}
|
||||
return this.post(hero);
|
||||
}
|
||||
|
||||
delete(hero: Hero): Promise<Response> {
|
||||
let headers = new Headers();
|
||||
headers.append('Content-Type', 'application/json');
|
||||
|
||||
let url = `${this.heroesUrl}/${hero.id}`;
|
||||
|
||||
return this.http
|
||||
.delete(url, { headers: headers })
|
||||
.toPromise()
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
// Add new Hero
|
||||
private post(hero: Hero): Promise<Hero> {
|
||||
let headers = new Headers({
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
|
||||
return this.http
|
||||
.post(this.heroesUrl, JSON.stringify(hero), { headers: headers })
|
||||
.toPromise()
|
||||
.then(res => res.json())
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
// Update existing Hero
|
||||
private put(hero: Hero): Promise<Hero> {
|
||||
let headers = new Headers();
|
||||
headers.append('Content-Type', 'application/json');
|
||||
|
||||
let url = `${this.heroesUrl}/${hero.id}`;
|
||||
|
||||
return this.http
|
||||
.put(url, JSON.stringify(hero), { headers: headers })
|
||||
.toPromise()
|
||||
.then(() => hero)
|
||||
.catch(this.handleError);
|
||||
}
|
||||
|
||||
private handleError(error: any): Promise<any> {
|
||||
console.error('An error occurred', error);
|
||||
return Promise.reject(error.message || error);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export class Hero {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
.selected {
|
||||
background-color: #CFD8DC !important;
|
||||
background-color: rgb(0,120,215) !important;
|
||||
color: white;
|
||||
}
|
||||
.heroes {
|
||||
margin: 0 0 2em 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
width: 15em;
|
||||
}
|
||||
.heroes li {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
left: 0;
|
||||
background-color: #EEE;
|
||||
margin: .5em;
|
||||
padding: .3em 0;
|
||||
height: 1.6em;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.heroes li:hover {
|
||||
color: #607D8B;
|
||||
color: rgb(0,120,215);
|
||||
background-color: #DDD;
|
||||
left: .1em;
|
||||
}
|
||||
.heroes li.selected:hover {
|
||||
/*background-color: #BBD8DC !important;*/
|
||||
color: white;
|
||||
}
|
||||
.heroes .text {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
.heroes .badge {
|
||||
display: inline-block;
|
||||
font-size: small;
|
||||
color: white;
|
||||
padding: 0.8em 0.7em 0 0.7em;
|
||||
background-color: #607D8B;
|
||||
background-color: rgb(0,120,215);
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
top: -4px;
|
||||
height: 1.8em;
|
||||
margin-right: .8em;
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
button {
|
||||
font-family: Arial;
|
||||
background-color: #eee;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #cfd8dc;
|
||||
}
|
||||
.error {color:red;}
|
||||
button.delete-button{
|
||||
float:right;
|
||||
background-color: gray !important;
|
||||
background-color: rgb(216,59,1) !important;
|
||||
color:white;
|
||||
}
|
||||
+22
@@ -0,0 +1,22 @@
|
||||
<h2>My Heroes</h2>
|
||||
<ul class="heroes">
|
||||
<li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
|
||||
<span class="hero-element">
|
||||
<span class="badge">{{hero.id}}</span> {{hero.name}}
|
||||
</span>
|
||||
<button class="delete-button" (click)="deleteHero(hero, $event)">Delete</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="error" *ngIf="error">{{error}}</div>
|
||||
<button (click)="addHero()">Add New Hero</button>
|
||||
<div *ngIf="addingHero">
|
||||
<my-hero-detail (close)="close($event)"></my-hero-detail>
|
||||
</div>
|
||||
|
||||
<div *ngIf="selectedHero">
|
||||
<h2>
|
||||
{{selectedHero.name | uppercase}} is my hero
|
||||
</h2>
|
||||
<button (click)="gotoDetail()">View Details</button>
|
||||
</div>
|
||||
@@ -0,0 +1,72 @@
|
||||
"use strict";
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
var __metadata = (this && this.__metadata) || function (k, v) {
|
||||
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
||||
};
|
||||
var core_1 = require('@angular/core');
|
||||
var router_1 = require('@angular/router');
|
||||
var hero_service_1 = require('./hero.service');
|
||||
var HeroesComponent = (function () {
|
||||
function HeroesComponent(router, heroService) {
|
||||
this.router = router;
|
||||
this.heroService = heroService;
|
||||
this.addingHero = false;
|
||||
}
|
||||
HeroesComponent.prototype.getHeroes = function () {
|
||||
var _this = this;
|
||||
this.heroService
|
||||
.getHeroes()
|
||||
.then(function (heroes) { return _this.heroes = heroes; })
|
||||
.catch(function (error) { return _this.error = error; });
|
||||
};
|
||||
HeroesComponent.prototype.addHero = function () {
|
||||
this.addingHero = true;
|
||||
this.selectedHero = null;
|
||||
};
|
||||
HeroesComponent.prototype.close = function (savedHero) {
|
||||
this.addingHero = false;
|
||||
if (savedHero) {
|
||||
this.getHeroes();
|
||||
}
|
||||
};
|
||||
HeroesComponent.prototype.deleteHero = function (hero, event) {
|
||||
var _this = this;
|
||||
event.stopPropagation();
|
||||
this.heroService
|
||||
.delete(hero)
|
||||
.then(function (res) {
|
||||
_this.heroes = _this.heroes.filter(function (h) { return h !== hero; });
|
||||
if (_this.selectedHero === hero) {
|
||||
_this.selectedHero = null;
|
||||
}
|
||||
})
|
||||
.catch(function (error) { return _this.error = error; });
|
||||
};
|
||||
HeroesComponent.prototype.ngOnInit = function () {
|
||||
this.getHeroes();
|
||||
};
|
||||
HeroesComponent.prototype.onSelect = function (hero) {
|
||||
this.selectedHero = hero;
|
||||
this.addingHero = false;
|
||||
};
|
||||
HeroesComponent.prototype.gotoDetail = function () {
|
||||
this.router.navigate(['/detail', this.selectedHero.id]);
|
||||
};
|
||||
HeroesComponent = __decorate([
|
||||
core_1.Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-heroes',
|
||||
templateUrl: 'heroes.component.html',
|
||||
styleUrls: ['heroes.component.css']
|
||||
}),
|
||||
__metadata('design:paramtypes', [router_1.Router, hero_service_1.HeroService])
|
||||
], HeroesComponent);
|
||||
return HeroesComponent;
|
||||
}());
|
||||
exports.HeroesComponent = HeroesComponent;
|
||||
//# sourceMappingURL=heroes.component.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"heroes.component.js","sourceRoot":"","sources":["heroes.component.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,qBAAkC,eAAe,CAAC,CAAA;AAClD,uBAAuB,iBAAiB,CAAC,CAAA;AAGzC,6BAA4B,gBAAgB,CAAC,CAAA;AAQ7C;IAME,yBACU,MAAc,EACd,WAAwB;QADxB,WAAM,GAAN,MAAM,CAAQ;QACd,gBAAW,GAAX,WAAW,CAAa;QALlC,eAAU,GAAG,KAAK,CAAC;IAKmB,CAAC;IAEvC,mCAAS,GAAT;QAAA,iBAKC;QAJC,IAAI,CAAC,WAAW;aACb,SAAS,EAAE;aACX,IAAI,CAAC,UAAA,MAAM,IAAI,OAAA,KAAI,CAAC,MAAM,GAAG,MAAM,EAApB,CAAoB,CAAC;aACpC,KAAK,CAAC,UAAA,KAAK,IAAI,OAAA,KAAI,CAAC,KAAK,GAAG,KAAK,EAAlB,CAAkB,CAAC,CAAC;IACxC,CAAC;IAED,iCAAO,GAAP;QACE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;IAC3B,CAAC;IAED,+BAAK,GAAL,UAAM,SAAe;QACnB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QACxB,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;YAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QAAC,CAAC;IACtC,CAAC;IAED,oCAAU,GAAV,UAAW,IAAU,EAAE,KAAU;QAAjC,iBASC;QARC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,WAAW;aACb,MAAM,CAAC,IAAI,CAAC;aACZ,IAAI,CAAC,UAAA,GAAG;YACP,KAAI,CAAC,MAAM,GAAG,KAAI,CAAC,MAAM,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,KAAK,IAAI,EAAV,CAAU,CAAC,CAAC;YAClD,EAAE,CAAC,CAAC,KAAI,CAAC,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC;gBAAC,KAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YAAC,CAAC;QAC/D,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK,IAAI,OAAA,KAAI,CAAC,KAAK,GAAG,KAAK,EAAlB,CAAkB,CAAC,CAAC;IACxC,CAAC;IAED,kCAAQ,GAAR;QACE,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,kCAAQ,GAAR,UAAS,IAAU;QACjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;IAC1B,CAAC;IAED,oCAAU,GAAV;QACE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC;IAvDH;QAAC,gBAAS,CAAC;YACT,QAAQ,EAAE,MAAM,CAAC,EAAE;YACnB,QAAQ,EAAE,WAAW;YACrB,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,CAAC,sBAAsB,CAAC;SACpC,CAAC;;uBAAA;IAmDF,sBAAC;AAAD,CAAC,AAlDD,IAkDC;AAlDY,uBAAe,kBAkD3B,CAAA"}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
|
||||
import { Hero } from './hero';
|
||||
import { HeroService } from './hero.service';
|
||||
|
||||
@Component({
|
||||
moduleId: module.id,
|
||||
selector: 'my-heroes',
|
||||
templateUrl: 'heroes.component.html',
|
||||
styleUrls: ['heroes.component.css']
|
||||
})
|
||||
export class HeroesComponent implements OnInit {
|
||||
heroes: Hero[];
|
||||
selectedHero: Hero;
|
||||
addingHero = false;
|
||||
error: any;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private heroService: HeroService) { }
|
||||
|
||||
getHeroes(): void {
|
||||
this.heroService
|
||||
.getHeroes()
|
||||
.then(heroes => this.heroes = heroes)
|
||||
.catch(error => this.error = error);
|
||||
}
|
||||
|
||||
addHero(): void {
|
||||
this.addingHero = true;
|
||||
this.selectedHero = null;
|
||||
}
|
||||
|
||||
close(savedHero: Hero): void {
|
||||
this.addingHero = false;
|
||||
if (savedHero) { this.getHeroes(); }
|
||||
}
|
||||
|
||||
deleteHero(hero: Hero, event: any): void {
|
||||
event.stopPropagation();
|
||||
this.heroService
|
||||
.delete(hero)
|
||||
.then(res => {
|
||||
this.heroes = this.heroes.filter(h => h !== hero);
|
||||
if (this.selectedHero === hero) { this.selectedHero = null; }
|
||||
})
|
||||
.catch(error => this.error = error);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.getHeroes();
|
||||
}
|
||||
|
||||
onSelect(hero: Hero): void {
|
||||
this.selectedHero = hero;
|
||||
this.addingHero = false;
|
||||
}
|
||||
|
||||
gotoDetail(): void {
|
||||
this.router.navigate(['/detail', this.selectedHero.id]);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
"use strict";
|
||||
var platform_browser_dynamic_1 = require('@angular/platform-browser-dynamic');
|
||||
var app_module_1 = require('./app.module');
|
||||
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(app_module_1.AppModule)
|
||||
.then(function (success) { return console.log("Bootstrap success"); })
|
||||
.catch(function (error) { return console.log(error); });
|
||||
//# sourceMappingURL=main.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":";AAAA,yCAAuC,mCAAmC,CAAC,CAAA;AAE3E,2BAA0B,cAAc,CAAC,CAAA;AAEzC,iDAAsB,EAAE,CAAC,eAAe,CAAC,sBAAS,CAAC;KAChD,IAAI,CAAC,UAAA,OAAO,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,EAAhC,CAAgC,CAAC;KACjD,KAAK,CAAC,UAAA,KAAK,IAAI,OAAA,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAlB,CAAkB,CAAC,CAAC"}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.then(success => console.log(`Bootstrap success`))
|
||||
.catch(error => console.log(error));
|
||||
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
"use strict";
|
||||
// Observable class extensions
|
||||
require('rxjs/add/observable/of');
|
||||
require('rxjs/add/observable/throw');
|
||||
// Observable operators
|
||||
require('rxjs/add/operator/catch');
|
||||
require('rxjs/add/operator/debounceTime');
|
||||
require('rxjs/add/operator/distinctUntilChanged');
|
||||
require('rxjs/add/operator/do');
|
||||
require('rxjs/add/operator/filter');
|
||||
require('rxjs/add/operator/map');
|
||||
require('rxjs/add/operator/switchMap');
|
||||
//# sourceMappingURL=rxjs-extensions.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"rxjs-extensions.js","sourceRoot":"","sources":["rxjs-extensions.ts"],"names":[],"mappings":";AAAA,8BAA8B;AAC9B,QAAO,wBAAwB,CAAC,CAAA;AAChC,QAAO,2BAA2B,CAAC,CAAA;AAEnC,uBAAuB;AACvB,QAAO,yBAAyB,CAAC,CAAA;AACjC,QAAO,gCAAgC,CAAC,CAAA;AACxC,QAAO,wCAAwC,CAAC,CAAA;AAChD,QAAO,sBAAsB,CAAC,CAAA;AAC9B,QAAO,0BAA0B,CAAC,CAAA;AAClC,QAAO,uBAAuB,CAAC,CAAA;AAC/B,QAAO,6BAA6B,CAAC,CAAA"}
|
||||
@@ -0,0 +1,12 @@
|
||||
// Observable class extensions
|
||||
import 'rxjs/add/observable/of';
|
||||
import 'rxjs/add/observable/throw';
|
||||
|
||||
// Observable operators
|
||||
import 'rxjs/add/operator/catch';
|
||||
import 'rxjs/add/operator/debounceTime';
|
||||
import 'rxjs/add/operator/distinctUntilChanged';
|
||||
import 'rxjs/add/operator/do';
|
||||
import 'rxjs/add/operator/filter';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/switchMap';
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<base href="/">
|
||||
<title>Angular 2 Tour of Heroes</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- IE required polyfills, in this exact order -->
|
||||
<script src="node_modules/core-js/client/shim.min.js"></script>
|
||||
<script src="node_modules/zone.js/dist/zone.js"></script>
|
||||
<script src="node_modules/reflect-metadata/Reflect.js"></script>
|
||||
<script src="node_modules/systemjs/dist/system.src.js"></script>
|
||||
|
||||
<script>
|
||||
System.import('system-config.js').then(function () {
|
||||
System.import('main');
|
||||
}).catch(console.error.bind(console));
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<my-app>Loading...</my-app>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
h2 { color: #444; font-weight: lighter; }
|
||||
body { margin: 2em; }
|
||||
body, input[text], button { color: #888; font-family: Cambria, Georgia; }
|
||||
button { padding: 0.2em; font-size: 14px}
|
||||
* { font-family: Arial; }
|
||||
+32
@@ -0,0 +1,32 @@
|
||||
System.config({
|
||||
paths: {
|
||||
// paths serve as alias
|
||||
'npm:': 'node_modules/'
|
||||
},
|
||||
// map tells the System loader where to look for things
|
||||
map: {
|
||||
// our app is within the app folder
|
||||
'app': 'app',
|
||||
'main': 'app/main.js',
|
||||
// angular bundles
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
|
||||
// other libraries
|
||||
'rxjs': 'npm:rxjs',
|
||||
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
'app': { main: './main.js', defaultExtension: 'js' },
|
||||
'api': { defaultExtension: 'js' },
|
||||
'rxjs': { defaultExtension: 'js' },
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=system-config.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"system-config.js","sourceRoot":"","sources":["system-config.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,CAAC;IACZ,KAAK,EAAE;QACL,uBAAuB;QACvB,MAAM,EAAE,eAAe;KACxB;IACD,uDAAuD;IACvD,GAAG,EAAE;QACH,mCAAmC;QACnC,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,aAAa;QAErB,kBAAkB;QAClB,eAAe,EAAE,uCAAuC;QACxD,iBAAiB,EAAE,2CAA2C;QAC9D,mBAAmB,EAAE,+CAA+C;QACpE,2BAA2B,EAAE,+DAA+D;QAC5F,mCAAmC,EAAE,+EAA+E;QACpH,eAAe,EAAE,uCAAuC;QACxD,iBAAiB,EAAE,2CAA2C;QAC9D,gBAAgB,EAAE,yCAAyC;QAC3D,kBAAkB,EAAE,6CAA6C;QAEjE,kBAAkB;QAClB,MAAM,EAAuB,UAAU;QACvC,2BAA2B,EAAE,gEAAgE;KAC9F;IACD,oFAAoF;IACpF,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,gBAAgB,EAAE,IAAI,EAAE;QACpD,KAAK,EAAG,EAAE,gBAAgB,EAAG,IAAI,EAAE;QACnC,MAAM,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE;KAKnC;CACF,CAAC,CAAC"}
|
||||
@@ -0,0 +1,43 @@
|
||||
/**
|
||||
* System configuration for Angular samples
|
||||
* Adjust as necessary for your application needs.
|
||||
*/
|
||||
declare var System: any;
|
||||
|
||||
System.config({
|
||||
paths: {
|
||||
// paths serve as alias
|
||||
'npm:': 'node_modules/'
|
||||
},
|
||||
// map tells the System loader where to look for things
|
||||
map: {
|
||||
// our app is within the app folder
|
||||
'app': 'app',
|
||||
'main': 'app/main.js',
|
||||
|
||||
// angular bundles
|
||||
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
|
||||
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
|
||||
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
|
||||
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
|
||||
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
|
||||
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
|
||||
|
||||
// other libraries
|
||||
'rxjs': 'npm:rxjs',
|
||||
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
|
||||
},
|
||||
// packages tells the System loader how to load when no filename and/or no extension
|
||||
packages: {
|
||||
'app': { main: './main.js', defaultExtension: 'js' },
|
||||
'api' : { defaultExtension : 'js' },
|
||||
'rxjs': { defaultExtension: 'js' },
|
||||
|
||||
// barrels
|
||||
// 'app/core': { main: 'index'},
|
||||
// 'app/models': { main: 'index'},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user