需求:先需要增加一个登录模块

1 创建登录模块

  ng g m testLogin

  1.1 将共享模块导入到登录模块中

    

import { NgModule } from '@angular/core';
import { TestLoginComponent } from './test-login/test-login.component';
import { SharedModule } from '../shared/shared.module'; @NgModule({
imports: [
SharedModule
],
declarations: [TestLoginComponent]
})
export class TestLoginModule { }

  1.2 将创建好的登录模块导入到主模块中

    

2 创建登录组件

  ng g c testLogin/testLogin

3 给登录模块添加路由文件test-login-routing.module.ts

  3.1 进入到路由文件输入 ngroute 然后选择 ng-router-featuremodule

    

    原理:我们已经在编辑其中安装了一个快捷插件Snippets

      

  3.2 对路由文件进行重构

    

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { TestLoginComponent } from './test-login/test-login.component'; const routes: Routes = [
{ path: 'testLogin', component: TestLoginComponent }
]; @NgModule({
imports: [CommonModule, RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TestLoginRoutingModule {}

  3.3 将登录模块的路由导入到登录模块中

    

import { NgModule } from '@angular/core';
import { TestLoginComponent } from './test-login/test-login.component';
import { SharedModule } from '../shared/shared.module';
import { TestLoginRoutingModule } from './test-login-routing.module'; @NgModule({
imports: [
SharedModule,
TestLoginRoutingModule
],
declarations: [TestLoginComponent]
})
export class TestLoginModule { }

  3.4 技巧:对每个模块都单独添加一个路由文件

4 给主模块创建路由文件app-routing.module.ts

  4.1 进入到路由文件利用快捷键生成路由文件模板

  4.2 对路由文件进行重构

    

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component'; const routes: Routes = [
{ path: '', redirectTo: '/testLogin', pathMatch: 'full' }
]; @NgModule({
imports: [CommonModule, RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

  4.3 将主路由文件导入到主模块中

    

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
import { HeaderComponent } from './frame/header/header.component';
import { MainComponent } from './frame/main/main.component';
import { FooterComponent } from './frame/footer/footer.component';
import { SidebarComponent } from './frame/sidebar/sidebar.component';
import { CoreModule } from './core/core.module';
import { AppRoutingModule } from './app-routing.module';
import { LoginModule } from './login/login.module';
import { TestLoginModule } from './test-login/test-login.module'; @NgModule({
declarations: [
AppComponent,
HeaderComponent,
MainComponent,
FooterComponent,
SidebarComponent
],
imports: [
CoreModule,
AppRoutingModule,
BrowserModule,
LoginModule,
TestLoginModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

  4.4 浏览器访问 http://127.0.0.1:4200 后会自动重定向到 http://127.0.0.1:4200/testLogin

    

5 在登录组件中使用MdCardModule模块提供的组件

  5.1 在共享模块中导入MdCardModule模块

    

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule
} from '@angular/material'; @NgModule({
imports: [
CommonModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule ],
declarations: [],
exports: [
CommonModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule
]
})
export class SharedModule { }

  5.2 在登录模块中使用 md-card 组件

    技巧01:由于md-card组件是有动画的,需要导入一个动画依赖;并将这个动画模块导入到核心模块中去

      cnpm install --save @angular/animation

      

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { SharedModule } from '../shared/shared.module';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { SidenavComponent } from './sidenav/sidenav.component'; import { DomSanitizer } from '@angular/platform-browser';
import { MdIconRegistry } from '@angular/material';
import { loadSvgResources } from '../utils/loadSvgResources' import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({
imports: [
SharedModule,
BrowserAnimationsModule
],
declarations: [
HeaderComponent,
FooterComponent,
SidenavComponent
]
,
exports: [
HeaderComponent,
FooterComponent,
SidenavComponent
]
})
export class CoreModule {
constructor(
@Optional() @SkipSelf() parentModule: CoreModule,
mdIconRegistry: MdIconRegistry,
domSanitizer: DomSanitizer
) {
if (parentModule) {
throw new Error('CoreModule模块已经存在,请尽在主模块中进行引入。')
}
loadSvgResources(mdIconRegistry, domSanitizer);
}
}

    

<md-card>
<md-card-header>
<md-card-title>登录表单</md-card-title>
</md-card-header>
<md-card-content>
<h2>内容区域</h2>
</md-card-content>
<md-card-actions>
<p>还没注册?<a href="">注册</a></p>
<p>忘记密码?<a href="">找回</a></p>
</md-card-actions>
</md-card>

  5.3 效果图如下

    

6 在登录组件中使用MdInputModule模块

  6.1 在共享模块中导入MdInputModule模块

    

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule
} from '@angular/material'; @NgModule({
imports: [
CommonModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule ],
declarations: [],
exports: [
CommonModule,
MdSidenavModule,
MdToolbarModule,
MdIconModule,
MdButtonModule,
MdCardModule,
MdInputModule
]
})
export class SharedModule { }

  6.2 在登录组件中使用md-input-container组件

    

<md-card>
<md-card-header>
<md-card-title>登录表单</md-card-title>
</md-card-header>
<md-card-content>
<md-input-container color="primary" floatPlaceholder="float" >
<span mdPrefix>Wang.</span>
<input mdInput type="text" placeholder="你的Email" />
<span mdSuffix>@163.com</span>
<md-hint>这是必填项哟</md-hint>
<md-error>邮箱必填</md-error>
</md-input-container>
</md-card-content>
<md-card-actions>
<p>还没注册?<a href="">注册</a></p>
<p>忘记密码?<a href="">找回</a></p>
</md-card-actions>
</md-card>

  6.3 效果图如下

    

  6.4 md-input-container高级用法

    6.4.1 md-input-container拥有的一些属性

      color : md-input-container组件的基调颜色

        primary  ->  主色

        accent  ->  副色

        warn  ->  警告

      floatPlaceholder : 输入提示动画效果

        float -> 浮动显示

        always  ->  浮动到上方

        never  ->  不进行浮动显示

      hintLabel : 提示信息,显示在input标签下方

      

<md-card>
<md-card-header>
<md-card-title>登录卡片</md-card-title>
</md-card-header>
<md-card-content>
<md-input-container color="primary" floatPlaceholder="foloat" hintLabel="邮箱是必填项">
<!-- <span mdPrefix>www.xiangxu.</span> -->
<input mdInput type="text" placeholder="你的邮箱" />
<!-- <span mdSuffix>@163.com</span> -->
</md-input-container>
</md-card-content>
<md-card-actions>
<p>还没注册吗?&nbsp;<a href="">注册</a></p>
<p>忘记密码了吗?&nbsp;<a href="">登录</a></p>
</md-card-actions>
</md-card>

    6.4.2 为md-input-container拥有的一些属性这是前缀和后缀

      

<md-card>
<md-card-header>
<md-card-title>登录卡片</md-card-title>
</md-card-header>
<md-card-content>
<md-input-container color="primary" floatPlaceholder="foloat" hintLabel="邮箱是必填项">
<span mdPrefix>www.xiangxu.</span>
<input mdInput type="text" placeholder="你的邮箱" />
<span mdSuffix>@163.com</span>
</md-input-container>
</md-card-content>
<md-card-actions>
<p>还没注册吗?&nbsp;<a href="">注册</a></p>
<p>忘记密码了吗?&nbsp;<a href="">登录</a></p>
</md-card-actions>
</md-card>

    

Material使用03 MdCardModule模块、MdInputModule模块的更多相关文章

  1. Yii 框架学习--03 多应用多模块

    本文以YII 2.0.7为例. 概述 首先看看多应用和多模块的特点: 多应用的特点: 独立配置文件 独立域名 多模块的特点: 统一配置文件 统一域名 那么,实际该怎么决定使用多应用还是多模块呢? 对于 ...

  2. node(03)--利用 HTTP 模块 URl 模块 PATH 模块 FS 模块创建一个 WEB 服务器

    Web 服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等 Web 客户端提供文档,也可以放置网站文件,让全世界浏览:可以放置数据文件,让全世界下载.目前最主流的三个 We ...

  3. Material使用04 MdCardModule和MdButtonModule综合运用

    设计需求:设计一个登陆页面 1 模块导入 1.1 将MdCardModule和MdButtonModule模块导入到共享模块中 import { NgModule } from '@angular/c ...

  4. s14 第5天 时间模块 随机模块 String模块 shutil模块(文件操作) 文件压缩(zipfile和tarfile)shelve模块 XML模块 ConfigParser配置文件操作模块 hashlib散列模块 Subprocess模块(调用shell) logging模块 正则表达式模块 r字符串和转译

    时间模块 time datatime time.clock(2.7) time.process_time(3.3) 测量处理器运算时间,不包括sleep时间 time.altzone 返回与UTC时间 ...

  5. Python第十三天 django 1.6 导入模板 定义数据模型 访问数据库 GET和POST方法 SimpleCMDB项目 urllib模块 urllib2模块 httplib模块 django和web服务器整合 wsgi模块 gunicorn模块

    Python第十三天   django 1.6   导入模板   定义数据模型   访问数据库   GET和POST方法    SimpleCMDB项目   urllib模块   urllib2模块 ...

  6. Python常用模块-时间模块

    在写代码的过程中,我们常常需要与时间打交道,在python中,与时间处理有关的模块有time,datetime和calendar.,这里主要介绍time和datetime模块 在python中,表示时 ...

  7. Python常用模块-时间模块(time&datetime)

    Python常用模块-时间模块(time & datetime) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.初始time模块 #!/usr/bin/env pyth ...

  8. time模块/datetime模块/calendar模块

    time模块时间的表示形式时间戳:以整型或浮点型表示⼀个时间,该时间以秒为单位,这个时间是以1970年1⽉1⽇0时0分0秒开始计算的. 导入time import time 1.返回当前的时间戳 no ...

  9. 【Python】[模块]使用模块,安装第三方模块

    一个.py文件就称之为一个模块(Model)按目录来组织模块的方法,称为包(Package)每一个包目录下面都会有一个__init__.py的文件内置函数1.使用模块 导入模块 import sys ...

随机推荐

  1. 颜色框架Hue相关使用方法

    Hue地址 cocoapods安装Hue pod "Hue" 导入框架 import Hue 将十六进制数字变成对应的颜色值 let color = UIColor.init(he ...

  2. Linux下打造全方位立体监控系统

    前言 本文主要介绍如何使用Grafana和Prometheus以及node_exporter对Linux服务器性能进行监控.下面两张图分别是两台服务器: 服务器A 服务器B 概述 Prometheus ...

  3. Three.js 保存camera(视角)设置到数据库,包括场景的缩放、旋转、移动等

    最近在做的项目中遇到需要保存当前的3d管道视角设置的问题,用户希望在对3d场景内的管道进行了缩放.旋转.移动之后可以将场景当前的视角状态保存在数据库中,并在下次加载时读取. 经过不断的尝试和研究,在同 ...

  4. 虚拟机通信配置与Xshell连接

    本文主要讲解虚拟机通信配置的详细步骤和Xshell工具连接,以及如何诊断网络问题并进行相应配置的问题. 1. 虚拟机通信配置 虚拟机通信配置的基本流程如图所示: 首先,我们先打开新建的虚拟机,然后输入 ...

  5. 二:熟悉 TCP/IP 协议

    一篇文章带你熟悉 TCP/IP 协议(网络协议篇二) 同样的,本文篇幅也比较长,先来一张思维导图,带大家过一遍. 一图看完本文 一. 计算机网络体系结构分层 计算机网络体系结构分层计算机网络体系结构分 ...

  6. KICKSTART无人值守安装 - (字符界面操作)

    kickstart 部署 1.1 kickstart简介说明 1.1.1 pxe工作过程(图) 1.1.2 kickstart具体过程(图) 1.2 kickstart无人值守部署 1.2.1 系统环 ...

  7. Python的__main__.py用法

    [背景] 在看flower的时候看到__main__.py文件,不知道具体做什么用? 故先进行测试看看. [测试代码] 测试代码目录结构如下: . `-- test |-- __init__.py | ...

  8. YII 多表联查 纵表

    A id 与B a.id B id 与C b.id C id 与D c.id 查A读D数据 应用场景: order表 ordergoods表 goods表 merchant加盟商 order 与ord ...

  9. 《Metasploit魔鬼训练营》第七章学习笔记

    P314 木马程序的制作 msfpayload和msfencoder已被msfvenom取代.使用msfvenom -h查看具体用法.以下网址也有相关教程: https://github.com/ra ...

  10. C语言之随机数

    #include<stdio.h>#include<stdlib.h>#include<time.h>int main(){ srand(time(0)); int ...