- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
下面我粘贴了我的 app.ts 文件。
我正在使用带有 firebase 和 typescript 的 angular2。
它慢的原因是因为我有很多路由并且我正在注入(inject)很多文件吗?
此外,我的应用程序运行良好,仅适用于首次访问我遇到此问题的主页的用户。
我不确定是否可以在底部改进 Bootstrap ,或者我是否做错了什么。
这是我的 app.ts 文件:
import {Component, bind, provide, Injectable} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser'
import {NgIf} from 'angular2/common';
import {Router, Location, ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF, CanActivate, OnActivate,
ComponentInstruction} from 'angular2/router';
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
import {ANGULAR2_GOOGLE_MAPS_PROVIDERS} from 'angular2-google-maps/core';
import {enableProdMode} from 'angular2/core';
enableProdMode();
import {LoggedInRouterOutlet} from './interceptor';
import {AuthService} from './services/authService/authService';
import {SocialService} from './services/socialService/socialService';
import {UserService} from './services/userService/userService';
import {OrganisationService} from './services/organisationService/organisationService';
import {NotificationService} from './services/notificationService/notificationService';
import {EmailService} from './services/emailService/emailService';
import {UserProfile} from './models/profile/profile';
import {Organisation} from './models/organisation/organisation';
import {HeaderNavigation} from './components/header/header';
import {HeaderNavigationLoggedIn} from './components/header/headerNavigationLoggedIn';
import {HeaderNavigationLoggedInCompany} from './components/header/headerNavigationLoggedInCompany';
import {Footer} from './components/footer/footer';
import {SideMenuCompany} from './components/header/sideMenuCompany';
import {SideMenuUser} from './components/header/sideMenuUser';
import {Splash} from './components/splash/splash';
import {CreateJob} from './components/createJob/createJob';
import {SearchJobs} from './components/searchJobs/searchJobs';
import {Login} from './components/login/login';
import {Applications} from './components/applications/applications';
import {Register} from './components/register/register';
import {ForgotPassword} from './components/forgotpassword/forgotpassword';
import {ChangePassword} from './components/changepassword/changepassword';
import {ChangeEmail} from './components/changeemail/changeemail';
import {SocialRegister} from './components/socialregister/socialregister';
import {Admin} from './components/admin/admin';
import {Contact} from './components/contact/contact';
import {SearchUsers} from './components/searchusers/searchusers';
import {Jobs} from './components/job/jobs';
import {CompanyProfile} from './components/company/company';
import {Home} from './components/home/home';
import {Dashboard} from './components/dashboard/dashboard';
import {Profile} from './components/profile/profile';
import {UserApplications} from './components/userApplications/userApplications';
@Component({
selector: 'app',
providers: [UserService, UserProfile, OrganisationService, Organisation],
template: `
<Splash *ngIf="isLoggedIn"></Splash>
<HeaderNavigation *ngIf="!isLoggedIn"></HeaderNavigation>
<HeaderNavigationLoggedIn *ngIf="isLoggedIn && isUserLogin"></HeaderNavigationLoggedIn>
<HeaderNavigationLoggedInCompany *ngIf="isLoggedIn && isCompanyLogin"></HeaderNavigationLoggedInCompany>
<SideMenuCompany *ngIf="isLoggedIn && isCompanyLogin"></SideMenuCompany>
<SideMenuUser *ngIf="isLoggedIn && isUserLogin"></SideMenuUser>
<div class="content">
<router-outlet></router-outlet>
</div>
`,
directives: [RouterOutlet, RouterLink, Splash, HeaderNavigation, HeaderNavigationLoggedIn, NgIf, HeaderNavigationLoggedInCompany, SideMenuCompany, SideMenuUser, Footer, LoggedInRouterOutlet]
})
@RouteConfig([
{ path: '/', component: Home, as: 'Home', data:{title: 'Welcome Home'}},
{ path: '/home', component: Home, as: 'Home', useAsDefault: true},
{ path: '/login', component: Login, as: 'Login' },
{ path: '/register/:id', component: Register, as: 'Register' },
{ path: '/forgotpassword', component: ForgotPassword, as: 'ForgotPassword' },
{ path: '/dashboard', component: Dashboard, as: 'Dashboard' },
{ path: '/search', component: SearchJobs, as: 'Search' },
{ path: '/profile', component: Profile, as: 'Profile' },
{ path: '/settings', component: CompanyProfile, as: 'Settings' },
{ path: '/jobs', component: Jobs, as: 'Jobs' },
{ path: '/password', component: ChangePassword, as: 'Password' },
{ path: '/email', component: ChangeEmail, as: 'Email' },
{ path: '/applications', component: Applications, as: 'Applications' },
{ path: '/socialRegister/:id', component: SocialRegister, as: 'SocialRegister' },
{ path: '/socialRegister', component: SocialRegister, as: 'SocialRegister' },
{ path: '/applys', component: UserApplications, as: 'Applys' },
{ path: '/contact', component: Contact, as: 'Contact' },
{ path: '/searchTeachers', component: SearchUsers, as: 'SearchUsers' },
{ path: '/createJob', component: CreateJob, as: 'CreateJob' },
{ path: '/adminmarkchris2016', component: Admin, as: 'AdminMarkChris2016' },
{ path:'/**', redirectTo: ['Home']}
])
@Injectable()
export class AppComponent {
router: Router;
location: Location;
authService: AuthService;
userService: UserService
isLoggedIn: boolean = false;
isCompanyLogin: boolean = false;
isUserLogin: boolean = false;
userProfile: UserProfile;
constructor(_router: Router, _location: Location, _authService: AuthService, _userService: UserService, _userProfile: UserProfile){
this.router = _router;
this.location = _location;
this.authService = _authService;
this.userService = _userService;
this.userProfile = _userProfile;
this.isUserLoggedIn(this.location.path());
//On refresh
this.router.subscribe((currentRoute) => {
this.isUserLoggedIn(currentRoute);
})
}
isUserLoggedIn(currentRoute): void{
this.authService.checkIfLoggedIn().then((response) => {
this.isLoggedIn = response
if(this.isLoggedIn){
this.isUserOrganisationOrTeacher();
}
if(currentRoute.substring(0, 14) == "socialRegister" || currentRoute == "socialRegister" || currentRoute == "home" || currentRoute == "contact" || currentRoute == "" || currentRoute == "forgotpassword" || currentRoute == "login" || currentRoute.substring(0, 8) == "register"){
this.isCompanyLogin = false;
this.isUserLogin = false;
this.isLoggedIn = false;
}
});
}
isUserOrganisationOrTeacher(): void{
this.userService.checkIfProfileExists().then((response) => {
this.isCompanyLogin = false;
this.isUserLogin = false;
if(response){
this.isUserLogin = true;
this.isCompanyLogin = false;
}else{
this.isCompanyLogin = true;
this.isUserLogin = false;
}
});
}
}
bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'}), HTTP_PROVIDERS, AuthService, SocialService, UserService, EmailService, OrganisationService, NotificationService, ANGULAR2_GOOGLE_MAPS_PROVIDERS]);
最佳答案
要为生产做好准备(并加快生产速度),您需要对其进行打包。
我的意思是将所有文件转换为 JavaScript 文件,并以与 Angular2 相同的方式连接它们。这样,您将在一个 JS 文件中包含多个模块。通过这种方式,您将减少将应用程序代码加载到浏览器的 HTTP 调用次数。
事实上,对于 SystemJS 的以下配置,您将每个模块调用一次(适合开发,但在生产中效率不高):
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
这个答案可以提供有关模块解析如何工作的提示:
您可以使用 Gulp 及其插件进行打包:
请参阅以下答案:
关于typescript - 我的 Angular 2 应用程序需要很长时间才能为初次使用的用户加载,我需要帮助来加快速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35253914/
这个问题在这里已经有了答案: Isn't an Int64 equal to a long in C#? (2 个答案) 关闭 9 年前。 它不应该是一个整数类型吗? 这样,一些使用 int 的函数
当我遇到一些我想知道的事情时,我正忙着解析一个二进制文件。 Stream.Position属性的类型为Int64或long。为什么是这样?因为流中的位置不能为负,所以使用 UInt64 不是更有意义吗
所以第一部分是我从用户那里获得输入,在本例中,输入是“1”作为从另一个函数接收的字符值。 printf ("\nPlease enter 1, 2, 3 or q: "); option =
我正在尝试使用以下代码从 REST 服务返回 JSON: $categories = $categoriesController->listAll(); if($categories){ hea
我阅读了文档,它说 long 是 %li,但打印输出返回为 -2147024891。是什么赋予了? 最佳答案 您甚至没有提供要打印的号码,但我猜您已经无意中发现了签名打印和未签名打印之间的区别。 使用
我正在创建自定义购物车,我正在构建一个查询,该查询从检索我刚刚保存到购物车表中的 session_id 开始。我知道这个值被保存了,我在 mysql 命令行运行这个查询,它返回我需要的但我没有将值放入
我有一个包含 textView 的 scrollView。如果文本很长并且不适合屏幕,我想增加 textView 高度(我想我可以通过添加 NSLayoutConstraint outlet 并修改它
我有一个基本的数据库处理程序类,其中有一个使用 PDO::FETCH_ASSOC 参数返回结果集的公共(public)方法: public function resultSet() { $th
在后台线程中,我调用 PublishSubject.onNext(); 并在主线程中通过 subscribe(PublishSubject.filter(message -> message.getI
我想知道为什么 Amazon Web Services 控制台登录页面有这么长的 url?为什么不只发布数据而不显示其中包含大量数据的冗长 url。以这种方式实现有什么充分的理由吗? 最佳答案 我认为
这个问题在这里已经有了答案: Can I mix MySQL APIs in PHP? (4 个答案) 关闭 6 年前。 希望我犯了一个快速而明显的错误,我浏览了 previous question
我得到了答案:如果我禁用了cookie,那么使用URL重定向我可以传递JSESSIONID,但我的URL已经很长,因为我使用它有约束的GET方法。那怎么办我应该使用我的 session 吗?我希望我的
目前,当我使用 DOMDocument 对象并调用 saveHTML() 时,它会自动添加一些我不需要的 html 标签。我尝试了此处建议的解决方案 ( https://stackoverflow.c
我是一名优秀的程序员,十分优秀!