angular9教程之使用

Fork Me On Github

安装Angular CLI

 
npm install -g @angular/cli
1

生成初始程序

 
ng new my-app
1

必须有一个程序名,没办法生成到当前文件夹

运行

  
cd my-app
ng serve --open
12

使用 bootstrap

 
npm i bootstrap
1

angular.json 修改 projects > my-app > architect > build > options > styles 节点

最前面加上 "node_modules/bootstrap/dist/css/bootstrap.css",

json
     
"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "node_modules/@fortawesome/fontawesome-free/css/all.css",
    "src/styles.scss"
],
12345

或者使用 ng-bootstrap

 
ng add @ng-bootstrap/ng-bootstrap
1

这样就不需要手动去添加样式了

使用 fontawesome

 
npm i @fortawesome/fontawesome-free
1

引用 css 同上

引用其他包的样式和脚本

json
              
"assets": [
    "src/favicon.ico",
    "src/assets"
],
"styles": [
    "node_modules/bootstrap/dist/css/bootstrap.css",
    "node_modules/@fortawesome/fontawesome-free/css/all.css",
    "node_modules/pace-js/templates/pace-theme-flash.tmpl.css",
    "node_modules/ngx-toastr/toastr.css",
    "src/styles.scss"
],
"scripts": [
    "node_modules/pace-js/pace.min.js"
]
1234567891011121314

css

angular.json 修改 projects > my-app > architect > build > options > styles 节点加上 css 文件相对路径

js

angular.json 修改 projects > my-app > architect > build > options > scripts 节点加上 js 文件相对路径

其他文件例如图片

angular.json 修改 projects > my-app > architect > build > options > assets 节点加上文件相对路径

点击查看全文
标签: angular
0 269 0
在 angular 项目中实现对页面的访问控制
按下回车键,焦点移动到下一个表单或提交表单
使用ng-template 显示tree结构数据
使用 ViewContainerRef.createComponent 替代 ComponentFactoryResolver
angular 12使用 KaTex 显示 AsciiMath 格式的公式