Angular项目新建
程序员文章站
2023-08-17 23:11:04
Angular新建项目步骤记录 标签(空格分隔): Angular 1. 2. 启动dev环境 3. 修改 为`styles.scss`,同时修改文件 .angular cli.json 中的: 重新打包。 4. 配置全局样式 /src 目录下添加 文件夹 /scss 目录下添加 ,`./utili ......
angular新建项目步骤记录
标签(空格分隔): angular
1. ng new my-app
2. 启动dev环境
cd my-app ng serve --open
3. 修改styles.css
为styles.scss
,同时修改文件 .angular-cli.json 中的:
... "styles": [ "styles.scss" ], ...
重新打包。
4. 配置全局样式
- /src 目录下添加
./scss
文件夹 - /scss 目录下添加
./mixins
,./utilities
文件夹,添加_mixins.scss
(混合),_reboot.scss
(重置浏览器),_utilities.scss
(工具),_variables.scss
(变量)。 - 在
/src/styles.scss
文件中引用以上:
/** * global styles */ @import "scss/_variables.scss"; @import "scss/_mixins.scss"; @import "scss/_reboot.scss"; @import "scss/_utilities.scss";
- 添加
font-awesome
:
npm i --save font-awesome
然后在.angularcli.json
中添加:
... "apps": [{ ... "styles": [ "styles.scss", "../node_modules/font-awesome/scss/font-awesome.scss" ], ... }], ...
- 还可以去iconmoon等网站定制自己的icon字体,
将字体文件放在assets
目录下,这时候引用字体文件的时候,需要将路径设置为绝对路径,。最后在style.scss
文件import即可。
5. 配置全局变量管理,应用初始化,懒加载
- 我们使用cookie进行本地信息管理,所以需要先安装
ngx-cookie
:
npm i --save ngx-cookie
然后在app.module.ts
中:
... @ngmodule({ ... imports: [ cookiemodule.forroot(), ], providers: [ cookieservice ] ... }) ...
- 配置全局变量和数据管理服务。
添加src/services
文件夹,添加ajax.service.ts
(xhr封装),data-store.service.ts
(全局枚举/属性以及接口初始化服务和配置初始化),data-user.service.ts
(用户账户操作信息管理服务), utilities.service.ts
(静态工具类/公共工具)。
在/src/app/中添加app.config.ts
,用于保存全局变量。添加app-routing.module.ts
用于单独配置应用的路由以及路由懒加载。
import {routermodule, routes} from '@angular/router'; import {ngmodule} from '@angular/core'; import {indexcomponent} from '../views/index/index/index.component'; const app_routes: routes = [ { path: '', component: indexcomponent } ]; @ngmodule({ declarations: [ indexcomponent ], imports: [ routermodule.forroot(app_routes, { usehash: boolean(history.pushstate) === false }) ], exports: [ routermodule ], providers: [] }) export class approutingmodule { }
- 设置应用初始化
在app.module.ts
中调用数据初始化:
... export function appinit(apidataservice: apidataservice, userdataservice: userdataservice) { apidataservice.initconfig(); // 初始化配置数据 apidataservice.init(); // 初始化token userdataservice.init(); // 初始化用户信息 return () => observable.of([]); } @ngmodule({ ... providers: [ ... apidataservice, userdataservice, { provide: app_initializer, usefactory: appinit, deps: [apidataservice, userdataservice], multi: true } ... ] ... })
- lazyload模块
比如我们有一个账号登录account.module.ts
。实现懒加载需要在app-routing.module.ts
中这样引用:
... const app_routes: routes = [ { path: '', component: indexcomponent }, { path: 'account', loadchildren: 'views/account/account.module#accountmodule' } // 实现懒加载 ]; @ngmodule({ declarations: [ indexcomponent ], imports: [ routermodule.forroot(app_routes, { usehash: boolean(history.pushstate) === false }) ], exports: [ routermodule ], providers: [] }) export class approutingmodule { }
在浏览器中,当出现account.module.chunk.js
的js加载就表示成功了:
6. 其他
- 应用加载显示
应用首次进入的时候会有白屏。可以添加一些loading动画使加载过程有更好的用户体验。
打开根目录下的index.html
,可以在app-root
中填入任何代码:
... <body> <app-root> <style> app-root { display: flex; justify-content: center; align-items: center; height: 100vh; color: #f4d8d9; text-transform: uppercase; font-family: -apple-system, blinkmacsystemfont, "segoe ui", roboto, oxygen-sans, ubuntu, cantarell, helvetica, sans-serif; font-size: 25px; text-shadow: 2px 2px 10px rgba(0,0,0,0.2); } body { background: #21aba5; margin: 0; padding: 0; } @keyframes dots { 50% { transform: translatey(-.4rem); } 100% { transform: translatey(0); } } .d { animation: dots 1.5s ease-out infinite; } .d-2 { animation-delay: .5s; } .d-3 { animation-delay: 1s; } </style> loading<span class="d">.</span><span class="d d-2">.</span><span class="d d-3">.</span> </app-root> </body> </html>
以上源码请参见github。纯属个人见解,如有错误疏漏之处望不吝赐教。
上一篇: plsql连接oracle数据库的配置
下一篇: 太太是不会相信的