<script type="module">
import wsAngularX from 'https://cdn.skypack.dev/ws-angular-x';
</script>
README
ws-angular-x
the new syntax of angular 1.x (1.5.8+)
Learn more about ws-angular-x
New features and break changes in version 1.2.0
Break changes:
more changes and updates are here in wiki: Go to wiki
NOTES:
1. All code are built in ES5(commonjs) mode, if you're using a higher version, please use babel-loader;
2. Anyway, better not run this code in the ES3 environment if you work with javascript, try ES6/ES5 or babel-loader.
3. If running in the prod mode ,conf the UglifyJS to ignore mangle options because the injection service of angular1.x will be broken by uglify. Keep mangle off or try to provide a reserved arr list to prevent uglify breaks the constructor's params name. I'll provide all the injections need later if possible. (now you can use the reserved list in "./webpack/@ngtools/uglify-reserved/index.js", all the angular and ui-router's injection-services will work well with uglifyjs.)
you can make your css/scss/less works only in component scope, or control component encapsulation to global or emulated.
3. Powerful directive
more lifeCycle hooks and On/Watch events supported.
encapsulation mode is also supported!
4.Service without name selector any more
only to inject and use it.
5. More like angular 4+
even the bootstrap method...
6. All dependency, it's real angular1.x
==============================
how to use
install by npm
npm install ws-angular-x --save
config webpack
// it's only a demo, config by yourself with what you need.
const path = require('path');
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
// you may get this loader in this package, try to get from "ws-angular-x/webpack/@ngtools/css-object-loader.js",
// you can't get it from npm ...
// your component css/scss/less will not work without this loader.
const cssObjectLoader = path.resolve(__dirname, "node_modules/ws-angular-x/webpack/@ngtools/css-object-loader");
// the router-loader for angular-x
// you can conf lazy-load module by example like `{ state: "lazy", loadChildren: "./lazy/lazy.module#LazyModule" }` to create lazy router instead of use "import(......)"
const NgXRouterLoader = path.resolve(__dirname, "node_modules/ws-angular-x/webpack/@ngtools/angularX-router-loader");
// you can only provider css and template's url instead of require(......) by this loader
const NgXTemplateLoader = path.resolve(__dirname, "node_modules/ws-angular-x/webpack/@ngtools/angularX-template-loader");
// prod mode .
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// a reserved list is provided.
const allReserved = require("ws-angular-x/webpack/@ngtools/uglify-reserved");
module.exports = {
entry: {
vendor: [ "ws-angular-x" ],
index: [ "src/app/index.ts" ]
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
publicPath: "",
chunkFilename: "[name].chunk.js"
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: "./index.html"
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
chunks: ['index']
}),
// if "
quot; is needed as global, conf this.
new webpack.ProvidePlugin({
$: "jquery",
jQuery: 'jquery',
"window.jQuery": "jquery"
}),
new ForkTsCheckerWebpackPlugin(),
// add this plugin for production mode.
new UglifyJsPlugin({
uglifyOptions: {
mangle: { // add reserved list for injections
reserved: allReserved.all(allReserved)
}
}
})
],
resolve: {
alias: { // ignore this, or you can change this by what your want.
"@app": path.resolve(__dirname, "src/app")
},
},
devtool: "source-map",
devServer: {
contentBase: './dist'
},
node: {
fs: "empty"
},
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "src/app")
],
use: [
{
loader: "babel-loader",
options: {
// support ES7 decorators
plugins: ['transform-runtime', 'transform-decorators-legacy'],
// support ES7 decorators and transform ES6 js to "commonjs"
presets: ['stage-0', 'es2015'],
}
},
{ loader: NgXTemplateLoader + "?keepUrl=false" },
{ loader: NgXRouterLoader + "?debug=false&loader=system" }
]
},
{
test: /\.ts$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: { // disable type check to make building action faster
transpileOnly: true
},
},
{ loader: NgXTemplateLoader + "?keepUrl=false" },
{ loader: NgXRouterLoader + "?debug=false&loader=system" }
]
},
{
test: /\.css$/,
use: [
// load css as object
cssObjectLoader,
'css-loader'
]
},
{
test: /\.(sass|scss)$/,
use: [
cssObjectLoader,
'sass-loader'
]
},
{
test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
include: [path.resolve(__dirname, "index.html")],
test: /\.html$/,
use: [
"raw-loader"
]
},
{
include: [path.resolve(__dirname, "src/web-test")],
test: /\.html$/,
use: [
"html-loader"
]
}
]
}
}
import ws-angular-x into your code, and create your module
