翻譯|使用教程|編輯:龔雪|2021-09-13 09:52:23.003|閱讀 232 次
概述:可直接利用DevExtreme Angular應用程序模板快速創建一個簡單的Angular應用程序,本文主要介紹如何驗證 & 創建一個空應用等。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
DevExtreme Angular應用程序包括身份驗證 UI 和 API,配置客戶端路由,以便未經身份驗證的用戶只能導航到身份驗證頁面,這些頁面允許用戶登錄、創建新帳戶或重置密碼。
身份驗證頁面由 UnauthenticatedContentComponent 呈現。
重要提示:不要依賴客戶端路由來保護您的應用程序免受未經授權的訪問,始終在后端驗證用戶憑據。
與后端集成
用于后端請求的存根認證功能在 AuthService 中實現,更新這些函數以向您的后端發出實際請求。
每個函數都返回一個具有以下字段的對象:
獲取用戶信息
用戶信息由同一個 AuthService 提供,您可以使用其 getUser() 方法來訪問此信息:
TypeScript
import { Component } from '@angular/core'; import { AuthService } from './shared/services'; @Component({ // ... }) export class AppComponent { constructor(private authService: AuthService) { } ngOnInit() { this.authService.getUser().then((e) => { if (e.data) { // User is authenticated ... } }); } }
要生成沒有視圖和導航菜單的應用程序,請使用 --empty 標志:
npx devextreme-cli new angular-app app-name --empty
要使生成的應用程序在 Internet Explorer 11 中工作,請執行以下操作:
1. 安裝并啟用 polyfill
npm install --save classlist.js core-js
code-type active
// ... import 'core-js/es/array'; import 'classlist.js'; // ...
2. 包含 IE 11 作為受支持的瀏覽器,打開 .browserslistrc 文件,不要將 IE 11 更改為 IE 11。
3. 修改啟動和構建命令
package.json
{ // ... "scripts": { // ... // "start": "ng serve", // "build": "ng build", "start": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng serve --prod", "build": "node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build --prod", // ... } }
4. 降低目標 ECMAScript 版本
{ // ... // "target": "es2015", "target": "es5", // ... }
DevExtreme擁有高性能的HTML5 / JavaScript小部件集合,使您可以利用現代Web開發堆棧(包括React,Angular,ASP.NET Core,jQuery,Knockout等)構建交互式的Web應用程序。從Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和響應式UI小部件集合,可在傳統Web和下一代移動應用程序中使用。 該套件附帶功能齊全的數據網格、交互式圖表小部件、數據編輯器等。
DevExpress技術交流群4:715863792 歡迎一起進群討論
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都網