angular 全局变量

在 Angular 中，可以使用全局变量来存储和访问应用程序中的数据。通常情况下，我们使用服务来实现这一点。服务是一个可注入的类，它可以在整个应用程序中共享数据和功能。通过将服务注入到组件中，我们可以在组件中访问和修改服务中的数据。

另外，Angular 还提供了一个名为 `window` 的全局对象，它可以用来访问浏览器窗口对象。但是，使用全局变量可能会导致代码难以维护和测试，因此应该尽可能避免使用它们。

相关问题

angular webpack配置文件及注释

Angular 使用 webpack 来构建和打包项目，webpack 配置文件默认情况下是隐藏的，使用 Angular CLI 提供的 `ng eject` 命令可以将默认的 webpack 配置文件转换为标准的 webpack 配置文件，并将所有依赖项添加到 `package.json` 文件中。下面是一个示例的 Angular webpack 配置文件及注释：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // 入口文件
  entry: {
    'polyfills': './src/polyfills.ts',
    'app': './src/main.ts'
  },
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    // 输出文件的名称
    filename: '[name].[hash].js',
    // chunk 文件的名称
    chunkFilename: '[id].[hash].chunk.js',
    // 配置资源文件的路径
    publicPath: '/'
  },
  // 模块加载器
  module: {
    rules: [
      // 处理 TypeScript 文件
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: path.resolve(__dirname, 'tsconfig.json') }
          } , 'angular2-template-loader'
        ]
      },
      // 处理 HTML 文件
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      // 处理样式文件
      {
        test: /\.css$/,
        exclude: path.resolve(__dirname, 'src', 'app'),
        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader?sourceMap' })
      },
      // 处理项目中的组件样式文件
      {
        test: /\.css$/,
        include: path.resolve(__dirname, 'src', 'app'),
        loader: 'raw-loader'
      }
    ]
  },
  // 插件
  plugins: [
    // 生成 HTML 文件
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    }),
    // 配置全局变量
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    // 提取公共模块
    new webpack.optimize.CommonsChunkPlugin({
      name: ['app', 'polyfills']
    }),
    // 提取样式文件
    new ExtractTextPlugin('[name].[hash].css')
  ],
  // 解析模块请求的选项
  resolve: {
    extensions: ['.ts', '.js']
  },
  // 配置 devServer
  devServer: {
    historyApiFallback: true,
    stats: 'minimal'
  },
  // 配置 source map
  devtool: 'source-map'
};

以上是一个基本的 Angular webpack 配置文件的示例，其中包括了入口文件、输出文件、模块加载器、插件、解析模块请求的选项、devServer 配置以及 source map 配置等等。注释中详细说明了每个配置项的作用和配置方式。

angular 有必要用postcss

### 回答1：
Angular 是一种前端开发框架，它提供了很多开发功能和工具，但是它本身并不提供 CSS 预处理器的支持。PostCSS 是一种 CSS 预处理器，它可以帮助开发者更好地编写和维护 CSS 代码。使用 PostCSS 可以让开发者使用更高级的 CSS 语法，并通过插件来实现诸如自动添加前缀、编译 Sass 等功能。

由于 Angular 原生没有提供预处理器的支持，如果你需要使用预处理器来编写你的 CSS 代码，那么就有必要使用 PostCSS。

总之，使用 PostCSS 可以帮助 Angular 开发者更高效和舒适地编写 CSS 代码，当然这是可选的。

### 回答2：
Angular 是一个流行的前端框架，用于构建现代化的单页应用程序。它提供了一套丰富的功能和工具，使开发人员能够更高效地开发和管理复杂的Web应用程序。在Angular项目中，使用PostCSS作为CSS预处理器是值得推荐的。

PostCSS是一个强大而灵活的工具，可以扩展CSS的功能。它允许开发人员使用插件来自动处理和转换CSS代码。与其他预处理器（如Sass或Less）相比，PostCSS有许多优势。

首先，PostCSS具有更好的性能。它使用插件链来并行处理CSS，并将其转换为更高效的代码。这可以显著提高页面加载速度，并减少资源的大小。此外，PostCSS还提供了一些优化代码的插件，如自动前缀和CSS压缩工具。

其次，PostCSS具有更广泛的插件生态系统。它拥有数量众多的插件，可以满足各种不同的需求。这意味着开发人员可以根据项目的需要选择合适的插件，从而更好地控制和定制CSS的处理过程。

另外，由于它的灵活性，PostCSS可以与其他工具和框架无缝集成。无论您是使用CSS Modules、CSS-in-JS还是其他CSS解决方案，都可以通过插件将其与PostCSS集成在一起。

最后，使用PostCSS还可以提高开发效率。借助自动转换和处理插件，可以减少手动调整和修改CSS代码的工作量。这使得开发人员能够更集中地关注业务逻辑和用户体验，从而提高开发效率。

综上所述，尽管在Angular项目中使用PostCSS并不是强制要求，但它是一个值得推荐的选择。它可以提供更好的性能、更广泛的插件生态系统、更好的集成性以及更高的开发效率。如果您想要在Angular项目中更好地管理和处理CSS，那么使用PostCSS是一个不错的选择。

### 回答3：
Angular 是一个流行的前端框架，而 PostCSS 是一个用于处理 CSS 的工具。它们可以搭配使用，但并非必需。

PostCSS 是一个基于插件的工具，可以对 CSS 进行预处理和转译。它提供了许多插件，可以实现 Autoprefixer（自动添加浏览器前缀）、CSS Modules（局部作用域 CSS）以及代码压缩等功能。在构建 Angular 应用时，我们可以使用 PostCSS 来处理 CSS。

使用 PostCSS 的好处是可以提高开发效率和代码维护性。例如，使用 Autoprefixer 可以自动为 CSS 添加浏览器前缀，这样我们不需要手动编写大量的兼容性代码。使用 CSS Modules 可以实现局部作用域，避免全局 CSS 类名冲突。此外，通过代码压缩可以减小文件大小，加快应用加载速度。

但需要注意的是，Angular 默认使用的是 SCSS 或 LESS 这样的预处理器，它们已经提供了很多功能，包括嵌套规则、变量和 mixin，以及源映射等。如果我们已经熟悉并喜欢使用这些预处理器，那么可能没有必要再引入 PostCSS。

总而言之，是否需要使用 PostCSS 取决于具体情况和个人偏好。如果需要更多的 CSS 处理功能，或者习惯使用 PostCSS 的工作流程，那么可以考虑将其与 Angular 搭配使用。否则，直接使用 Angular 默认的预处理器也是没有问题的。