angular 4 开发总结

1.开发环境搭建

安装node npm 确认安装node -V npm -V

版本要求

nodejs下载地址

win10系统直接添加到环境变量里面去了 CMD里查看版本 

个人电脑-属性-高级系统设置

 

 在webstorm里使用须要配置下nodejs

File -settings -Languages & Frameworks - Nodejs and NPM

找到node 开启

Latest Current Version: v8.2.1 (includes npm 5.3.0)

不知道为啥开启不了

重启webstorm 

 file-settings

 

不明白为啥忽然能够了

 

实例教学

下载快速起步种子 下载完解压到项目目录里 执行npm install

完成后

执行npm start

 

 

完整截图下来也是不容易啊，而后浏览器直接打开了http://localhost:3000/

 

 

参考资料：

 

webstorm 相关nodejs设置

 

angular cli 快速搭建环境

 确保node 和npm 已经安装

 

npm install -g  @angular/cli  卸载angular cli 的话 就是npm uninstall -g @angular/cli

 

 建立新项目 

ng new demo-name

进入项目目录，启动服务器

cd demo

ng serve --open

 新建组件 

ng g component component-name

 

 这个目录结构

 

 启动测试

ng test

 

 

 

 

开发angular 

 

angular 4 接入bootstrap 

npm查看已安装的包

npm list 

npm list -g 查看全局安装包

卸载npm 包

npm uninstall 包名 --save

目录下有package-lock.json更名为package.json在执行下面命令

执行完上面的命令 仍是会出现package-lock.json 和package.json两个文件 直接删除便可

再次查询即为删除

 

angular 4 路由

使用angular cli 建立两个组件component ,如A和B，

ng g component A

ng g component B

这个命令会自动添加到app.module.ts文件里

先添加

import { RouterModule } from  '@angular/router';

在@NgModule({

declarations:[

AppComponent,

AComponent,

BComponent  //这里就是自动添加上的，使用ng g component 名字 这个命令

]，

imports:[

BrowserModule,

RouterModule.forRoor([

{

path:'a',

component:AComponent //这里就是浏览器地址栏输入 http://localhost/a 页面直接进入组件AComponent里

},

{

path:'b',

component:BComponent //这里就是浏览器地址栏输入 http://localhost/b 页面直接进入组件BComponent里

}

])

]

 

})

效果图：

 

而后在文件 D:\wamp\angular-cli-demo\demo\src\app\app.component.html 中，添加

<div>

<a routerLink="/admin">admin-routerLink</a>
<a routerLink="/production">production</a>
</div>
<router-outlet></router-outlet>

roterLink 注意第二个单词大写  最后要加上router-outlet

效果图

因为首页 D:\wamp\angular-cli-demo\demo\src\index.html  中

index.html 中的app-root

 

直接关联在 D:\wamp\angular-cli-demo\demo\src\app\app.component.ts

因此内容都是在app.component.html里添加便可

 

使用*ngIf 进行条件显示

 做为提示信息仍是不错的好比 注册表单时候的提示信息，插入删除DOM来提示信息的

 

命令创建组件

ng g component 组件名称

目录结构

 

路由模块

新建路由模块  app.routing.module.ts 文件，引入NgModule、 RouterModule 、Routes 模块 ，紧接着引入路由须要的组件 ；

定义常量路由规则 appRouter   这里有个问题：

默认显示（也就是首页）会调用404 没有找到页面的组件 匹配规则须要个默认首页，如今的解决办法是重定向路由，不过地址栏会显示AppComonent ,须要解决办法

写好的路由规则 调用是在  @NgModule 里的imports用RoterModule下的forRoot方法调用 定义好的规则；

这时候须要去匹配须要设置app.module.ts  添加

/*引入路由模块*/
import { AppRoutingModule} from "./app.routing.module";

imports里添加  AppRoutingModule

 

 组件模板里设置以下（app.component.html）

 

angular cli 经常使用查询命令

ng -v 

 

 

常见问题：

1.angular cli 使用命名ng g component new-component时候，提示“Error: More than one module matches. Use skip-import option to skip importing the component into the closest module.”

 

出现这个的缘由是出现了两个module.ts文件

 

解决方法

ng g c new-component --module app

 

参考资料：

https://stackoverflow.com/questions/46174863/error-more-than-one-module-matches-use-skip-import-option-to-skip-importing-th

angular 4引用bootstrap 4

找到.angular-cli.json

D:\wamp\angular4\xxx\.angular-cli.json

在styles和scripts里添加