Angular基础概念
在搭建开发环境以前先说说angularJS 的基础概念，Angular的常用概念有module(模块),directive（指令，负责和HTML元素进行绑定）,表达式，service （共有的代码逻辑），controller（私有的代码逻辑）。具体概念会通过demo展示。慕课网使用了很中二的类比：
开发环境搭建（简略过程）
调试工具：（batrang插件+chrome浏览器）
依赖管理工具：bower(要装nodejs)
css预编译处理：less(这个可以说是打开了新世界的大门)
自动化构建工具：gulp（同上）
项目构建
Step1.了解目录结构
src 目录结构如下图所示，src就是我们写代码事往哪里写。所有的前端开发都是写JS html css， 从src可以看出来。
我们做的是单页的web app所以我们只要写一个页面就是index.html。但是我们可不是只要写一个html文件，view里面也都是html文件。
style存放的是用来生成css的东西，script就是放js文件的，这些文件里面还会细分：
重点讲解一下script，顺便串一下整个项目的逻辑。
文件夹config存放路由，这个路由和计算机网络的路由不一样是js的路由。比如说我们的这个app在第一个模块里主要有三个功能：1.主页面展示职位列表(main.html） 2.职位页面(position.html)3.公司页面(company.html)
那么config里的router.js就负责分配这三个页面的URL。
/**
* Created by huangkai on 2017/3/27.
*/
'use strict';
angular.module('app').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider.state('main',{
url:'/main',
templateUrl:'view/main.html',
controller:'mainCtrl'
}).state('position',{
url:'/position/:id',
templateUrl:'view/position.html',
controller:'positionCtrl'
}).state('company',{
url:'/company/:id',
templateUrl:'view/company.html',
controller:'companyCtrl'
});
$urlRouterProvider.otherwise('main');
}])
文件夹controller用来写控制器,上述三个页面都有自己的控制器。
以mainCtrl.js为例。
angular.module('app').controller('mainCtrl', ['$http','$scope', function ($http,$scope) {
$http({
method:'GET',
url:'data/positionList.json'
}).then(
function (success) {
console.log(success['data']);
$scope.list = success['data'];
}
)
}]);
以上这段的意思就是发送http请求得到想要的数据。
文件夹directive负责写指令，指令是用来干嘛的，举个很简单的例子，比如说我main页面长这样子：
是不是可以分为很简单的三个部分呢？头是提醒登陆，中间是职位列表，尾负责搜索和账户。我们来看看main.html的代码是什么样的
<div app-head=""></div>
<div app-position-list="" data="list"></div>
<div app-foot=""></div>
就三行哈哈这是angular最牛逼的地方，分块开发。
app-head又有专门的html,less,js。app-head 就是一个指令，把头连接到main来，这个指令就要在directive里面写。注意斜杠表示后一个字母大写
"use strict";
angular.module('app').directive('appHead',[function(){
return {
restrict:'A',
replace:true,
templateUrl:'view/template/head.html'
}
}]);
以此类推其他的也一样。
还有data和image没有介绍，data其实就是模拟后端给你的数据，image顾名思义存放图片。
介绍完src,结合app开发的观念，我们肯定要生成build编译用的目录、dist（上线用的目录）。结构如下：
项目构建
我们的目标就是要生成以上两个目录，可以理解为吧所有东西穿起来。使用工具的gulp,直接来看看要写的东西gulpfile.js。
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');
var app ={
srcPath:'src/',
devPath:'build/',
prdPath:'dist/'
};
gulp.task('lib',function(){
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.devPath+'vendor'))
.pipe(gulp.dest(app.prdPath+'vendor'))
.pipe($.connect.reload())
;//all the file
});
gulp.task('html',function () {
gulp.src(app.srcPath + '/**/*.html')
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath))
.pipe($.connect.reload());
});
gulp.task('json',function () {
gulp.src( app.srcPath+ 'data/**/*.json')
.pipe(gulp.dest(app.devPath + 'data'))
.pipe(gulp.dest(app.prdPath + 'data'))
.pipe($.connect.reload());
});
gulp.task('less',function () {
gulp.src( app.srcPath+ 'style/index.less')
.pipe($.less())
.pipe(gulp.dest(app.devPath + 'css'))
.pipe($.cssmin())
.pipe(gulp.dest(app.prdPath + 'css'))
.pipe($.connect.reload());
});
gulp.task('js',function () {
gulp.src(app.srcPath + 'script/**/*.js')
.pipe($.concat('index.js'))
.pipe(gulp.dest(app.devPath+'js'))
.pipe($.uglify())
.pipe(gulp.dest(app.prdPath + 'js'))
.pipe($.connect.reload());
});
gulp.task('image',function () {
gulp.src(app.srcPath + 'image/**/*')
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin())
.pipe(gulp.dest(app.prdPath + 'image'))
.pipe($.connect.reload());
});
gulp.task('build',['image','js','less','lib','html','json']);
gulp.task('clean',function(){
gulp.src([app.devPath,app.prdPath])
.pipe($.clean());
});
gulp.task('serve',['build'],function () {
$.connect.server({
root:[app.devPath],
livereload :true,
port:1234
});
open('http://localhost:1234');
gulp.watch(app.srcPath + 'srcipt/**/*.js',['js']);
gulp.watch(app.srcPath + '**/*.html',['html']);
gulp.watch(app.srcPath + 'style/**/*.less',['less']);
gulp.watch(app.srcPath + 'image/**/*',['image']);
gulp.watch(app.srcPath + 'data/**/*.json',['json']);
});
gulp.task('default',['serve']);
最后几行牛逼轰轰，可以实现代码编辑器更改代码，浏览器跟着刷新，不用再改一下代码按一下刷新那么难受了。
之后终端上运行指令：
$ gulp serve
浏览器就自动打开localhost:1234,然后就可以愉快地工作了。顺便说一下网课地址：<a href=‘http://coding.imooc.com/learn/list/80.html’>传送门</a>
