Angular新建项目步骤记录

标签(空格分隔): Angular


1. ng new my-app
2. 启动dev环境
cd my-app
ng serve --open
3. 修改styles.cssstyles.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";

注意:Chrome并不支持12px以下的大小 使用rem时候需要注意

  • 添加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。纯属个人见解,如有错误疏漏之处望不吝赐教。

Angular项目新建的更多相关文章

  1. 个人从源码理解angular项目在JIT模式下的启动过程

    通常一个angular项目会有一个个模块(Module)来管理各自的业务,并且必须有一个根模块(AppModule)作为应用的入口模块,整个应用都围绕AppModule展开.可以这么说,AppModu ...

  2. [转]Angular项目目录结构详解

    本文转自:https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873 版权声明:本文为博主原创文章,转载请注明地址.如果文中有什么纰漏 ...

  3. Angular学习笔记—创建一个angular项目

    开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 如何安装node.js和npm npm使用介绍 1.安装angul ...

  4. Angular项目下载启动

    Angular cmdb-front 新建项目流程 打开idea  New>Project 2,打开项目仓库,拷贝项目地址 拷贝项目路径,填写项目名 点击clone,然后一路Next 项目代码已 ...

  5. angular项目中各个文件的作用

    原文地址 https://www.jianshu.com/p/176ea79a7101 大纲 1.对angular项目中的一些文件的概述 2.对其中一些文件的详细描述 2.1.package.json ...

  6. ng-cli搭建angular项目框架

    原文地址 https://www.jianshu.com/p/0a8f4b0f29b3 环境准备 以下步骤都不需要事先创建文件夹,只是环境的准备过程,只有到需要搭建项目的时候才需要创建文件夹用来存放项 ...

  7. .net core service && angular项目 iis发布

    项目结构 .net core 后端服务站点 angular 前端页面站点 项目模板来自于abp或者52abp .net core 后端服务站点发布到IIS 发布报错 .Net Core使用IIS部署出 ...

  8. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  9. 把angular项目整合到.net mvc中

    之前的开发选择的是完全舍弃服务端,仅保留最简单web服务器提供angular经打包的静态资源,此外所有的业务与数据请求都访问一个分离的WebApi来实现.不过最近碰到一个需求,有必要使用多个客户端,而 ...

随机推荐

  1. UESTC - 1357 前缀和维护

    有点小细节需要注意 sum实时维护有效的连续和 /*H E A D*/ ll dp1[maxn],dp2[maxn]; ll a[maxn],n,sum; int main(){ while(~iin ...

  2. Trie - 20181113

    442. Implement Trie (Prefix Tree) class TrieNode { public boolean isWord; public TrieNode[] children ...

  3. 4.整体架构和Smart Scan

    寻道时间: 外圈,比内圈要多, 即外圈是比较快的. 第一次创建grid disk 时,是创建外圈,用于存放数据的,内圈存储归档这些数据 CellCLI> CREATE GRIDDISK ALL ...

  4. Spring JDBC Framework

    引自 :学习经典:Spring JDBC Framework 这里记录我对Spring JDBC框架的学习.由于Spring JDBC和我之前做的工作有很多共同之处,学习经典Framework的设计, ...

  5. 依赖倒置(Dependence Inversion Principle)DIP

    关于抽象类和接口的区别,可以参考之前的文章~http://www.cnblogs.com/leestar54/p/4593173.html using System; using System.Col ...

  6. (转)shell实现多级菜单脚本编写

    shell实现多级菜单脚本编写 原文:https://www.yuanmas.com/info/2gOwBPvqyb.html 这篇文章主要介绍了Shell实现多级菜单系统安装脚本实例分享,本文脚本用 ...

  7. 《springcloud 四》服务保护机制

    服务保护机制SpringCloud Hystrix 微服务高可用技术 大型复杂的分布式系统中,高可用相关的技术架构非常重要. 高可用架构非常重要的一个环节,就是如何将分布式系统中的各个服务打造成高可用 ...

  8. Java学习第二十二天

    1:登录注册IO版本案例(掌握) 要求,对着写一遍. cn.itcast.pojo User cn.itcast.dao UserDao cn.itcast.dao.impl UserDaoImpl( ...

  9. popchain与对应poc的构造分析

    本文首发于:https://mp.weixin.qq.com/s?__biz=MjM5MTYxNjQxOA==&mid=2652850238&idx=1&sn=6f22d8ab ...

  10. UWP 应用获取各类系统、用户信息 (2) - 商店授权信息、零售演示模式信息、广告 ID、EAS 设备信息、硬件识别信息、移动网络信息

    应用开发中,开发者时常需要获取一些系统.用户信息用于数据统计遥测.问题反馈.用户识别等功能.本文旨在介绍在 Windows UWP 应用中获取一些常用系统.用户信息的方法.示例项目代码可参见 Gith ...