Angular 1.x Webpack Starter 项目教程

袁耿浩

于 2024-09-01 08:49:43 发布

阅读量669

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00841/article/details/141773270

版权

Angular 1.x Webpack Starter 项目教程

angular1-webpack-starterComponent based Angular(1.x) web development with Webpack and ES6.项目地址:https://gitcode.com/gh_mirrors/an/angular1-webpack-starter

1. 项目的目录结构及介绍

angular1-webpack-starter/
├── src/
│   ├── app/
│   │   ├── components/
│   │   ├── services/
│   │   ├── directives/
│   │   ├── filters/
│   │   ├── app.module.js
│   │   ├── app.config.js
│   │   └── app.run.js
│   ├── assets/
│   │   ├── images/
│   │   ├── styles/
│   │   └── templates/
│   ├── index.html
│   └── main.js
├── webpack.config.js
├── package.json
└── README.md

src/: 源代码目录，包含所有前端代码。
- app/: 应用程序代码目录，包含组件、服务、指令、过滤器等。
  - components/: 存放Angular组件。
  - services/: 存放Angular服务。
  - directives/: 存放Angular指令。
  - filters/: 存放Angular过滤器。
  - app.module.js: Angular模块定义文件。
  - app.config.js: Angular配置文件。
  - app.run.js: Angular运行文件。
- assets/: 静态资源目录，包含图片、样式和模板。
  - images/: 图片资源。
  - styles/: 样式文件。
  - templates/: 模板文件。
- index.html: 项目入口HTML文件。
- main.js: 项目入口JavaScript文件。
webpack.config.js: Webpack配置文件。
package.json: 项目依赖和脚本配置文件。
README.md: 项目说明文档。

2. 项目的启动文件介绍

main.js

main.js 是项目的入口文件，负责初始化Angular应用并加载必要的模块和服务。

import angular from 'angular';
import 'angular-ui-router';
import './app/app.module';

angular.element(document).ready(function() {
  angular.bootstrap(document, ['app']);
});

index.html

index.html 是项目的入口HTML文件，包含Angular应用的根元素。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular 1.x Webpack Starter</title>
</head>
<body>
  <div ng-view></div>
  <script src="main.js"></script>
</body>
</html>

3. 项目的配置文件介绍

webpack.config.js

webpack.config.js 是Webpack的配置文件，负责打包和优化前端资源。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.html$/, loader: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      minify: {
        collapseWhitespace: true,
        removeComments: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
      }
    })
  ]
};

package.json

package.json 是项目的依赖和脚本配置文件，包含项目的基本信息和运行脚本。

{
  "name": "angular1-webpack-starter",
  "version": "1.0.0",
  "description": "Angular 1.x Webpack Starter",
  "main": "src/main.js",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack --mode production",
    "test": "echo \"

angular1-webpack-starterComponent based Angular(1.x) web development with Webpack and ES6.项目地址:https://gitcode.com/gh_mirrors/an/angular1-webpack-starter