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 祁幽小贵
AngularJs前端环境搭建相关推荐
- 第七章 前端开发——前端工程化(NPM、脚手架、前端环境搭建)
第七章 前端工程化(NPM.脚手架.前端环境搭建) 一.支持环境 二.NPM包管理工具 三.Vue生成器 四.前端的集成环境 五.项目目录结构 六.前端Vue框架与后端Django框架的简单交互 一. ...
- linux环境 前端开发环境搭建,Linux运维知识之linux 前端环境搭建
本文主要向大家介绍了Linux运维知识之linux 前端环境搭建,通过具体的内容向大家展现,希望对大家学习Linux运维知识有所帮助. 1.下载node.js 2.在linux 里使用wget命令 w ...
- 前端环境搭建的软件和软件教程
前端环境搭建 一.下载 二.软件相关 1.vscode常用插件 2.sourcetree安装与使用 一.下载 软件 作用 下载地址 备注 vscode 编辑器 https://code.visuals ...
- Vue前端环境搭建(最简单,最全)
Vue前端环境搭建(最简单,最全) VS code下载 下载地址:https://code.visualstudio.com/ node下载 v14.15.4 版本过高不兼容部分插件,v14.15.4 ...
- jeecgboot 前端环境搭建_JEECG-BOOT环境搭建:2.1.1版
JEECG是一个国内开源的快速开发的J2EE框架,JEECG-BOOT是基于Spring Boot的版本,这篇文章介绍一下搭建的方式(JEECG-BOOT 2.1.1). 事前准备 操作系统 lium ...
- 爱旅行-前端环境搭建
tomcat设置 点击+号 http协议的端口号为80 前端 我们用的是react框架 不再是jsp/html react写的js 需要打包才能用 前端在请求的时候 只会请求本地 访问不到后端---- ...
- ant design后台模板-1.前端环境搭建
学习了一段时间的React,试着搭建一个后台管理的模板,算是这一段时间的学习总结,前端将采用create-react-app作为脚手架,引用react-router进行路由处理,后台将采用spring ...
- 物联网云平台设计与开发: 实验1 前端环境搭建与开发
目录 实验目的 实验内容 具体实验步骤 第一步:Node.js安装及环境配置 第二步:环境变量配置. 第三步:全局安装webpack 第四步:vue-cli 脚手架构建工具 第五步:将工程导入Visu ...
- jeecgboot 前端环境搭建_如何从零开始搭建前端监控平台?
前端监控与优化,一直是前端领域的重要研究方向.尤其在当下页面功能繁杂.页面延迟容忍度降低的时代,一套符合自身业务需要的监控平台,往往能让页面性能优化事半功倍. 现在市面上的大多数监控平台都是对性能.网 ...
最新文章
- GitHub上大热的Deep Photo终于有TensorFlow版了!
- 5条出人意外的大脑秘密,奇奇怪怪的知识又增加了!
- CCleaner v5.55.7108 发布,新增软件升级功能
- 如何在高并发环境下设计出无锁的数据库操作(Java版本) 转载
- opencv学习笔记3:像素处理
- Java 面试之 JVM
- linux nand 坏块_韦东山-NAND 上面都是坏块怎么办啊? - 百问网嵌入式问答社区
- FFmpeg源代码简单分析:av_find_decoder()和av_find_encoder()
- Iframe相关操作
- 面向对象16:代码块、final关键字
- android省市区三级联动,NumberPicker实现省市区三级联动的效果
- 鬼使神差的给宝宝办了大米的卡
- 21条黄金法则,全面提升你的领导力
- JetBrains学生注册码申请步骤
- 机器学习可行性与VC dimension
- 【目前点赞排名】投票倒计时五天:继续为你喜欢的征文作品投票吧!
- 解决CUDA error: no kernel image is available for execution on the device
- PDF文件合并 –Python
- 浙大计算机学院多厉害,一张图,就能告诉你浙大到底有多牛!
- GitHub+Hexo 搭建个人博客(一)