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 祁幽小贵

前端培训-中级阶段(45）- Node10.x环境搭建，NPM包管理器 前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 上节课我们了解到了一个可以在本地执行 js 的 javascript 执行环境：NodeJS。今天我们来安装 NodeJS、环境配置、NPM 使用、版本管理。 推荐使用 node 10.x 版本（2018年，最新是 10.22.1），下文我们基于 v10.16.0 版本。
「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 （一） crudapi增删改查接口系统的后台Java API服务已经全部可用，需要一套后台管理UI，主要用户为开发人员或者对计算机有一定了解的工作人员，通过UI配置元数据和处理业务数据，经过调研最终决定通过Vue实现SPA单页面Web应用，打开浏览器就可以很方便使用。
前端必知词汇：AngularJS AngularJS是一个开发动态Web应用的框架，同时也是一个用 JavaScript 编写的库。它可以通过 script 标签添加到网页中，让用户可以使用HTML作为模板语言并且可以通过扩展的HTML语法来使应用组件更加清晰和简洁。自2009年，由Misko Hevery 等人创建，后为Google所收购。目前已经被用于Google的多款产品当中。
2016年9月15日, 在谷歌总部(Google HQ)一场特殊的聚会上, 我们发布了 Angular 2 的 final release 版本, 正式成为 Angular 1 的全平台继任者。
购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(3)--Idetity,OWIN前后端验证 chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车案例，非常精彩，这里这里记录下对此项目的理解。
购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session 原文:购物车Demo,前端使用AngularJS,后端使用ASP.NET Web API(2)--前端，以及前后端Session chsakell分享了前端使用AngularJS,后端使用ASP.NET Web API的购物车案例，非常精彩，这里这里记录下对此项目的理解。
祁幽小贵 这家伙很懒，什么都没有留下，去他blog看看吧。http://bengle.coding.me/bengle/