AngularJs前端环境搭建

  1. 云栖社区>
  2. 袋鼠云技术团队>
  3. 博客>
  4. 正文

AngularJs前端环境搭建

祁幽小贵 2016-10-28 11:32:20 浏览4735
展开阅读全文

最近刚开始做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跑一下

terminal

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

home page

点击“to dashboard”就可以看到

dashboard

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

by 祁幽小贵

网友评论

登录后评论
0/500
评论
祁幽小贵
+ 关注
所属团队号: 袋鼠云技术团队