Angular_学习笔记_01

最新推荐文章于 2020-11-21 07:37:24 发布

pre_eminent

最新推荐文章于 2020-11-21 07:37:24 发布

阅读量306

点赞数

分类专栏： # Angular2 文章标签： Angular

本文链接：https://blog.youkuaiyun.com/pre_eminent/article/details/80726266

版权

Angular2 专栏收录该内容

10 篇文章

订阅专栏

3天Angular视频课程之第1天学习笔记

1. 安装 Node

官网下载,一路Next->

2. 安装Angular-cli

sudo npm install -g @angular/cli

3. ng new app-name

4. 运行项目

cd app-name

ng serve --open

5. 安装WebStorm

当前Angular版本如下:

组件相关内容图示:

@NgModule({
declarations: [只能是组件,管道,和指令],
providers: [只能声明服务]
})

注意下面的index和main节点

声明的是app的入口

下面讲的是如何给WebStorm配置快速启动命令

第1步,点击右上方的箭头,选择: Edit Configurations

第2步, 点击 + 号, 选择新建 npm 命令

第3步, 起个名字, 并选择一个 start命令 (在package.json中配置好了的)

然后确定

第4步, 回到WebStorm, 右上角,此时已经有了快速启动按钮了,

点击启动,就会执行npm start了

如图所示:

下面是安装并配置jquery和bootstrap到项目中

分成3个步:

第1步, npm install jquery bootstrap --save

注意: bootstrap使用3.3.7版本

npm install bootstrap@3.3.7 --save

第2步, 在angular.json中配置jquery和bootstrap的js和css路径

如图所示:

第3步, 安装 jquery和bootstrap的typescript类型说明

npm install @types/jquery @types/bootstrap --save-dev

现在就可以识别,并在项目中使用jquery $了

如图所示:

下面讲一下项目的结构, 一共有七个组件

分别是一个大的 AppComponent

1. 顶部的HeaderComponent

2. 左边的SearchComponent

3. 底部的FooterComponent

4. 轮播图组件CarouselComponent

5. 动漫组件 AnimeComponent

6. 评分组件 RatingComponent

命令如下:

ng generate component search 

ng generate component carousel

ng generate component anime 
ng generate component rating 

ng generate component footer

效果如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { SearchComponent } from './search/search.component';
import { CarouselComponent } from './carousel/carousel.component';
import { AnimeComponent } from './anime/anime.component';
import { RatingComponent } from './rating/rating.component';
import { FooterComponent } from './footer/footer.component';


@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    SearchComponent,
    CarouselComponent,
    AnimeComponent,
    RatingComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如图所示:

第1步,我们来通过bootstrap实现app-component的样式布局

app.component.html代码如下:

<app-header></app-header>

<div class="container">
  <div class="row">
    <!--左边是搜索栏,占1/4-->
    <div class="col-md-3">
      <app-search></app-search>
    </div>

    <!--右边是上下两块,占3/4-->
    <div class="col-md-9">
      <!--上面是轮播图-->
      <div class="row">
        <app-carousel></app-carousel>
      </div>

      <!--下面是anime-->
      <div class="row">
        <app-anime></app-anime>
      </div>
    </div>
  </div>

</div>

<app-footer></app-footer>

效果如下:

下面开始写header部分

header.component.html代码如下:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!--分为两部分-->
    <div class="navbar-header">
      <!--注意这儿data-target要么用# + id,要么用. + class-->
      <button data-target=".navbar-beyond" type="button" class="navbar-toggle collapsed" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand">未闻花名</a>
    </div>

    <!--展开的这一部分-->
    <div class="collapse navbar-collapse navbar-beyond" >
      <ul class="nav navbar-nav">
        <li><a href="#">关于我们</a></li>
        <li><a href="#">我要捐助</a></li>
        <li><a href="#">网站地图</a></li>
      </ul>
    </div>

  </div>
</nav>

接着在全局style.css文件中,设置一下padding-top: 70px

/* You can add global styles to this file, and also import other style files */
body {
  padding-top: 70px;
}

接着是footer.component.html

代码如下:

<div class="container">
  <hr>

  <footer>
    <div class="row">
      <div class="col-lg-12">
        <p>Copyright © 2018 Powered by beyond</p>
      </div>
    </div>
  </footer>
</div>

效果如下:

下面开始写左边的搜索框

代码如下:

<form name="searchForm" role="form">
  <div class="form-group">
    <label for="animeName">动漫名称:</label>
    <input type="text" id="animeName" placeholder="动漫名称" class="form-control">
  </div>

  <div class="form-group">
    <label for="animeYear">上映年份:</label>
    <input type="number" id="animeYear" placeholder="上映年份" class="form-control">
  </div>

  <div class="form-group">
    <label for="animeType">动漫类型:</label>
    <input type="text" id="animeType" placeholder="动漫类型" class="form-control">
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-primary btn-block">搜索</button>

  </div>

</form>

效果如下:

下面开始写右边的轮播图carousel

代码如下:

<div id="id_div_carousel" class="carousel slide" data-ride="carousel">
  <!--下方小圆点指示器-->
  <ol class="carousel-indicators">
    <li data-target="#id_div_carousel" data-slide-to="0" class="active"></li>
    <li data-target="#id_div_carousel" data-slide-to="1"></li>
    <li data-target="#id_div_carousel" data-slide-to="2"></li>
  </ol>

  <!--上方轮播图-->
  <div class="carousel-inner">
    <div class="item active">
      <!--http://placehold.it/800x300-->
      <img class="slide-img" src="/assets/menma_01.jpeg" alt="" />
    </div>
    <div class="item ">
      <img class="slide-img" src="/assets/tiger_02.jpg" alt="" />
    </div>
    <div class="item ">
      <img class="slide-img" src="/assets/k-on_03.jpg" alt="" />
    </div>
  </div>

  <!--左右箭头-->
  <a class="left carousel-control" href="javascript:$('.carousel').carousel('prev')">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="javascript:$('.carousel').carousel('next')">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>



</div>

样式如下:

img {
  width: 100%;
}

carousel.component.js代码如下:

主要是手动让轮播图动起来

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.css']
})
export class CarouselComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  ngAfterViewInit(){
    // 让轮播图 自动播放
    $('#id_div_carousel').carousel();
  }

}

效果如下:

未完待续,下一章节,つづく