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

注意：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. BZOJ - 4520 K远点对

    题意:已知平面内 N 个点的坐标,求欧氏距离下的第 K 远点对 维护大小为2k最小堆,KD树的估值用前面提到的做法 PS.网上有人估价是使用边界四个点的最值来独立枚举,然而这样写似乎过不了 #incl ...

  2. HDU2588

    结论:如果p是n的约数,那么满足gcd(i,n)==p的i的个数是Φ(n/p) #include<bits/stdc++.h> using namespace std; const int ...

  3. 【网络】EIGRP负载均衡、手工汇总、泄露明细、安全认证

    基于6.6.6.6/24访问13.1.1.1/24进行负载均衡实例图 一.等价负载均衡 等价负载均衡前,R5路由器背后的6.6.6.6/24访问R1的13.1.1.1/24, 从15.1.1.0/24 ...

  4. 什么是RFID? 射频识别技术的特点及工作原理！

    RFID即Radio Frequency Identifcation,就是射频识别技术,这篇给大家讲述的就是这个射频识别技术.这里就涉及到射频,电磁学等等知识.看完这篇,你应该会对这些知识有些了解,大 ...

  5. Spark遇到的报错和坑

    1. Java版本不一致,导致启动报错. # 解决方法: 在启动脚本最前边添加系统参数,指定Java版本 export JAVA_HOME=/usr/java/jdk1..0_181-amd64/jr ...

  6. java se系列（二） 关键字、注释、常量、进制转换、变量、数据类型转换、运算符

    1 关键字 1.1 关键字的概述 Java的关键字对java的编译器有特殊的意义,他们用来表示一种数据类型,或者表示程序的结构等,关键字不能用作变量名.方法名.类名.包名. 1.2 常见的关键字 备注 ...

  7. 解决dns服务器未找到问题 &&DNS解析服务器&&连接问题

    第一部分: 有时已经连接到了网络,但是却提示未找到dns服务器,或未连接dns服务器,这多是因为dns设置的问题.下面是几种可行的解决方法. 方法一: 1. win + R   -> cmd - ...

  8. filter get乱码 全站编码解决 包装模式

    包装模式简介: package com.itheima.test; import java.io.BufferedReader; import java.io.IOException; import ...

  9. 第十九章：UTC time和local time的互换

    通常我们服务器端的时间使用UTC格式,避免服务器的时区对最终的时间产生影响.而客户端需要根据具体的时区显示local time,本文将介绍如何将服务器的UTC time(基于asp.net web a ...

  10. vs2013下c++调用python脚本函数 出现的一些问题总结

    原文作者:aircraft 原文地址:https://www.cnblogs.com/DOMLX/p/9530834.html 首先是配置: 使用VS2013创建工程. 将libs中的python27 ...