سلام؛ اگه میشه در مورد فعال کردن intellisense برای angular در vs2012 هم یک توضیحی بدید.
نظرات مطالب
Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
ng new my-lib-test
ng generate application my-app-name
ng generate library my-lib
/* * Public API Surface of my-lib */ export * from './lib/my-lib.service'; export * from './lib/my-lib.component'; export * from './lib/my-lib.module';
export * from './lib/my-lib.models';
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class MyLibService { constructor() { } }
ng generate component show-data --project=my-lib
@NgModule({ imports: [ CommonModule, HttpClientModule ], declarations: [MyLibComponent, ShowDataComponent], exports: [MyLibComponent, ShowDataComponent] }) export class MyLibModule { }
ng build my-lib
Building Angular Package Building entry point 'my-lib' Rendering Stylesheets Rendering Templates Compiling TypeScript sources through ngc Downleveling ESM2015 sources through tsc Bundling to FESM2015 Bundling to FESM5 Bundling to UMD Minifying UMD bundle Remap source maps Relocating source maps Copying declaration files Writing package metadata Removing scripts section in package.json as it's considered a potential security vulnerability. Built my-lib Built Angular Package! - from: D:\my-lib-test\projects\my-lib - to: D:\my-lib-test\dist\my-lib
import { MyLibModule } from "my-lib"; @NgModule({ imports: [ BrowserModule, MyLibModule ] }) export class AppModule { }
{ "compilerOptions": { "paths": { "my-lib": [ "dist/my-lib" ] } } }
برای نمونه اگر شارهگر ماوس را بر روی my-lib قرار دهید، به درستی مسیر خوانده شدن آن، تشخیص داده میشود.
<lib-show-data></lib-show-data>
ng build my-lib --prod cd dist/my-lib npm publish
@page "/" <h1>Hello, world!</h1>
@page "/bindprop"
<li class="nav-item px-3"> <NavLink class="nav-link" href="bindprop"> <span class="oi oi-list-rich" aria-hidden="true"></span> Bind Properties </NavLink> </li>
@page "/demoHotel" <h3>Hotel Rooms</h3> <div class="border p-2 mt-2" style="background-color:azure"> <h2 class="text-info">Rooms List</h2> <div class="row container"> @foreach (var room in Rooms) { <div class="bg-light border p-2 col-5 ml-2"> <h4 class="text-secondary">Room - @room.Id</h4> @room.Name<br /> @room.Price.ToString("c")<br /> <input type="checkbox" @bind-value="room.IsActive" checked="@(room.IsActive?"checked":null)" /> Is Active<br /> <span>This room is @(room.IsActive?"Active": "InActive")</span> @if (room.IsActive) { @foreach (var roomProp in room.RoomProps) { <p>@roomProp.Name - @roomProp.Value</p> } } <input type="button" class="btn btn-danger" value="Delete" /> <input type="button" class="btn btn-success" value="Edit" /> </div> } </div> </div>
<li class="nav-item px-3"> <NavLink class="nav-link" href="demoHotel"> <span class="oi oi-list-rich" aria-hidden="true"></span> Demo Hotel </NavLink> </li>
<input type="button" class="btn btn-danger" value="Delete" /> <input type="button" class="btn btn-success" value="Edit" />
<BlazorServerSample.Pages.LearnBlazor.LearnBlazorComponents.EditDeleteButton></BlazorServerSample.Pages.LearnBlazor.LearnBlazorComponents.EditDeleteButton>
@using BlazorServerSample.Pages.LearnBlazor.LearnBlazorComponents
<EditDeleteButton></EditDeleteButton>
@if (IsAdmin) { <input type="button" class="btn btn-danger" value="Delete" /> <input type="button" class="btn btn-success" value="Edit" /> } @code { [Parameter] public bool IsAdmin { get; set; } }
<EditDeleteButton IsAdmin="true"></EditDeleteButton>
<div class="bg-light border p-2 col-5 offset-1"> <h4 class="text-secondary">Room - @Room.Id</h4> @Room.Name<br /> @Room.Price.ToString("c")<br /> <input type="checkbox" @bind-value="Room.IsActive" checked="@(Room.IsActive?"checked":null)" /> Is Active<br /> <span>This room is @(Room.IsActive?"Active": "InActive")</span> @if (Room.IsActive) { @foreach (var roomProp in Room.RoomProps) { <p>@roomProp.Name - @roomProp.Value</p> } } <EditDeleteButton IsAdmin="true"></EditDeleteButton> </div> @code { [Parameter] public BlazorRoom Room { get; set; } }
<div class="row container"> @foreach (var room in Rooms) { <IndividualRoom Room="@room"></IndividualRoom> } </div>
namespace BlazorServerSample.Models { public class BlazorAmenity { public int Id { get; set; } public string Name { get; set; } public string Description { get; set; } } }
@code{ List<BlazorAmenity> AmenitiesList = new List<BlazorAmenity>(); // ... protected override void OnInitialized() { base.OnInitialized(); // ... AmenitiesList.Add(new BlazorAmenity { Id = 111, Name = "Gym", Description = "24x7 gym room is available." }); AmenitiesList.Add(new BlazorAmenity { Id = 222, Name = "Swimming Pool", Description = "Pool room is open from 6am to 10pm." }); AmenitiesList.Add(new BlazorAmenity { Id = 333, Name = "Free Brakfast", Description = "Enjoy free breakfast at out hotel." }); } }
<div class="bg-light border p-2 col-5 offset-1 mt-2"> <h4 class="text-secondary">Amenity - @Amenity.Id</h4> @Amenity.Name<br /> @Amenity.Description<br /> </div> @code { [Parameter] public BlazorAmenity Amenity { get; set; } }
<div class="col-12 mt-4"> <h4 class="text-info">Hotel Amenities</h4> </div> @foreach (var amenity in AmenitiesList) { <IndividualAmenity Amenity="@amenity"></IndividualAmenity> }
> ng new ASPNETCore2JwtAuthentication.AngularClient --routing
> npm install bootstrap --save
"apps": [ { "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
>ng g c welcome >ng g c PageNotFound
@NgModule({ declarations: [ AppComponent, WelcomeComponent, PageNotFoundComponent ],
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { WelcomeComponent } from './welcome/welcome.component'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'welcome', component: WelcomeComponent }, { path: '', redirectTo: 'welcome', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
>ng g m Authentication -m app.module --routing
create src/app/authentication/authentication-routing.module.ts (257 bytes) create src/app/authentication/authentication.module.ts (311 bytes) update src/app/app.module.ts (696 bytes)
import { EmployeeRoutingModule } from './employee/employee-routing.module'; @NgModule({ imports: [ BrowserModule, AppRoutingModule, AuthenticationModule ]
import { EmployeeModule } from './employee/employee.module'; @NgModule({ imports: [ BrowserModule, AuthenticationModule, AppRoutingModule ]
>ng g c Authentication/Login
create src/app/Authentication/login/login.component.html (24 bytes) create src/app/Authentication/login/login.component.ts (265 bytes) create src/app/Authentication/login/login.component.css (0 bytes) update src/app/Authentication/authentication.module.ts (383 bytes)
import { LoginComponent } from "./login/login.component"; @NgModule({ declarations: [LoginComponent] })
import { LoginComponent } from "./login/login.component"; const routes: Routes = [ { path: "login", component: LoginComponent } ];
import { NgModule, SkipSelf, Optional, } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterModule } from "@angular/router"; // import RxJs needed operators only once import "./services/rxjs-operators"; import { BrowserStorageService } from "./browser-storage.service"; @NgModule({ imports: [CommonModule, RouterModule], exports: [ // components that are used in app.component.ts will be listed here. ], declarations: [ // components that are used in app.component.ts will be listed here. ], providers: [ // global singleton services of the whole app will be listed here. BrowserStorageService ] }) export class CoreModule { constructor( @Optional() @SkipSelf() core: CoreModule) { if (core) { throw new Error("CoreModule should be imported ONLY in AppModule."); } } }
import { NgModule, ModuleWithProviders } from "@angular/core"; import { CommonModule } from "@angular/common"; @NgModule({ imports: [ CommonModule ], entryComponents: [ // All components about to be loaded "dynamically" need to be declared in the entryComponents section. ], declarations: [ // common and shared components/directives/pipes between more than one module and components will be listed here. ], exports: [ // common and shared components/directives/pipes between more than one module and components will be listed here. CommonModule ] /* No providers here! Since they’ll be already provided in AppModule. */ }) export class SharedModule { static forRoot(): ModuleWithProviders { // Forcing the whole app to use the returned providers from the AppModule only. return { ngModule: SharedModule, providers: [ /* All of your services here. It will hold the services needed by `itself`. */] }; } }
import { FormsModule } from "@angular/forms"; import { HttpClientModule } from "@angular/common/http"; import { CoreModule } from "./core/core.module"; import { SharedModule } from "./shared/shared.module"; @NgModule({ imports: [ BrowserModule, FormsModule, HttpClientModule, CoreModule, SharedModule.forRoot(), AuthenticationModule, AppRoutingModule ] }) export class AppModule { }
> ng g c Header
create src/app/header/header.component.html (25 bytes) create src/app/header/header.component.ts (269 bytes) create src/app/header/header.component.css (0 bytes) update src/app/app.module.ts (1069 bytes)
<nav> <div> <div> <a [routerLink]="['/']">{{title}}</a> </div> <ul> <li role="menuitem" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"> <a [routerLink]="['/welcome']">Home</a> </li> <li role="menuitem" routerLinkActive="active"> <a queryParamsHandling="merge" [routerLink]="['/login']">Login</a> </li> </ul> </div> </nav>
export class HeaderComponent implements OnInit { title = "Angular.Jwt.Core";
<app-header></app-header> <div> <router-outlet></router-outlet> </div>
import { HeaderComponent } from "./component/header/header.component"; @NgModule({ exports: [ // components that are used in app.component.ts will be listed here. HeaderComponent ], declarations: [ // components that are used in app.component.ts will be listed here. HeaderComponent ] }) export class CoreModule {