我正在遵循本教程,以获得我的应用程序的体系结构.
为了提供更多信息,我们可以将其A
视为appModule,并且B
是另一个主要模块.现在我想NgModule
在B里面加载其他模块(有许多其他路由)<router-outlet>
.
有什么更好的方法来做到这一点?
这就是我到目前为止所做的
-mainBoard (Folder next to app.Module)
--mainBoard Routes
--mainBoard Component
--mainHeader Component
--mainFooter Component
--mainSidenav Component
-Users (Folder inside mainBoard)
--User Module
--User Routes
--UserList Component
--UserDetail Component
--UserSetting Component
-Departments (Folder inside mainBoard)
--Department Module
--Department Routes
--DepartmentList Component
--DepartmentDetail Component
-Auth (Folder next to mainBoard folder)
--Auth Module
--Auth Component
--Auth Routes
-Sign-in (Folder)
--Sign-in Component
-Sign-up (Folder)
--Sign-up Component
-App Module
Run Code Online (Sandbox Code Playgroud)
我有2个主要模块,mainBoard和Auth.MainBoard有一个标题,sidenav,footer,在中心我想加载用户和部门<router-outlet>
. …
我angular-cli
用于开发,我使用以下命令和代码来构建我的项目.
npm install angular-cli
(angular-cli:1.0.0-beta.10)
ng new my-app
ng g component lazy-me
然后添加一个app.router.ts
包含以下脚本的文件
import { provideRouter, RouterConfig } from '@angular/router';
import { AppComponent } from './app.component';
// import { LazyMeComponent } from './+lazy-me/lazy-me.component';
const appRoutes : RouterConfig = [
{path: '', component: AppComponent},
// {path: 'lazyme', component: LazyMeComponent}
{path: 'lazyme', component: 'app/+lazy-me#LazyMeComponent'}
];
export const APP_ROUTER_PROVIDER = [
provideRouter(appRoutes)
];
Run Code Online (Sandbox Code Playgroud)
并改变了我的主要内容如下
import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode,
SystemJsComponentResolver,
ComponentResolver } from '@angular/core';
import …
Run Code Online (Sandbox Code Playgroud) 我有以下package.json配置
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"@angular2-material/button": "^2.0.0-alpha.8-2",
"@angular2-material/button-toggle": "^2.0.0-alpha.8-2",
"@angular2-material/card": "^2.0.0-alpha.8-2",
"@angular2-material/checkbox": "^2.0.0-alpha.8-2",
"@angular2-material/core": "^2.0.0-alpha.8-2",
"@angular2-material/grid-list": "^2.0.0-alpha.8-2",
"@angular2-material/icon": "^2.0.0-alpha.8-2",
"@angular2-material/input": "^2.0.0-alpha.8-2",
"@angular2-material/list": "^2.0.0-alpha.8-2",
"@angular2-material/menu": "^2.0.0-alpha.8-2",
"@angular2-material/progress-bar": "^2.0.0-alpha.8-2",
"@angular2-material/progress-circle": "^2.0.0-alpha.8-2",
"@angular2-material/radio": "^2.0.0-alpha.8-2",
"@angular2-material/sidenav": "^2.0.0-alpha.8-2",
"@angular2-material/slide-toggle": "^2.0.0-alpha.8-2",
"@angular2-material/slider": "^2.0.0-alpha.8-2",
"@angular2-material/tabs": "^2.0.0-alpha.8-2",
"@angular2-material/toolbar": "^2.0.0-alpha.8-2",
"@angular2-material/tooltip": "^2.0.0-alpha.8-2",
"ng2-material-dropdown":"0.5.4",
"ng2-toasty": "^2.2.2",
"@types/hammerjs": "^2.0.30",
"angular2-cookie": "1.2.3",
"angular2-material-datepicker": "^0.5.0",
"angulartics2": "^1.1.9",
"core-js": "^2.4.1",
"d3": "^4.3.0",
"es6-shim": "0.35.1",
"ng2-datetime-picker": "^0.11.3",
"ng2-tag-input": "0.6.0",
"ng2-auto-complete":"0.8.2",
"reflect-metadata": …
Run Code Online (Sandbox Code Playgroud) 在我的网站上,我有一个file input
标签来上传照片/视频.当网站在移动Safari浏览器打开,而当我们点击文件输入,动作片开辟了3个选项take photo or Video
,choose Existing
和cancel
.无论如何在js中确定文件是从camera(take photo or video
)中获取的,还是choose existing
从相机卷中导入的()?
之前我使用了angular-cli的systemJS版本,每当我从jenkins开始构建时,如果有任何测试用例失败,那么构建过去就会失败.
我只是ng build --prod
命令建立我的项目.
现在使用angular-cli的webpack版本,我们必须明确地运行ng test
.
如何检查jenkins是否ng test
已成功并继续使用ng build --prod
或者构建失败?
最近我们计划改造我们现有的内置于JMVC
. 我们决定使用 Angular-2。
为了测试负载大小,我执行了以下操作:
ng new test123
cd test123
ng build -prod
Run Code Online (Sandbox Code Playgroud)
并dist
在 apache 上部署文件夹内容并显示1.0MB transferred
.
在浏览器中加载时,我的整个 JMVC 应用程序以及所有业务逻辑几乎不到 1.2MB。
部署后如何减小 Angular-2 应用程序的大小?
ConfigService
在 angular 应用程序引导之前,我写了一篇文章来获取配置详细信息。
下面的代码写在app.module.ts
这个代码工作正常,我能够在应用程序加载之前加载配置。
...
providers: [
{
provide: APP_INITIALIZER,
useFactory: configServiceFactory,
deps: [ConfigService],
multi: true
}
]
...
Run Code Online (Sandbox Code Playgroud)
但是,现在我想将有效负载传递给我必须从查询参数中读取的配置 API。
我尝试了以下但它抛出
...
@Injectable()
export class ConfigService {
private _configData: any;
constructor(
private _http: Http,
private _activatedRoute: ActivatedRoute
) {
}
...
Run Code Online (Sandbox Code Playgroud)
如何读取 APP_INITIALIZER 服务中的查询参数?