Rename Angular2Spa to AngularSpa, plus rephrase "Angular 2" as "Angular" in many places
This commit is contained in:
Родитель
a74b7aea6b
Коммит
85e59efa21
|
@ -46,7 +46,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "templates", "templates", "{
|
|||
EndProject
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KnockoutSpa", "templates\KnockoutSpa\KnockoutSpa.csproj", "{F60248B1-940E-43FB-BEA0-589362AA6320}"
|
||||
EndProject
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Angular2Spa", "templates\Angular2Spa\Angular2Spa.csproj", "{4D4B84C9-13F7-40CA-B05A-DC98FD6019AC}"
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AngularSpa", "templates\AngularSpa\AngularSpa.csproj", "{4D4B84C9-13F7-40CA-B05A-DC98FD6019AC}"
|
||||
EndProject
|
||||
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AureliaSpa", "templates\AureliaSpa\AureliaSpa.csproj", "{4D57B6E1-7141-48ED-959E-872BDD4A2F72}"
|
||||
EndProject
|
||||
|
|
14
README.md
14
README.md
|
@ -8,7 +8,7 @@ This project is part of ASP.NET Core. You can find samples, documentation and ge
|
|||
|
||||
`JavaScriptServices` is a set of client-side technologies for ASP.NET Core. It provides infrastructure that you'll find useful if you:
|
||||
|
||||
- Use Angular 2 / React / Vue / Aurelia / Knockout / etc.
|
||||
- Use Angular / React / Vue / Aurelia / Knockout / etc.
|
||||
- Build your client-side resources using Webpack.
|
||||
- Execute JavaScript on the server at runtime.
|
||||
|
||||
|
@ -31,7 +31,7 @@ It's cross-platform (Windows, Linux, or macOS) and works with .NET Core 1.0.1 or
|
|||
|
||||
## Creating new applications
|
||||
|
||||
If you want to build a brand-new ASP.NET Core app that uses Angular 2 / React / Knockout on the client, consider starting with the `aspnetcore-spa` generator. This lets you choose your client-side framework. It generates a starting point that includes applicable features such as Webpack dev middleware, server-side prerendering, and efficient production builds. It's much easier than configuring everything to work together manually!
|
||||
If you want to build a brand-new ASP.NET Core app that uses Angular / React / Knockout on the client, consider starting with the `aspnetcore-spa` generator. This lets you choose your client-side framework. It generates a starting point that includes applicable features such as Webpack dev middleware, server-side prerendering, and efficient production builds. It's much easier than configuring everything to work together manually!
|
||||
|
||||
To do this, install Yeoman and these generator templates:
|
||||
|
||||
|
@ -57,10 +57,10 @@ If you have an existing ASP.NET Core application, or if you just want to use the
|
|||
* Most applications developers don't need to use this directly, but you can do so if you want to implement your own functionality that involves calling Node.js code from .NET at runtime.
|
||||
* Find [documentation and usage examples here](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.NodeServices#microsoftaspnetcorenodeservices).
|
||||
* `Microsoft.AspNetCore.SpaServices`
|
||||
* This provides infrastructure that's generally useful when building Single Page Applications (SPAs) with technologies such as Angular 2 or React (for example, server-side prerendering and webpack middleware). Internally, it uses the `NodeServices` package to implement its features.
|
||||
* This provides infrastructure that's generally useful when building Single Page Applications (SPAs) with technologies such as Angular or React (for example, server-side prerendering and webpack middleware). Internally, it uses the `NodeServices` package to implement its features.
|
||||
* Find [documentation and usage examples here](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices#microsoftaspnetcorespaservices).
|
||||
* `Microsoft.AspNetCore.AngularServices`
|
||||
* This builds on the `SpaServices` package and includes features specific to Angular 2. Currently, this includes validation helpers.
|
||||
* This builds on the `SpaServices` package and includes features specific to Angular. Currently, this includes validation helpers.
|
||||
* The code is [here](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.AngularServices). You'll find a usage example for [the validation helper here](https://github.com/aspnet/JavaScriptServices/blob/dev/samples/angular/MusicStore/wwwroot/ng-app/components/admin/album-edit/album-edit.ts).
|
||||
|
||||
There was previously a `Microsoft.AspNetCore.ReactServices` but this is not currently needed - all applicable functionality is in `Microsoft.AspNetCore.SpaServices`, because it's sufficiently general. We might add a new `Microsoft.AspNetCore.ReactServices` package in the future if new React-specific requirements emerge.
|
||||
|
@ -73,7 +73,7 @@ Inside this repo, [the `templates` directory](https://github.com/aspnet/JavaScri
|
|||
|
||||
The [`samples` directory](https://github.com/aspnet/JavaScriptServices/tree/dev/samples) contains examples of:
|
||||
|
||||
- Using the JavaScript services family of packages with Angular 2 and React.
|
||||
- Using the JavaScript services family of packages with Angular and React.
|
||||
- A standalone `NodeServices` usage for runtime code transpilation and image processing.
|
||||
|
||||
**To run the samples:**
|
||||
|
@ -82,7 +82,7 @@ The [`samples` directory](https://github.com/aspnet/JavaScriptServices/tree/dev/
|
|||
* At the repo's root directory (the one containing `src`, `samples`, etc.), run `dotnet restore`
|
||||
* Change directory to the sample you want to run (for example, `cd samples/angular/MusicStore`)
|
||||
* Restore Node dependencies by running `npm install`
|
||||
* If you're trying to run the Angular 2 "Music Store" sample, then also run `gulp` (which you need to have installed globally). None of the other samples require this.
|
||||
* If you're trying to run the Angular "Music Store" sample, then also run `gulp` (which you need to have installed globally). None of the other samples require this.
|
||||
* Run the application (`dotnet run`)
|
||||
* Browse to [http://localhost:5000](http://localhost:5000)
|
||||
|
||||
|
@ -92,7 +92,7 @@ If you're interested in contributing to the various packages, samples, and proje
|
|||
|
||||
* Clone the repo
|
||||
* Run `dotnet restore` at the repo root dir
|
||||
* Go to whatever sample or template you want to run (for example, `cd templates/Angular2Spa`)
|
||||
* Go to whatever sample or template you want to run (for example, `cd templates/AngularSpa`)
|
||||
* Restore NPM dependencies (run `npm install`)
|
||||
* If the sample/template you're trying to run has a file called `webpack.config.vendor.js` at its root, run `webpack --config webpack.config.vendor.js`. It it has a file called `webpack.config.js`, run `webpack` (no args). You might need to install webpack first, by running `npm install -g webpack`.
|
||||
* Launch it (`dotnet run`)
|
||||
|
|
|
@ -14,7 +14,7 @@ export class AlbumDeletePrompt {
|
|||
public show(album: models.Album) {
|
||||
this.album = album;
|
||||
|
||||
// Consider rewriting this using Angular 2's "Renderer" API so as to avoid direct DOM access
|
||||
// Consider rewriting this using Angular's "Renderer" API so as to avoid direct DOM access
|
||||
(<any>window).jQuery(".modal", this._elementRef.nativeElement).modal();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,8 +2,8 @@ export default function (params: any): Promise<{ html: string, globals?: any }>
|
|||
return new Promise((resolve, reject) => {
|
||||
|
||||
// Here, you could put any logic that synchronously or asynchronously prerenders
|
||||
// your SPA components. For example, see the boot-server.ts files in the Angular2Spa
|
||||
// and ReactReduxSpa templates for ways to prerender Angular 2 and React components.
|
||||
// your SPA components. For example, see the boot-server.ts files in the AngularSpa
|
||||
// and ReactReduxSpa templates for ways to prerender Angular and React components.
|
||||
//
|
||||
// If you wanted, you could use a property on the 'params.data' object to specify
|
||||
// which SPA component or template to render.
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<Import Project="..\..\build\common.props" />
|
||||
|
||||
<PropertyGroup>
|
||||
<Description>Helpers for building Angular 2 applications on ASP.NET Core.</Description>
|
||||
<Description>Helpers for building Angular applications on ASP.NET Core.</Description>
|
||||
<TargetFrameworks>net451;netstandard1.6</TargetFrameworks>
|
||||
<PackageTags>aspnetcore;aspnetcoremvc;nodeservices</PackageTags>
|
||||
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
|
||||
|
|
|
@ -10,7 +10,7 @@ using Newtonsoft.Json;
|
|||
namespace Microsoft.AspNetCore.AngularServices
|
||||
{
|
||||
/// <summary>
|
||||
/// Helpers for prepopulating Angular 2's 'http' service with data.
|
||||
/// Helpers for prepopulating Angular's 'http' service with data.
|
||||
/// </summary>
|
||||
public static class PrimeCacheHelper
|
||||
{
|
||||
|
|
|
@ -10,7 +10,7 @@ This NuGet package provides a fast and robust way to invoke Node.js code from a
|
|||
It is the underlying mechanism supporting the following packages:
|
||||
|
||||
* [`Microsoft.AspNetCore.SpaServices`](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.SpaServices) - builds on NodeServices, adding functionality commonly used in Single Page Applications, such as server-side prerendering, webpack middleware, and integration between server-side and client-side routing.
|
||||
* [`Microsoft.AspNetCore.AngularServices`](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.AngularServices) and [`Microsoft.AspNetCore.ReactServices`](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.ReactServices) - these build on `SpaServices`, adding helpers specific to Angular 2 and React, such as cache priming and integrating server-side and client-side validation
|
||||
* [`Microsoft.AspNetCore.AngularServices`](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.AngularServices) and [`Microsoft.AspNetCore.ReactServices`](https://github.com/aspnet/JavaScriptServices/tree/dev/src/Microsoft.AspNetCore.ReactServices) - these build on `SpaServices`, adding helpers specific to Angular and React, such as cache priming and integrating server-side and client-side validation
|
||||
|
||||
### Requirements
|
||||
|
||||
|
@ -32,7 +32,7 @@ For .NET Framework apps:
|
|||
|
||||
* `nuget install Microsoft.AspNetCore.NodeServices`
|
||||
|
||||
### Do you just want to build an ASP.NET Core app with Angular 2 / React / Knockout / etc.?
|
||||
### Do you just want to build an ASP.NET Core app with Angular / React / Knockout / etc.?
|
||||
|
||||
In that case, you don't need to use NodeServices directly (or install it manually). You can either:
|
||||
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
# Microsoft.AspNetCore.SpaServices
|
||||
|
||||
If you're building an ASP.NET Core application, and want to use Angular 2, React, Knockout, or another single-page app (SPA) framework, this NuGet package contains useful infrastructure for you.
|
||||
If you're building an ASP.NET Core application, and want to use Angular, React, Knockout, or another single-page app (SPA) framework, this NuGet package contains useful infrastructure for you.
|
||||
|
||||
This package enables:
|
||||
|
||||
* [**Server-side prerendering**](#server-side-prerendering) for *universal* (a.k.a. *isomorphic*) applications, where your Angular 2 / React / etc. components are first rendered on the server, and then transferred to the client where execution continues
|
||||
* [**Server-side prerendering**](#server-side-prerendering) for *universal* (a.k.a. *isomorphic*) applications, where your Angular / React / etc. components are first rendered on the server, and then transferred to the client where execution continues
|
||||
* [**Webpack middleware**](#webpack-dev-middleware) so that, during development, any webpack-built resources will be generated on demand, without you having to run webpack manually or compile files to disk
|
||||
* [**Hot module replacement**](#webpack-hot-module-replacement) so that, during development, your code and markup changes will be pushed to your browser and updated in the running application automatically, without even needing to reload the page
|
||||
* [**Routing helpers**](#routing-helper-mapspafallbackroute) for integrating server-side routing with client-side routing
|
||||
|
@ -42,9 +42,9 @@ Also, if you want to debug projects created with the aspnetcore-spa generator, s
|
|||
|
||||
## Server-side prerendering
|
||||
|
||||
The `SpaServices` package isn't tied to any particular client-side framework, and it doesn't force you to set up your client-side application in any one particular style. So, `SpaServices` doesn't contain hard-coded logic for rendering Angular 2 / React / etc. components.
|
||||
The `SpaServices` package isn't tied to any particular client-side framework, and it doesn't force you to set up your client-side application in any one particular style. So, `SpaServices` doesn't contain hard-coded logic for rendering Angular / React / etc. components.
|
||||
|
||||
Instead, what `SpaServices` offers is ASP.NET Core APIs that know how to invoke a JavaScript function that you supply, passing through context information that you'll need for server-side prerendering, and then injects the resulting HTML string into your rendered page. In this document, you'll find examples of setting this up to render Angular 2 and React components.
|
||||
Instead, what `SpaServices` offers is ASP.NET Core APIs that know how to invoke a JavaScript function that you supply, passing through context information that you'll need for server-side prerendering, and then injects the resulting HTML string into your rendered page. In this document, you'll find examples of setting this up to render Angular and React components.
|
||||
|
||||
### 1. Enable the asp-prerender-* tag helpers
|
||||
|
||||
|
@ -86,7 +86,7 @@ module.exports = prerendering.createServerRenderer(function(params) {
|
|||
|
||||
If you try running your app now, you should see the HTML snippet generated by your JavaScript getting injected into your page.
|
||||
|
||||
As you can see, your JavaScript code receives context information (such as the URL being requested), and returns a `Promise` so that it can asynchronously supply the markup to be injected into the page. You can put whatever logic you like here, but typically you'll want to execute a component from your Angular 2 / React / etc. application.
|
||||
As you can see, your JavaScript code receives context information (such as the URL being requested), and returns a `Promise` so that it can asynchronously supply the markup to be injected into the page. You can put whatever logic you like here, but typically you'll want to execute a component from your Angular / React / etc. application.
|
||||
|
||||
**Passing data from .NET code into JavaScript code**
|
||||
|
||||
|
@ -211,21 +211,21 @@ Finally, run `webpack` on the command line to build `ClientApp/dist/main-server.
|
|||
Webpack is a broad and powerful tool and can do far more than just invoke the TypeScript compiler. To learn more, see the [webpack website](https://webpack.github.io/).
|
||||
|
||||
|
||||
### 5(a). Prerendering Angular 2 components
|
||||
### 5(a). Prerendering Angular components
|
||||
|
||||
If you're building an Angular 2 application, you can run your components on the server inside your `boot-server.ts` file so they will be injected into the resulting web page.
|
||||
If you're building an Angular application, you can run your components on the server inside your `boot-server.ts` file so they will be injected into the resulting web page.
|
||||
|
||||
First install the NPM package `angular2-universal` - this contains infrastructure for executing Angular 2 components inside Node.js:
|
||||
First install the NPM package `angular2-universal` - this contains infrastructure for executing Angular components inside Node.js:
|
||||
|
||||
```
|
||||
npm install --save angular2-universal
|
||||
```
|
||||
|
||||
Now you can use the [`angular2-universal` APIs](https://github.com/angular/universal) from your `boot-server.ts` TypeScript module to execute your Angular 2 component on the server. The code needed for this is fairly complex, but that's unavoidable because Angular 2 supports so many different ways of being configured, and you need to provide wiring for whatever combination of DI modules you're using.
|
||||
Now you can use the [`angular2-universal` APIs](https://github.com/angular/universal) from your `boot-server.ts` TypeScript module to execute your Angular component on the server. The code needed for this is fairly complex, but that's unavoidable because Angular supports so many different ways of being configured, and you need to provide wiring for whatever combination of DI modules you're using.
|
||||
|
||||
You can find an example `boot-server.ts` that renders arbitrary Angular 2 components [here](https://github.com/aspnet/JavaScriptServices/blob/dev/templates/Angular2Spa/ClientApp/boot-server.ts). If you use this with your own application, you might need to edit the `serverBindings` array to reference any other DI services that your Angular 2 component depends on.
|
||||
You can find an example `boot-server.ts` that renders arbitrary Angular components [here](https://github.com/aspnet/JavaScriptServices/blob/dev/templates/AngularSpa/ClientApp/boot-server.ts). If you use this with your own application, you might need to edit the `serverBindings` array to reference any other DI services that your Angular component depends on.
|
||||
|
||||
The easiest way to get started with Angular 2 server-side rendering on ASP.NET Core is to use the [aspnetcore-spa generator](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/), which creates a ready-made working starting point.
|
||||
The easiest way to get started with Angular server-side rendering on ASP.NET Core is to use the [aspnetcore-spa generator](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/), which creates a ready-made working starting point.
|
||||
|
||||
### 5(b). Prerendering React components
|
||||
|
||||
|
@ -301,7 +301,7 @@ The above example is extremely simple - it doesn't use `react-router`, and it do
|
|||
|
||||
For an example server-side boot module that knows how to evaluate `react-router` routes and render the correct React component, see [this example](https://github.com/aspnet/JavaScriptServices/blob/dev/templates/ReactReduxSpa/ClientApp/boot-server.tsx).
|
||||
|
||||
Supporting asynchronous data loading involves more considerations. Unlike Angular 2 applications that run asynchronously on the server and freely overwrite server-generated markup with client-generated markup, React strictly wants to run synchronously on the server and always produce the same markup on the server as it does on the client.
|
||||
Supporting asynchronous data loading involves more considerations. Unlike Angular applications that run asynchronously on the server and freely overwrite server-generated markup with client-generated markup, React strictly wants to run synchronously on the server and always produce the same markup on the server as it does on the client.
|
||||
|
||||
To make this work, you most likely need some way to know in advance what data your React components will need to use, load it separately from those components, and have some way of transferring information about the loaded data from server to client. If you try to implement this in a generalized way, you'll end up reinventing something like the Flux/Redux pattern.
|
||||
|
||||
|
@ -374,19 +374,19 @@ So that's enough to build TypeScript. Here's where webpack dev middleware comes
|
|||
|
||||
Following on from the preceding example that builds TypeScript, you could extend your Webpack configuration further to support building LESS. There are three major approaches to doing this:
|
||||
|
||||
1. **If using Angular 2, use its native style loader to attach the styles to components**. This is extremely simple and is usually the right choice if you are using Angular 2. However it only applies to Angular 2 components, not to any other part of the host page, so sometimes you might want to combine this technique with options 2 or 3 below.
|
||||
1. **If using Angular, use its native style loader to attach the styles to components**. This is extremely simple and is usually the right choice if you are using Angular. However it only applies to Angular components, not to any other part of the host page, so sometimes you might want to combine this technique with options 2 or 3 below.
|
||||
|
||||
2. **Or, use Webpack's style loader to attach the styles at runtime**. The CSS markup will be included in your JavaScript bundles and will be attached to the document dynamically. This has certain benefits during development but isn't recommended in production.
|
||||
|
||||
3. **Or, have each build write a standalone `.css` file to disk**. At runtime, load it using a regular `<link rel='stylesheet'>` tag. This is likely to be the approach you'll want for production use (at least for non-Angular 2 applications, such as React applications) as it's the most robust and best-performing option.
|
||||
3. **Or, have each build write a standalone `.css` file to disk**. At runtime, load it using a regular `<link rel='stylesheet'>` tag. This is likely to be the approach you'll want for production use (at least for non-Angular applications, such as React applications) as it's the most robust and best-performing option.
|
||||
|
||||
If instead of LESS you prefer SASS or another CSS preprocessor, the exact same techniques should work, but of course you'll need to replace the `less-loader` with an equivalent Webpack loader for SASS or your chosen preprocessor.
|
||||
|
||||
#### Approach 1: Scoping styles to Angular 2 components
|
||||
#### Approach 1: Scoping styles to Angular components
|
||||
|
||||
If you are using Angular 2, this is the easiest way to perform styling. It works with both server and client rendering, supports Hot Module Replacement, and robustly scopes styles to particular components (and optionally, their descendant elements).
|
||||
If you are using Angular, this is the easiest way to perform styling. It works with both server and client rendering, supports Hot Module Replacement, and robustly scopes styles to particular components (and optionally, their descendant elements).
|
||||
|
||||
This repository's Angular 2 template uses this technique to scope styles to components out of the box. It defines those styles as `.css` files. For example, its components reference `.css` files like this:
|
||||
This repository's Angular template uses this technique to scope styles to components out of the box. It defines those styles as `.css` files. For example, its components reference `.css` files like this:
|
||||
|
||||
```javascript
|
||||
@Component({
|
||||
|
@ -415,7 +415,7 @@ Next, add the following loader configuration to the `loaders` array in `webpack.
|
|||
{ test: /\.less/, include: /ClientApp/, loader: 'raw-loader!less-loader' }
|
||||
```
|
||||
|
||||
Notice how this chains together with `less-loader` (which transforms `.less` syntax to plain CSS syntax), then the `raw` loader (which turn the result into a string literal). With this in place, you can reference `.less` files from your Angular 2 components in the obvious way:
|
||||
Notice how this chains together with `less-loader` (which transforms `.less` syntax to plain CSS syntax), then the `raw` loader (which turn the result into a string literal). With this in place, you can reference `.less` files from your Angular components in the obvious way:
|
||||
|
||||
```javascript
|
||||
@Component({
|
||||
|
@ -429,7 +429,7 @@ export class SomeComponent { ... }
|
|||
|
||||
#### Approach 2: Loading the styles using Webpack and JavaScript
|
||||
|
||||
This technique works with any client-side framework (not just Angular 2), and can also apply styles to the entire document rather than just individual components. It's a little simpler to set up than technique 3, plus it works flawlessly with Hot Module Replacement (HMR). The downside is that it's really only good for development time, because in production you probably don't want users to wait until JavaScript is loaded before styles are applied to the page (this would mean they'd see a 'flash of unstyled content' while the page is being loaded).
|
||||
This technique works with any client-side framework (not just Angular), and can also apply styles to the entire document rather than just individual components. It's a little simpler to set up than technique 3, plus it works flawlessly with Hot Module Replacement (HMR). The downside is that it's really only good for development time, because in production you probably don't want users to wait until JavaScript is loaded before styles are applied to the page (this would mean they'd see a 'flash of unstyled content' while the page is being loaded).
|
||||
|
||||
First create a `.less` file in your project. For example, create a file at `ClientApp/styles/mystyles.less` containing:
|
||||
|
||||
|
@ -631,7 +631,7 @@ Now if you edit any React component (e.g., in `.jsx` or `.tsx` files), the updat
|
|||
|
||||
Webpack has built-in HMR support for various types of module, such as styles and React components as described above. But to support HMR for other code modules, you need to add a small block of code that calls `module.hot.accept` to receive the updated module and update the running application.
|
||||
|
||||
This is [documented in detail on the Webpack site](https://webpack.github.io/docs/hot-module-replacement.html). Or to get a working HMR-enabled ASP.NET Core site with Angular 2, React, React+Redux, or Knockout, you can use the [aspnetcore-spa generator](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/).
|
||||
This is [documented in detail on the Webpack site](https://webpack.github.io/docs/hot-module-replacement.html). Or to get a working HMR-enabled ASP.NET Core site with Angular, React, React+Redux, or Knockout, you can use the [aspnetcore-spa generator](http://blog.stevensanderson.com/2016/05/02/angular2-react-knockout-apps-on-aspnet-core/).
|
||||
|
||||
#### Passing options to the Webpack Hot Middleware client
|
||||
|
||||
|
|
До Ширина: | Высота: | Размер: 1.8 KiB После Ширина: | Высота: | Размер: 1.8 KiB |
|
@ -1,6 +1,6 @@
|
|||
<h1>Counter</h1>
|
||||
|
||||
<p>This is a simple example of an Angular 2 component.</p>
|
||||
<p>This is a simple example of an Angular component.</p>
|
||||
|
||||
<p>Current count: <strong>{{ currentCount }}</strong></p>
|
||||
|
|
@ -2,15 +2,15 @@
|
|||
<p>Welcome to your new single-page application, built with:</p>
|
||||
<ul>
|
||||
<li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
|
||||
<li><a href='https://angular.io/'>Angular 2</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
|
||||
<li><a href='https://angular.io/'>Angular</a> and <a href='http://www.typescriptlang.org/'>TypeScript</a> for client-side code</li>
|
||||
<li><a href='https://webpack.github.io/'>Webpack</a> for building and bundling client-side resources</li>
|
||||
<li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
|
||||
</ul>
|
||||
<p>To help you get started, we've also set up:</p>
|
||||
<ul>
|
||||
<li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
|
||||
<li><strong>Server-side prerendering</strong>. For faster initial loading and improved SEO, your Angular 2 app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over.</li>
|
||||
<li><strong>Server-side prerendering</strong>. For faster initial loading and improved SEO, your Angular app is prerendered on the server. The resulting HTML is then transferred to the browser where a client-side copy of the app takes over.</li>
|
||||
<li><strong>Webpack dev middleware</strong>. In development mode, there's no need to run the <code>webpack</code> build tool. Your client-side resources are dynamically built on demand. Updates are available as soon as you modify any file.</li>
|
||||
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular 2 app will be rebuilt and a new instance injected is into the page.</li>
|
||||
<li><strong>Hot module replacement</strong>. In development mode, you don't even need to reload the page after making most changes. Within seconds of saving changes to files, your Angular app will be rebuilt and a new instance injected is into the page.</li>
|
||||
<li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and the <code>webpack</code> build tool produces minified static CSS and JavaScript files.</li>
|
||||
</ul>
|
0
templates/Angular2Spa/Controllers/HomeController.cs → templates/AngularSpa/Controllers/HomeController.cs
Executable file → Normal file
0
templates/Angular2Spa/Controllers/HomeController.cs → templates/AngularSpa/Controllers/HomeController.cs
Executable file → Normal file
0
templates/Angular2Spa/Views/Shared/Error.cshtml → templates/AngularSpa/Views/Shared/Error.cshtml
Executable file → Normal file
0
templates/Angular2Spa/Views/Shared/Error.cshtml → templates/AngularSpa/Views/Shared/Error.cshtml
Executable file → Normal file
0
templates/Angular2Spa/Views/_ViewImports.cshtml → templates/AngularSpa/Views/_ViewImports.cshtml
Executable file → Normal file
0
templates/Angular2Spa/Views/_ViewImports.cshtml → templates/AngularSpa/Views/_ViewImports.cshtml
Executable file → Normal file
0
templates/Angular2Spa/Views/_ViewStart.cshtml → templates/AngularSpa/Views/_ViewStart.cshtml
Executable file → Normal file
0
templates/Angular2Spa/Views/_ViewStart.cshtml → templates/AngularSpa/Views/_ViewStart.cshtml
Executable file → Normal file
0
templates/Angular2Spa/appsettings.json → templates/AngularSpa/appsettings.json
Executable file → Normal file
0
templates/Angular2Spa/appsettings.json → templates/AngularSpa/appsettings.json
Executable file → Normal file
0
templates/Angular2Spa/wwwroot/favicon.ico → templates/AngularSpa/wwwroot/favicon.ico
Executable file → Normal file
0
templates/Angular2Spa/wwwroot/favicon.ico → templates/AngularSpa/wwwroot/favicon.ico
Executable file → Normal file
До Ширина: | Высота: | Размер: 31 KiB После Ширина: | Высота: | Размер: 31 KiB |
|
@ -23,7 +23,7 @@ const commonTemplatePrepublishSteps = [
|
|||
const commonForceInclusionRegex = /^(wwwroot|ClientApp)\/dist\//; // Files to be included in template, even though gitignored
|
||||
|
||||
const templates: { [key: string]: { dir: string, dotNetNewId: string, displayName: string, prepublish?: string[], forceInclusion?: RegExp } } = {
|
||||
'angular': { dir: '../../templates/Angular2Spa/', dotNetNewId: 'Angular', displayName: 'Angular' },
|
||||
'angular': { dir: '../../templates/AngularSpa/', dotNetNewId: 'Angular', displayName: 'Angular' },
|
||||
'aurelia': { dir: '../../templates/AureliaSpa/', dotNetNewId: 'Aurelia', displayName: 'Aurelia' },
|
||||
'knockout': { dir: '../../templates/KnockoutSpa/', dotNetNewId: 'Knockout', displayName: 'Knockout.js' },
|
||||
'react-redux': { dir: '../../templates/ReactReduxSpa/', dotNetNewId: 'ReactRedux', displayName: 'React.js and Redux' },
|
||||
|
|
|
@ -24,7 +24,7 @@ function testBasicNavigation() {
|
|||
|
||||
it('should initially display the home page', () => {
|
||||
expect(browser.getText('h1')).to.eq('Hello, world!');
|
||||
expect(browser.getText('li a[href="https://angular.io/"]')).to.eq('Angular 2');
|
||||
expect(browser.getText('li a[href="https://angular.io/"]')).to.eq('Angular');
|
||||
});
|
||||
|
||||
it('should be able to show the counter page', () => {
|
||||
|
|
Загрузка…
Ссылка в новой задаче