var appFolder = "./app"; var outFolder = "wwwroot";
gulpfile.js systemjs.config.js --app --wwwroot
این مورد، روش پیشنهادی در Angular Seed است و بدین صورت است که تعاریف ماژولها در فایل app.js انجام می‌گیرد. تعاریف و پیاده سازی تمام کنترلر‌ها در فایل controller.js است. و همچنین دایرکتیوها و فیلترها و سرویس‌ها هر کدام در فایل‌ها جداگانه تعریف و پیاده سازی می‌شوند. این روش راه حلی سریع برای پروژه‌های کوچک با تعداد developerهای کم است. برای مثال زمانی که یک developer در حال ویرایش فایل controller.js است، از آن جا که فایل مورد نظر checkout خواهد شد در نتیجه سایر developerها امکان تغییر در فایل مورد نظر را نخواهند داشت. سورس فایل‌ها به مرور زیاد خواهد شد و در نتیجه debug آن سخت می‌شود.
روش دوم
در این حالت تعاریف کنترلر ها، مدل‌ها و سرویس‌ها هرکدام در یک دایرکتوری مجزا قرار خواهد گرفت. برای هر view یک کنترلر و بنا بر نیاز مدل تعریف می‌کنیم. ساختار آن به صورت زیر می‌شود:
| مرحله | معادل آن در پروژه‌های قدیمی MVC 5 |
| ایجاد یک پروژه‌ی جدید ASP.NET Core در VS 2017 | یک پروژه‌ی جدید Web API را ایجاد کنید. |
| تنظیمات یک برنامه‌ی ASP.NET Core خالی برای اجرای یک برنامه‌ی Angular CLI | به این موارد نیازی نخواهید داشت. چون پروژه‌های MVC 5 برخلاف ASP.NET Core، پوشه‌هایی را که دستی به آن اضافه نکنید، به صورت خودکار به پروژه اضافه نمی‌کند. بنابراین فایل‌های Angular-CLI را به Solution Explorer وارد نکنید و بهترین روش کار کردن با آنها از طریق VSCode است. در اینجا برای back-end (کار با Web API) از VS کامل استفاده کنید و برای front-end از VSCode. |
| افزودن یک کنترلر Web API جدید | کلیات آن با MVC 5 یکی است. |
| تنظیمات فایل آغازین یک برنامه‌ی ASP.NET Core جهت ارائه‌ی برنامه‌های Angular | معادل قسمت URL Rewrite آن، از نکته‌ی web.config مطلب «مسیریابی در Angular - قسمت اول - معرفی»، قسمت «تفاوت بین آدرس‌های HTML 5 و Hash-based» استفاده کنید. |
| ایجاد ساختار اولیه‌ی برنامه‌ی Angular CLI در داخل پروژه‌ی جاری | یکی هست. |
| تنظیم محل خروجی نهایی Angular CLI به پوشه‌ی wwwroot | یکی هست. فقط شاید علاقمند باشید مسیر "" (پوشه‌ی ریشه) را بجای wwwroot تنظیم کنید. |
| فراخوانی کنترلر Web API برنامه در برنامه‌ی Angular CLI | یکی هست. |
| نصب وابستگی‌های برنامه‌ی Angular CLI | یکی هست. |
| روش اول اجرای برنامه‌های مبتنی بر ASP.NET Core و Angular CLI | یکی هست. |
| روش دوم اجرای برنامه‌های مبتنی بر ASP.NET Core و Angular CLI | در اینجا نیازی به آن نیست ولی در کل مطالعه‌ی نکات آن مفید است. |
| فایل‌های bat ارائه شده و یا روش NPM Task Runner در نظرات | یکی هستند. |
Install-Package AngularTranslate
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', {
TITLE: 'Hello',
FOO: 'This is a paragraph.',
BUTTON_LANG_EN: 'english',
BUTTON_LANG_DE: 'german'
});
$translateProvider.translations('de', {
TITLE: 'Hallo',
FOO: 'Dies ist ein Paragraph.',
BUTTON_LANG_EN: 'englisch',
BUTTON_LANG_DE: 'deutsch'
});
$translateProvider.preferredLanguage('en');
});
app.controller('Ctrl', function ($scope, $translate) {
$scope.changeLanguage = function (key) {
$translate.use(key);
};
}); > dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-preview1-final > dotnet new angular
export interface IUser {
id: number;
name: string;
email: string;
password: string;
} <form> <div class="form-group"> <label form="name">Username</label> <input id="name" type="text" class="form-control" /> </div> <div class="form-group"> <label form="email">Email</label> <input id="email" type="text" class="form-control" /> </div> <div class="form-group"> <label form="password">Password</label> <input id="password" type="password" class="form-control" /> </div> <button class="btn btn-primary" type="submit">Submit</button> </form>
import { Component } from '@angular/core';
import { Control, ControlGroup, Validators } from '@angular/common';
@Component({
selector: 'signup-form',
templateUrl: 'app/users/signup-form.component.html'
})
export class SignupFormComponent {
form = new ControlGroup({
name: new Control('', Validators.required),
email: new Control('', Validators.required),
password: new Control('', Validators.required)
});
onSubmit(): void {
console.log(this.form.value);
}
} <form [ngFormModel]="form" (ngSubmit)="onSubmit()"> <div class="form-group"> <label form="name">Username</label> <input id="name" type="text" class="form-control" ngControl="name"/> <label class="text-danger" *ngIf="!form.controls['name'].valid"> Username is required. </label> </div> <div class="form-group"> <label form="email">Email</label> <input id="email" type="text" class="form-control" ngControl="email" #email="ngForm"/> <label class="text-danger" *ngIf="email.touched && !email.valid"> Email is required. </label> </div> <div class="form-group"> <label form="password">Password</label> <input id="password" type="password" class="form-control" ngControl="password" #password="ngForm"/> <label class="text-danger" *ngIf="password.touched && !password.valid"> Password is required. </label> </div> <button class="btn btn-primary" type="submit">Submit</button> </form>
form = new ControlGroup({
name: new Control('', Validators.required),
email: new Control('', Validators.required),
password: new Control('', Validators.required)
}); import { Control, ControlGroup, Validators } from '@angular/common'; <form [ngFormModel]="form" (ngSubmit)="onSubmit()">
<label class="text-danger" *ngIf="!form.controls['name'].valid">
onSubmit(): void {
console.log(this.form.value);
} //same as before...
import { SignupFormComponent } from './users/signup-form.component';
@Component({
//same as before…
template: `
//same as before…
<li><a [routerLink]="['AddUser']">Add User</a></li>
//same as before…
`,
//same as before…
})
@RouteConfig([
//same as before…
{ path: '/adduser', name: 'AddUser', component: SignupFormComponent }
])
//same as before... import { Control, ControlGroup, Validators, FormBuilder } from '@angular/common';
form: ControlGroup;
constructor(formBuilder: FormBuilder) {
this.form = formBuilder.group({
name: ['', Validators.required],
email: ['', Validators.required],
password: ['', Validators.required]
});
} import { Control } from '@angular/common';
export class UsernameValidators {
static cannotContainSpace(control: Control) {
if (control.value.indexOf(' ') >= 0) {
return { cannotContainSpace: true };
}
return null;
}
} { required:true } {
minlength : {
requiredLength : 3,
actualLength : 1
}
} import { UsernameValidators } from './usernameValidators'; name: ['', Validators.compose([Validators.required, UsernameValidators.cannotContainSpace])],
<div class="form-group"> <label form="name">Username</label> <input id="name" type="text" class="form-control" ngControl="name" #name="ngForm" /> <div *ngIf="name.touched && name.errors"> <label class="text-danger" *ngIf="name.errors.required"> Username is required. </label> <label class="text-danger" *ngIf="name.errors.cannotContainSpace"> Username can't contain space. </label> </div> </div>
import {Control} from '@angular/common';
export class EmailValidators {
static email(control: Control) {
var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var valid = regEx.test(control.value);
return valid ? null : { email: true };
}
} control(value: Object, validator?: ValidatorFn, asyncValidator?: AsyncValidatorFn) : Control
nameShouldBeUnique(control: Control) {
let name: string = control.value;
return new Promise((resolve) => {
this._userService.isUserNameUnique(<IUser>{ "name": name }).subscribe(
(result: IResult) => {
resolve(
result.result ? null : { 'nameShouldBeUnique': true }
);
},
error => {
resolve(null);
}
);
});
} this.form = _formBuilder.group({
name: ['', Validators.compose([
Validators.required,
UsernameValidators.cannotContainSpace
]),
(control: Control) => this.nameShouldBeUnique(control)], import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '@angular/http';
import { IUser } from './user';
import { IResult } from './result';
@Injectable()
export class UserService {
private _checkUserUrl = '/home/checkUser';
constructor(private _http: Http) { }
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
isUserNameUnique(user: IUser): Observable<IResult> {
let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
let options = new RequestOptions({ headers: headers });
return this._http.post(this._checkUserUrl, JSON.stringify(user), options)
.map((response: Response) => <IResult>response.json())
.do(data => console.log("User: " + JSON.stringify(data)))
.catch(this.handleError);
}
} export interface IResult {
result: boolean;
} namespace MVC5Angular2.Controllers
{
public class HomeController : Controller
{
[HttpPost]
public ActionResult CheckUser(User user)
{
var isUnique = new { result = true };
if (user.Name?.Equals("Vahid", StringComparison.OrdinalIgnoreCase) ?? false)
{
isUnique = new { result = false };
}
return new ContentResult
{
Content = JsonConvert.SerializeObject(isUnique, new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}),
ContentType = "application/json",
ContentEncoding = Encoding.UTF8
};
}
}
} @Component({
selector: 'signup-form',
templateUrl: 'app/users/signup-form.component.html',
providers: [ UserService ]
})
export class SignupFormComponent {
constructor(private _formBuilder: FormBuilder, private _userService: UserService) { <div *ngIf="name.touched && name.errors"> <label class="text-danger" *ngIf="name.errors.required"> Username is required. </label> <label class="text-danger" *ngIf="name.errors.cannotContainSpace"> Username can't contain space. </label> <label class="text-danger" *ngIf="name.errors.nameShouldBeUnique"> This username is already taken. </label> </div>
<input id="name" type="text" class="form-control" ngControl="name" #name="ngForm" /> <div *ngIf="name.control.pending"> Checking server, Please wait ... </div>
onSubmit(): void {
console.log(this.form.value);
this.form.find('name').setErrors({
invalidData : true
});
} <div *ngIf="name.touched && name.errors"> <label class="text-danger" *ngIf="name.errors.invalidData"> Check the inputs.... </label> </div>
{ name="VahidN", email="email@site.com", password="123"} import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Headers, RequestOptions } from '@angular/http';
import { IUser } from './user';
import { IResult } from './result';
@Injectable()
export class UserService {
private _addUserUrl = '/home/addUser';
constructor(private _http: Http) { }
private handleError(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
addUser(user: IUser): Observable<IUser> {
let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
let options = new RequestOptions({ headers: headers });
return this._http.post(this._addUserUrl, JSON.stringify(user), options)
.map((response: Response) => <IUser>response.json())
.do(data => console.log("User: " + JSON.stringify(data)))
.catch(this.handleError);
}
} [HttpPost]
public ActionResult AddUser(User user)
{
user.Id = 1; //todo: save user and get id from db
return new ContentResult
{
Content = JsonConvert.SerializeObject(user, new JsonSerializerSettings
{
ContractResolver = new CamelCasePropertyNamesContractResolver()
}),
ContentType = "application/json",
ContentEncoding = Encoding.UTF8
};
} onSubmit(): void {
console.log(this.form.value);
/*this.form.find('name').setErrors({
invalidData : true
});*/
this._userService.addUser(<IUser>this.form.value)
.subscribe((user: IUser) => {
console.log(`ID: ${user.id}`);
});
} 
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-translate.js"></script> angular.module('app', ['pascalprecht.translate'])
.config([
'$translateProvider', function ($translateProvider) {
// Adding a translation table for the English language
$translateProvider.translations('en_US', {
"TITLE": "How to use",
"HEADER": "You can translate texts by using a filter.",
"SUBHEADER": "And if you don't like filters, you can use a directive.",
"HTML_KEYS": "If you don't like an empty elements, you can write a key for the translation as an inner HTML of the directive.",
"DATA_TO_FILTER": "Your translations might also contain any static ({{staticValue}}) or random ({{randomValue}}) values, which are taken directly from the model.",
"DATA_TO_DIRECTIVE": "And it's no matter if you use filter or directive: static is still {{staticValue}} and random is still {{randomValue}}.",
"RAW_TO_FILTER": "In case you want to pass a {{type}} data to the filter, you have only to pass it as a filter parameter.",
"RAW_TO_DIRECTIVE": "This trick also works for {{type}} with a small mods.",
"SERVICE": "Of course, you can translate your strings directly in the js code by using a $translate service.",
"SERVICE_PARAMS": "And you are still able to pass params to the texts. Static = {{staticValue}}, random = {{randomValue}}."
});
// Adding a translation table for the Russian language
$translateProvider.translations('ru_RU', {
"TITLE": "Как пользоваться",
"HEADER": "Вы можете переводить тексты при помощи фильтра.",
"SUBHEADER": "А если Вам не нравятся фильтры, Вы можете воспользоваться директивой.",
"HTML_KEYS": "Если вам не нравятся пустые элементы, Вы можете записать ключ для перевода в как внутренний HTML директивы.",
"DATA_TO_FILTER": "Ваши переводы также могут содержать любые статичные ({{staticValue}}) или случайные ({{randomValue}}) значения, которые берутся прямо из модели.",
"DATA_TO_DIRECTIVE": "И совершенно не важно используете ли Вы фильтр или директиву: статическое значение по прежнему {{staticValue}} и случайное - {{randomValue}}.",
"RAW_TO_FILTER": "Если вы хотите передать \"сырые\" ({{type}}) данные фильтру, Вам всего лишь нужно передать их фильтру в качестве параметров.",
"RAW_TO_DIRECTIVE": "Это также работает и для директив ({{type}}) с небольшими модификациями.",
"SERVICE": "Конечно, Вы можете переводить ваши строки прямо в js коде при помощи сервиса $translate.",
"SERVICE_PARAMS": "И вы все еще можете передавать параметры в тексты. Статическое значение = {{staticValue}}, случайное = {{randomValue}}."
});
// Tell the module what language to use by default
$translateProvider.preferredLanguage('en_US');
}]) .controller('ctrl', ['$scope', '$translate', function ($scope, $translate) {
$scope.tlData = {
staticValue: 42,
randomValue: Math.floor(Math.random() * 1000)
};
$scope.jsTrSimple = $translate.instant('SERVICE');
$scope.jsTrParams = $translate.instant('SERVICE_PARAMS', $scope.tlData);
$scope.setLang = function (langKey) {
// You can change the language during runtime
$translate.use(langKey);
// A data generated by the script have to be regenerated
$scope.jsTrSimple = $translate.instant('SERVICE');
$scope.jsTrParams = $translate.instant('SERVICE_PARAMS', $scope.tlData);
};
}]); <p>
<a href="#" ng-click="setLang('en_US')">English</a>
|
<a href="#" ng-click="setLang('ru_RU')">Русский</a>
</p>
<!-- Translation by a filter -->
<h1>{{'HEADER' | translate}}</h1>
<!-- Translation by a directive -->
<h2 translate="SUBHEADER">Subheader</h2>
<!-- Using inner HTML as a key for translation -->
<p translate>HTML_KEYS</p>
<hr>
<!-- Passing a data object to the translation by the filter -->
<p>{{'DATA_TO_FILTER' | translate: tlData}}</p>
<!-- Passing a data object to the translation by the directive -->
<p translate="DATA_TO_DIRECTIVE" translate-values="{{tlData}}"></p>
<hr>
<!-- Passing a raw data to the filter -->
<p>{{'RAW_TO_FILTER' | translate:'{ type: "raw" }' }}</p>
<!-- Passing a raw data to the filter -->
<p translate="RAW_TO_DIRECTIVE" translate-values="{ type: 'directives' }"></p>
<hr>
<!-- Using a $translate service -->
<p>{{jsTrSimple}}</p>
<!-- Passing a data to the $translate service -->
<p>{{jsTrParams}}</p> <script src="Scripts/angular-cookies.js"></script>
<script src="Scripts/angular-translate-storage-cookie.js"></script> // Tell the module to store the language in the cookie $translateProvider.useCookieStorage();
این مثال همانند مثال قبل رفتار می‌کند، با این تفاوت که به جای اینکه کلید زبان کنونی را درون کوکی ذخیره کند، آن را درون Local Storage با نام NG_TRANSLATE_LANG_KEY قرار می‌دهد. برای اجرا کافیست اسکریپت‌ها و تکه کد زیر را با موارد مثال قبل جایگزین کنید.
<script src="Scripts/angular-translate-storage-local.js"></script> // Tell the module to store the language in the local storage $translateProvider.useLocalStorage();
مثال های ex4_set_a_storage_key و ex5_set_a_storage_prefix نام کلیدی که برای ذخیره سازی زبان کنونی در کوکی یا Local Storage قرار می‌گیرد را تغییر می‌دهد که به دلیل سادگی از شرح آن می‌گذریم.
translate table در angular-translate قابلیت مفید namespacing را نیز داراست. این قابلیت به ما کمک می‌کند که جهت کپسوله کردن بخش‌های مختلف، ترجمه آنها را با namespaceهای خاص خود نمایش دهیم. به مثال زیر توجه کنید:
$translateProvider.translations('en_US', {
"TITLE": "How to use namespaces",
"ns1": {
"HEADER": "A translations table supports namespaces.",
"SUBHEADER": "So you can to structurize your translation table well."
},
"ns2": {
"HEADER": "Do you want to have a structured translations table?",
"SUBHEADER": "You can to use namespaces now."
}
}); همانطور که توجه می‌کنید بخش ns1 خود شامل زیر مجموعه‌هایی است و ns2 نیز به همین صورت. هر کدام دارای کلید HEADER و SUBHEADER می‌باشند. فرض کنید هر کدام از این بخش‌ها می‌خواهند اطلاعات درون یک section را نمایش دهند. حال به نحوه‌ی فراخوانی این translate tableها دقت کنید:
<!-- section 1: Translate Table Called by ns1 namespace --> <h1 translate>ns1.HEADER</h1> <h2 translate>ns1.SUBHEADER</h2> <!-- section 2: Translate Table Called by ns2 namespace --> <h1 translate>ns2.HEADER</h1> <h2 translate>ns2.SUBHEADER</h2>
به همین سادگی می‌توان تمامی بخش‌ها را با namespaceهای مختلف در translate table قرار داد.
در بخش بعدی (پایانی) شش قابلیت دیگر angular translate که شامل فراخوانی translate table از یک فایل JSON، فراخوانی فایل‌های translate table به صورت lazy load و تغییر زبان بخشی از صفحه به صورت پویا هستند، بررسی خواهند شد.
فایل پروژه: AngularJs-Translate-BestPractices.zip