当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Angular项目新建

Angular项目新建

2018年09月07日  | 移动技术网IT编程  | 我要评论

真爱如血第一季下载,李允珍,96同城加盟

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加载就表示成功了：

lazyload

6. 其他
  • 应用加载显示

应用首次进入的时候会有白屏。可以添加一些loading动画使加载过程有更好的用户体验。
打开根目录下的,可以在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。纯属个人见解，如有错误疏漏之处望不吝赐教。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网