作者:版中凌菱 | 来源:互联网 | 2023-09-16 19:57
angularjs是一个非常老的框架,如果你准备用angular启动新项目,完全可以使用angular而不是angularjs。但是有时候我们需要维护老的angularjs项目,但
![使用wepack、typescript创建一个angularjs项目](https://img2.php1.cn/3cdc5/3909/3b4/ada0e9fdfae7dc6c.jpeg)
但是有时候我们需要维护老的angularjs项目,但是又想把angularjs升级。比如之前你的angularjs项目不是使用的webpack, 之前你的angularjs项目不支持typescript,你希望后面的代码支持。
本教程就是展示如何从用webpack和typescript技术搭建angularjs项目。
在你的项目文件夹下创建package.json文件,配置如下
{
"name": "angularjs_webpack_ts",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack -w"
},
"author": "liuyi",
"license": "ISC",
"dependencies": {
"angular": "^1.7.9",
"angular-ui-router": "^0.4.3"
},
"devDependencies": {
"@types/angular": "^1.6.57",
"@types/angular-ui-router": "^1.1.40",
"@types/node": "^7.10.9",
"ts-loader": "^2.3.7",
"typescript": "^2.9.2",
"webpack": "^2.7.0"
}
}
执行npm install 安装相关依赖
创建webpack.config.js文件,配置如下
module.exports = {
context: __dirname + "/",
entry: "./app.ts",
output: {
path: __dirname + "/",
filename: "bundle.js"
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
loaders: [{
test: /.ts$/,
loader: "ts-loader"
}]
}
}
创建tsconfig.json 配置如下
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true,
"experimentalDecorators": true
}
}
创建入口文件 app.ts ,内容如下
var angular = require("angular");
var app = angular.module("testApp", []);
import MainCtrl from "./mainCtr";
app.controller("mainCtrl", MainCtrl);
创建mainCtrl.ts文件 内容如下
export default class MainCtrl {
something: string;
static inject: Array = [];
constructor() {
this.something = "hello";
}
}
创建index.html文件 内容如下
Hello Meetup!
output:: {{vm.something}}
执行命令 npm start 生成bundle.js文件,使用live-server启动项目 查看结果
![](https://img2.php1.cn/3cdc5/3909/3b4/8d17464aeabe1e5e.png)
源码地址 https://github.com/lilugirl/angularjs_webpack_typescript