bootstrap data-field 绑定属性_Angular和BootStrap的一个简单demo

Angular和BootStrap的一个简单demo

根据Angular5高级编程这本书第二章搭建的demo

参考博客：https://blog.csdn.net/crper/article/details/64443239

代码地址：https://github.com/Harry-ZH-Wang/AngularDemo

---

1. 添加bootstrap包

首先ng new 项目名称创建一个Angular工程，步骤和正常创建步骤相同，然后导入BootStrap包

如果不清楚怎么构建可以看：https://www.jianshu.com/p/65e603da0828

在package.json文件中添加BootStrap CSS 的包 : "bootstrap": "4.0.0-alpha.4"

"dependencies": {    "@angular/animations": "~7.2.0",    "@angular/common": "~7.2.0",    "@angular/compiler": "~7.2.0",    "@angular/core": "~7.2.0",    "@angular/forms": "~7.2.0",    "@angular/platform-browser": "~7.2.0",    "@angular/platform-browser-dynamic": "~7.2.0",    "@angular/router": "~7.2.0",    "core-js": "^2.5.4",    "rxjs": "~6.3.3",    "tslib": "^1.9.0",    "zone.js": "~0.8.26",    "bootstrap": "4.0.0-alpha.4"  }

cmd cd 到建立的项目的目录下面，执行nmp install下载bootstrap的包。

2. 添加css样式

在angular.json文件中添加bootstrap的css样式，angularJsDemo为项目名

"styles": [              "src/styles.css",              "../angularJsDemo/node_modules/bootstrap/dist/css/bootstrap.css"            ]

测试下bootstrap导入是否成功，我们修改下src下面的index.html

  AngularJsDemo

测试列表

Add

标题 描述 第一行 no 第二行 no 第三行 no

启动一下，bootStrap的样式生效

这里只是做了个静态页面的展示，只是为了测试，下面按照书中的代码示例，添加Angular的功能

3. HTML页面添加Angula