angular9教程之使用

Fork Me On Github

安装Angular CLI

npm install -g @angular/cli

生成初始程序

ng new my-app

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

运行

cd my-app
ng serve --open

使用 bootstrap

npm i bootstrap

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

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

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

或者使用 ng-bootstrap

ng add @ng-bootstrap/ng-bootstrap

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

使用 fontawesome

npm i @fortawesome/fontawesome-free

引用 css 同上

引用其他包的样式和脚本

"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"
]

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 节点加上文件相对路径

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