所以找一个镜像站下载:https://github.com/waylau/git-for-win

这是一篇学习条记. angular 5 正式版都快出了, 不过主要是性能升级.

我认为angular 4还是很适合企业的, 就像.net一样.

我用的是windows 10

安置工具:

git for windows: 官网很慢, 所以找一个镜像站下载: https://github.com/waylau/git-for-win, 淘宝镜像的速度还是蛮快的:

安置的时候, 建议选择这个, 会添加很多命令行工具: 

nodejs: 去官网下载就行: https://nodejs.org/en/

正常安置即可. npm的版本不要低于5.0吧:

angular-cli, 官网: https://github.com/angular/angular-cli

npm install -g @angular/cli

visual studio code: https://code.visualstudio.com/

and visual studio 2017 of course.

成立angular项目

进入命令行在某个处所执行命令:

ng new client-panel

这就会成立一个client-panel文件夹, 里面是该项目的文件, 然后它会当即执行npm install命令(这里不要使用淘宝的cnpm进行安置, 有bug), 稍等一会就会结束.

使用vscode打开该目录, 然后在vscode里面打开terminal:

terminal默认的可能是powershell, 如果你觉得powershell有点慢的话, 可以换成bash(安置git时候带的)或者windows command line等.

第一次打开terminal的时候, vscode上方会提示你配置terminal, 这时就可以改换默认的terminal. 否则的话, 你可以点击菜单file-reference-settings, 本身选择一个terminal应用:

同样可以安置几个vscode的插件:

然后试运行一下项目, 在terminal执行 ng serve, 如果没问题的话, 概略是这样: 

浏览器运行: :4200

安置bootstrap4等:

安置bootstrap4, tether, jquery等:

npm install [email protected] tether jquery --save

安置告成后, 打开 .angular-cli.json, 把相关的css和js添加进去:

然后在运行尝尝 ng serve, 刷新:

字体已经转变, bootstrap起感化了.

成立Components 成立dashboard:

terminal执行

ng g component components/dashboard

执行告成后会生成4个文件:

并且会自动在app.module.ts里面声明:

成立其他 components:

ng g component components/clients ng g component components/clientDetails ng g component components/addClient ng g component components/editClient ng g component components/navbar ng g component components/sidebar
ng g component components/login
ng g component components/register
ng g component components/settings
ng g component components/pageNotFound

成立Route路由

import { BrowserModule } from ‘@angular/platform-browser‘; import { NgModule } from ‘@angular/core‘; import { RouterModule, Routes } from ‘@angular/router‘; import { AppComponent } from ‘./app.component‘; import { DashboardComponent } from ‘./components/dashboard/dashboard.component‘; import { ClientsComponent } from ‘./components/clients/clients.component‘; import { ClientDetailsComponent } from ‘./components/client-details/client-details.component‘; import { AddClientComponent } from ‘./components/add-client/add-client.component‘; import { EditClientComponent } from ‘./components/edit-client/edit-client.component‘; import { NavbarComponent } from ‘./components/navbar/navbar.component‘; import { SidebarComponent } from ‘./components/sidebar/sidebar.component‘; import { LoginComponent } from ‘./components/login/login.component‘; import { RegisterComponent } from ‘./components/register/register.component‘; import { SettingsComponent } from ‘./components/settings/settings.component‘; import { PageNotFoundComponent } from ‘./components/page-not-found/page-not-found.component‘; const appRoutes: Routes = [ { path: ‘‘, component: DashboardComponent }, { path: ‘register‘, component: RegisterComponent }, { path: ‘login‘, component: LoginComponent } ]; @NgModule({ declarations: [ AppComponent, DashboardComponent, ClientsComponent, ClientDetailsComponent, AddClientComponent, EditClientComponent, NavbarComponent, SidebarComponent, LoginComponent, RegisterComponent, SettingsComponent, PageNotFoundComponent ], imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

添加router-outlet:

打开app.component.html, 清空内容, 添加一个div(可以输入div.container然后按tab健):