پس از نصب آن، برنامه‌ی Angular 5 آن‌را در مسیر C:\Program Files\Windows Admin Center\UX.zip خواهید یافت. همچنین مایکروسافت این برنامه‌ها را نیز بر مبنای Angular 5 تهیه کرده‌است:
- Microsofts streaming website (mixer.com)
-
Office portal
- Microsoft Store for Education
- Azure functions UI
<cdk-virtual-scroll-viewport></cdk-virtual-scroll-viewport>
npm install -g @angular/cli
ng new angular7-virtualScrolling
npm install @angular/cdk@latest
title = 'Angular 7 – Virtual Scrolling feature';
scrollItems: number[] = [];
constructor() {
for (let index = 0; index < 10000; index++) {
this.scrollItems.push(index);
}
} <div>
<h4>
{{this.title}}
</h4>
<cdk-virtual-scroll-viewport itemSize="100">
<div *cdkVirtualFor="let n of scrollItems">Item {{n}}</div>
</cdk-virtual-scroll-viewport>
</div> 
{
"name": "asp-net-mvc5x-angular2x",
"version": "1.0.0",
"author": "DNT",
"description": "",
"scripts": {
"postinstall": "typings install"
},
"license": "Apache-2.0",
"dependencies": {
"@angular/common": "^2.0.0-rc.0",
"@angular/compiler": "^2.0.0-rc.0",
"@angular/core": "^2.0.0-rc.0",
"@angular/http": "2.0.0-rc.0",
"@angular/router": "2.0.0-rc.0",
"@angular/router-deprecated": "^2.0.0-rc.0",
"@angular/platform-browser": "^2.0.0-rc.0",
"@angular/platform-browser-dynamic": "^2.0.0-rc.0",
"bootstrap": "^3.3.6",
"es6-promise": "^3.1.2",
"es6-shim": "^0.35.0",
"jquery": "^2.2.3",
"reflect-metadata": "^0.1.3",
"rxjs": "^5.0.0-beta.6",
"systemjs": "^0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"typescript": "^1.8.9",
"typings": "^0.8.1"
},
"repository": { }
} {
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
}
} import { PipeTransform, Pipe } from '@angular/core'; import { RouteParams, Router } from '@angular/router-deprecated'; /// <reference path="../typings/es6-shim.d.ts" />
import { bootstrap } from '@angular/platform-browser-dynamic';
// Our main component
import { AppComponent } from "./app.component";
bootstrap(AppComponent); <!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="~/app/app.component.css" rel="stylesheet"/>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css"/>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="~/node_modules/es6-shim/es6-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 src="~/systemjs.config.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<body>
<div>
@RenderBody()
<pm-app>Loading App...</pm-app>
</div>
@RenderSection("Scripts", required: false)
</body>
</html> Angular js : Angular 1 & Angular : Angular 2
و مواردی از این دست. شاید برای پروژه‌های کوچک این فریم ورک مناسب باشه اما قطعا برای پروژه‌های بزرگی که قرار است برای مدتی طولانی توسعه داده بشن و نگهداری بشن اصلا انتخاب درستی نیست. حتی اگر پروژه‌های بزرگی هم با موفقیت توسط این فریم اجرا شده باشه باز هم ماهیت مساله تغییر نمی‌کنه.
در حال حاظر بین فریم ورک‌های دیگه بهترین انتخاب Ember هست که بسیاری از مشکلات ذکر شده رو نداره و ساختار و معماری قوی و خوبی هم داره. Backbone و Durandal هم فریم ورک‌های قوی ای هستند ولی تفاوت‌های نسبتا زیادی با Ember دارن.
حائز اهمیت این که، اپلیکیشن‌های SPA جوان هستند و فعلا همه جای دنیا در حال آزمایش و بررسی این هستند که چطور میشه چنین پروژه هایی رو اجرا کرد و کدام راه بهترین راه هست، بنابراین تا به استاندارد‌های ثابتی برسیم راه طولانی ای در پیش داریم. از طرفی بزودی استاندارد جدید جاوا اسکریپت (ECMA6) منتشر میشه، که با انتشارش فریم ورک هایی مثل Ember و Angular رو کاملا به هم خواهد ریخت. مثلا در نسخه جدید آبجکت‌های Observable خواهیم داشت. بنابراین متدهای Angular و Ember برای تشخیص تغییرات به کلی بلا استفاده خواهند بود و بازنویسی‌های اساسی لازم می‌شود.
<PropertyGroup> <TargetFramework>netcoreapp1.1</TargetFramework> <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> </PropertyGroup>
<ItemGroup> <Folder Include="Controllers\" /> <Folder Include="wwwroot\" /> </ItemGroup> <ItemGroup> <Compile Remove="node_modules\**" /> <Content Remove="node_modules\**" /> <EmbeddedResource Remove="node_modules\**" /> <None Remove="node_modules\**" /> </ItemGroup> <ItemGroup> <Compile Remove="src\**" /> <Content Remove="src\**" /> <EmbeddedResource Remove="src\**" /> </ItemGroup>
<ItemGroup> <PackageReference Include="Microsoft.AspNetCore" Version="1.1.1" /> <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="1.1.2" /> <PackageReference Include="Microsoft.AspNetCore.StaticFiles" Version="1.1.1" /> </ItemGroup> <ItemGroup> <DotNetCliToolReference Include="Microsoft.DotNet.Watcher.Tools" Version="1.0.0" /> </ItemGroup> <ItemGroup> <!-- extends watching group to include *.js files --> <Watch Include="**\*.js" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" /> </ItemGroup>
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace ASPNETCoreIntegrationWithAngularCLI.Controllers
{
[Route("api/[controller]")]
public class ValuesController : Controller
{
// GET: api/values
[HttpGet]
[ResponseCache(NoStore = true, Location = ResponseCacheLocation.None)]
public IEnumerable<string> Get()
{
return new string[] { "Hello", "DNT" };
}
}
} using System;
using System.IO;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
namespace ASPNETCoreIntegrationWithAngularCLI
{
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddMvc();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.Use(async (context, next) => {
await next();
if (context.Response.StatusCode == 404 &&
!Path.HasExtension(context.Request.Path.Value) &&
!context.Request.Path.Value.StartsWith("/api/", StringComparison.OrdinalIgnoreCase))
{
context.Request.Path = "/index.html";
await next();
}
});
app.UseMvcWithDefaultRoute();
app.UseDefaultFiles();
app.UseStaticFiles();
}
}
} >ng new ClientApp --routing --skip-install --skip-git --skip-commit
"apps": [
{
"root": "src",
"outDir": "wwwroot", import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private _httpService: Http) { }
apiValues: string[] = [];
ngOnInit() {
this._httpService.get('/api/values').subscribe(values => {
this.apiValues = values.json() as string[];
});
}
} <h1>Application says:</h1>
<ul *ngFor="let value of apiValues">
<li>{{value}}</li>
</ul>
<router-outlet></router-outlet> > ng build --watch
<Target Name="AngularBuild" AfterTargets="Build">
<Exec Command="ng build" />
</Target> > dotnet watch run
>dotnet watch run [90mwatch : [39mStarted Hosting environment: Production Now listening on: http://localhost:5000 Application started. Press Ctrl+C to shut down.
{
"/api": {
"target": "http://localhost:5000",
"secure": false
}
} >ng serve --proxy-config proxy.config.json -o