AngularJs前端环境搭建

最近刚开始做angular项目，开始搭建开发环境，刚开始的时候用express搭了本地服务，然后开发angular的静态项目，项目用gulp做自动化管理，做了一段时间感觉不是很方便，于是开始考虑用webpack来做。网上找了一下，相关的文章不少，最后参考来一个老外的例子做，实践下来感觉还不错，下面说一下详细的项目架构。

结构和配置

启动文件是app.js，各子页面放到对应的目录中，utils是可提取的工具类组件，angular的项目结构应该都差不多。

webpack配置主要是几个loader

loaders: [{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\.css$/, loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss') }, { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file' }, { test: /\.html$/, loader: 'raw' }]

如果使用es6的话babel还是要装的，.babelrc的配置则比较简单，配置好后你就可以尽情的享受es6带来的快感了。

{ "presets":['es2015'] }

npm可以先配置两个简单的命令start和build

"scripts": { "build": "rimraf dist && webpack --bail --progress --profile", "server": "webpack-dev-server --history-api-fallback --inline --progress", "start": "npm run server" },

server使用的是webpack-dev-server，这个只要npm安装一下就ok了。具体可以参考项目：https://github.com/Foxandxss/angular-webpack-workflow

构建应用

一般来说都会有一个app.js作为应用的入口，配置应用的依赖和启动信息等。

import 'bootstrap/dist/css/bootstrap.min.css'; import angular from 'angular'; import uiRouter from 'angular-ui-router'; import mainCtrl from './mainCtrl'; let config = function($stateProvider,$urlRouterProvider,$locationProvider){ $locationProvider.html5Mode(true); $stateProvider.state('default',{ url:'/', template:require('./app.html') }); $urlRouterProvider.otherwise("/"); }; config.$inject = ['$stateProvider','$urlRouterProvider','$locationProvider']; angular.module('app',[uiRouter]) .config(config) .controller('mainCtrl',mainCtrl);

例如上面的例子，注册app模块，配置路径，添加controller。其中inject是angularjs的依赖注入，还是相当的好用。这段代码表达的意思就是应用访问根路径的时候加载app.html的内容，并且载入mainCtrl这个controller。

app.html的内容

<div ng-controller="mainCtrl as mc"> <h1>This is a test angular project.</h1> <div>{{mc.name}}</div> <p><a ng-href="/dashboard">to dashboard</a></p> </div>

mainCtrl.js的内容

export default class mainCtrl{ constructor(){ this.name = 'This is homepage!'; } }

需要注意的是“mainCtrl as mc”这段，它可以让我们不用再把controller中的变量和方法在放到$scope上，controller再也不用注入$scope了。如果不明白请参考这里

app.html中有一个链接跳到我们的另一个页面dashboard，但是上面的代码并没有这个功能，我们需要再来编写一个dashboard的功能模块。

我们在app目录下面再添加一个dashboard目录，里面放我们子页面dashboard的文件，这里有三个文件：dashboard.html , dashboard.js , dashboardCtrl.js。

dashboard.js的内容

'use strict'; import angular from 'angular'; import uiRouter from 'angular-ui-router'; import dashboardCtrl from './dashboardCtrl'; import tpl from './dashboard.html' var config = function($stateProvider){ $stateProvider .state('dashboard',{ url:'/dashboard', template:tpl, controller:'dashboardCtrl' }); } config.$inject = ['$stateProvider']; export default angular.module('dbmod',[uiRouter]) .config(config) .controller('dashboardCtrl',dashboardCtrl) .name;

dashboardCtrl.js的内容

class dashboardCtrl{ constructor($scope){ console.log($scope); $scope.dashboardName = 'This is dashboard!'; } } dashboardCtrl.$inject = ['$scope']; export default dashboardCtrl;

dashboard.html的内容

<div ng-controller="dashboardCtrl"> <h1>{{dashboardName}}</h1> </div>

dashboardCtrl这里采用注入的方式使用$scope，跟上面的this效果是一样的。

ok现在工作基本完成，我们运行npm start跑一下

然后就可以在浏览器中看到了

点击“to dashboard”就可以看到

到这里我们的演示几本都完成了，细节地方不明白的可以参考Using Angular 1.x With ES6 and Webpack

by 祁幽小贵