如何设计一个angular2项目

Question

我有 2 个 html

1) common-html.html

2) 登录后.html

1) common-html.html--这是我的应用的布局页面，因为它包含我的背景图片和小css。

  <section id="content" style="background-image: url('assets/images/bg.png');background-size: 100% auto;min-height: 100% !important;">
    <div class="content-wrap" [ngClass]="classmap">
            <div class="container clearfix">
                <div class="row  divcenter"   style="max-width:966px;background: #FFF;">
                        <router-outlet></router-outlet>   
                </div>
            </div>
    </div>
</section>

2）这包含我的导航栏和侧边菜单等，应该在登录后出现

  <header-Navbar></header-Navbar>
<div class="col-sm-3 col-md-2 nopadding backgrouncolordiv hidden-xs">
    <div class="margindivcss">
        <div class="col-xs-12 nopadding imgcontainer text-center">
            <img src="assets/images/no_image.png" class="imagewidth">
        </div>   
        <div class="clear"></div>
        <a class="pull-left usernameheading" href="#">{{name}}</a>
        <a class="pull-right" href="#"><i class="icon icon-pencil"></i></a>
        <div class="clear"></div>
    </div>  
    <div class="line"></div>
    <div class="user-list" >
        <ul class="fst-ul">
            <li><a [routerLink]="['/demo/profile']">PROFILE</a></li>
            <li><a [routerLink]="['/demo/social']">SOCIAL ADDRESSES</a></li>
            <li class="list-borbtom"><a [routerLink]="['/demo/custom']">CUSTOM INFO</a></li>
            <li><a   [routerLink]="['/demo/society']">MY SOCIETY<span>(ALL)</span></a></li>
                <ul class="left-sub-list">
                        <li><a [routerLink]="['/demo/society']" style="padding-left:15px" href="#">PERSONAL</a></li>
                        <li><a [routerLink]="['/demo/professional']" style="padding-left:15px"  href="#">PROFESSIONAL</a></li>
                </ul>
        </ul> 
    </div>
</div>


<div class="col-sm-6 col-md-7 topmargin-sm nopadding">
                    <router-outlet></router-outlet>       
            </div>   

我不知道在 main module.ts 和 main.ts 以及 index.html 中做什么。谁能建议帮助。谢谢。

Answer 1

如果你“完全无助”，看看 Angular CLI 可能是件好事，它为你完成了 99.99% 的初始设置，还包括一些非常有用的生成器来添加组件、管道、服务等. 到你的项目。

看看：https://github.com/angular/angular-cli

然而，如果您是 Angular 新手（这就是您“无助”的原因），您可能应该先学习 Angular。 从Tour of Heroes 开始，然后从那里开始。