一、写在前面的话
网上看了许多的博客,angular加node创建web项目的博客很少,有也介绍很粗略,因此,决定自己写一篇详细介绍nodejs加angularjs搭建web环境。由于初学angular,许多的用法还不是很清楚,欢迎大神们指正。
二、准备及项目目录
安装node—相关介绍,请自己搜索。
web项目目录:
三、搭建web环境
- 创建项目目录angularCode,在控制台执行
D:\nodeSpace\angularCode>npm init
然后一直按enter键,最后输入yes,这样根目录下就创建好一个package.json 文件。
- 安装webpack及angular
D:\nodeSpace\angularCode>npm install webpack angular --save-dev
- 配置webpack.config.js
var webpack = require('webpack'),
path = require('path');
var ROOT = path.resolve(__dirname),
APP = path.resolve(ROOT,'app'),
BUILD = path.resolve(ROOT,'dist');
module.exports = {
context : APP,
entry : {
app : './index.js'
},
output : {
path : BUILD,
filename : 'bundle.js'
}
}
接下来就是配置module模块。
- 安装各种loader
D:\nodeSpace\angularCode>npm install --save babel-loader ng-annotate-loader babel-preset-es2015
loaders配置如下
{
test : /\.js$/,
loader : 'ng-annotate!babel?presets[]=es2015!jshint',
exclude: /node_modules/
}
然后安装图片及样式的loaders:
D:\nodeSpace\angularCode>npm install --save url-loader style-loader css-loader
配置如下:
{
test : /\.css$/,
loaders : ['style','css'],
include : APP
},{
test : /\.(png|gif|jpg)$/,
loader : 'url-loader?limit=8192'
}
- 接着编写index.html和index.js文件
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>angular-webpack</title>
</head>
<body>
<p>{{1+1===2}}</p>
<script type="text/javascript" src="./bundle.js"></script>
</body>
<html>