angular + bootstrap

来源：互联网发布：在淘宝怎么卖二手东西编辑：程序博客网时间：2024/06/06 09:36

安装依赖包

#安装webpacknpm install webpack -g#自动生成一个package.json文件npm init#将webpack增加到package.json文件中npm install webpack --save-dev#如果想要安装开发工具npm install webpack-dev-server --save-dev

npm install angular --savenpm install babel-core babel-loader babel-preset-env --savenpm install jquery bootstrap@3 expose-loader --savenpm install url-loader style-loader css-loader --save

编辑`app/index.js`

const angular = require('angular');//引入angularconst ngModule = angular.module('app',[]);//定义一个angular模块const _ = require('lodash');const $ = require("jquery");require ("bootstrap/dist/css/bootstrap.css");require ("bootstrap/dist/js/bootstrap.js");function component () {  var element = document.createElement('div');  /* lodash is required for the next line to work */  element.innerHTML = _.join(['Hello','webpack'], ' ');  return element;}document.body.appendChild(component());

编辑`page.html`

<html ng-app>    <head>    </head>    <body>      <script src="dist/bundle.js"></script>        Your name: <input type="text" ng-model="yourname" placeholder="World">        <hr>        Hello {{yourname || 'World'}}!        <div class="input-group">          <span class="input-group-addon" id="basic-addon1">@</span>          <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">        </div>    </body></html>

也可以直接在html中引入

<script type="text/javascript" src="node_modules/jquery/dist/jquery.js"></script><link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"><script type="text/javascript" src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

编辑`webpack.config.js`

const path = require('path');module.exports = {  entry: './app/index.js',  output: {    filename: 'bundle.js',     path: path.resolve(__dirname, 'dist')  },  module: {    rules: [    {      test: /\.js$/,      exclude: /(node_modules|bower_components)/,      use: {        loader: 'babel-loader',        options: {          presets: ['env']        }      }    },    {          test: require.resolve('jquery'),          use: [{              loader: 'expose-loader',              options: 'jQuery'          },{              loader: 'expose-loader',              options: '$'          }]    },    { test: /\.css$/, loader: 'style-loader!css-loader' },    { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },    { test: /\.(woff|woff2)$/, loader:"url-loader?prefix=font/&limit=5000" },    { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },    { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }  ]  }}

webpack会自动分析依赖，然后编译，这样bundle.js就是你想要的东西了。

webpack-dev-server --progress --colors

整合express

修改angular-cli.json

"outDir":"express/public/"

打包angular

ng build --prod

进入express目录

npm start

参考

expose-loader
Webpack + Angular的组件化实践

阅读全文

0 0

angular + bootstrap

安装依赖包

编辑app/index.js

编辑page.html

编辑webpack.config.js

整合express

参考

编辑`app/index.js`

编辑`page.html`

编辑`webpack.config.js`