ng 目录详解

柔情只为你懂 2021-11-17 07:12 241阅读 0赞

在新建的项目中需要我们关注的就是package.json和src文件夹

node\_modules (项目所需依赖)是package.json所创建的模块安装到node\_modules中

src:是代码的归属地，我们所需要写的代码哦基本都是在此文件夹下完成（定义组件，定义服务等）

package.json（项目配置文件） 定义项目名称，版本，项目所需要的依赖等

**项目的浏览器兼容**

browerslist： 这里是默认的浏览器兼容，如果需要更改，或者兼容到哪个，把对应前面的not 删除，或者不想其兼容，添加一个not 即可

--------------------

src文件夹：

app文件夹：存放组件和根模块

assets:静态资源文件

environments：环境配置

--------------------

index.html  入口文件

main.ts 整个项目入口

--------------------

polyfills.ts（填充库）一般不会使用到

使用socket.io报global is not defined 错误====解决方案

在填充库中加入一句话 `(window as any).global = window;即可`

--------------------

核心文件存放

src文件夹下的app 文件夹存放着核心文件

app.module.ts   根模块  （告诉ng 如何安装应用）

根组件：app.component.html / app.component.scss / app.component.ts

NgModule(这是一个装饰器)（\{

declarations(配置项目的配置文件):\[\],

providers(配置项目需要的服务):\[\]，

bootstrap(配置启动)\[\]

\}）

export class AppModule\{\} ( 暴露根模板)

--------------------

app.compenent.ts文件

@Component（本是一个装饰器）存放三个组件（\{

selector : '',

templateUrl：‘’，

styleURL是：\[\]

\}）

顶部有一行代码：

import \{ Component \} from ' @angular/core '此句的意思是(引入核心模板中的compenent)

export class AppComponent ( 暴露组件 )\{

title = 'angular' ；  定义属性

constructor()\{

//构造函数

\}

\}

--------------------

![1663572-20190723151953298-1122968234.png][]

在ng-cli 6+以后的版本中使用angular.json 代替了以前的angular-cli.json ，当新建一个ng-cli的项目发现项目中没有ng-cli。json 不要觉得项目新建失败

![1663572-20190723153601870-603833351.png][]

对于升级后的版本angular.json 的新的一些解析

![1663572-20190723160850384-1292788393.png][]

转载于:https://www.cnblogs.com/rockyjs/p/11232443.html

[1663572-20190723151953298-1122968234.png]: /images/20211116/903e15a8c77e4d3eb17d1661ec9750a8.png
[1663572-20190723153601870-603833351.png]: /images/20211116/ca395ca8769e46f0acad5eaef525fa57.png
[1663572-20190723160850384-1292788393.png]: /images/20211116/94fba5f11c274f7ba00cd45031a5edb9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，241人围观）

还没有评论，来说两句吧...

相关阅读

相关 AngularJS ng-class、ng-style

`一、 ng-class` > ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。 > > `ng-class 指令的值可以是字符...

Bertha 。/ 2024年04月17日 22:54/ 0 赞/ 41 阅读

相关 ng-bind 与ng-model区别

双向绑定，一般来说是这样 <input ng-model="object.xxx"> <span ng-bind="object.xxx"></span> ng-bi

冷不防/ 2022年09月29日 04:16/ 0 赞/ 171 阅读

相关深究AngularJS——ng-drag、ng-drop

1.相关地址：插件下载：[https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.j

╰半夏微凉°/ 2022年09月21日 05:38/ 0 赞/ 167 阅读

相关 AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model

AngularJS的绑定： ng-bind可用于绑定变量, \{ \{ 表达式\}\} 内放置变量时，作用与ng-bind相同。如下例： <!doctype htm

以你之姓@/ 2022年08月08日 06:23/ 0 赞/ 134 阅读

相关 ng-if、ng-show和ng-hide指令的区别

angularJS中的ng-show、ng-hide、ng-if指令都可以用来控制dom元素的显示或隐藏。ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元

本是古典何须时尚/ 2022年07月12日 03:53/ 0 赞/ 161 阅读

相关 ng-container ng-for ng-if 数据类型

import {Component} from '@angular/core' @Component({ selector:'demo

向右看齐/ 2022年06月01日 03:30/ 0 赞/ 146 阅读

相关 ng-template、ng-content、ng-container

ng-template、ng-content、ng-container三者应该是自定义组件需要经常用到的指令。今天咱们就来简单了解下ng-template、ng-

小鱼儿/ 2022年05月10日 01:16/ 0 赞/ 129 阅读

相关 angular7——ng-template、ng-content、ng-container

一、ng-content ng-content是内容映射指令(也叫内容嵌入)，相当于vue中的slot内容分发，内容映射指的是在组件中嵌入模板代码，方便定制可复用的组件，

秒速五厘米/ 2022年02月01日 06:04/ 0 赞/ 295 阅读

相关 ng 目录详解

在新建的项目中需要我们关注的就是package.json和src文件夹 node\_modules (项目所需依赖)是package.json所创建的模块安装到node\_m

柔情只为你懂/ 2021年11月17日 07:12/ 0 赞/ 242 阅读

相关 :host :host-context ::ng-deep详解

:host 与 ::ng-deep > :host 表示选择当前的组件。 > > ::ng-deep 可以忽略中间className的嵌套层级关系。直接找到你要

系统管理员/ 2021年09月07日 06:11/ 0 赞/ 398 阅读