Angular基础概念

在搭建开发环境以前先说说angularJS 的基础概念，Angular的常用概念有module(模块),directive（指令，负责和HTML元素进行绑定）,表达式，service （共有的代码逻辑），controller（私有的代码逻辑）。具体概念会通过demo展示。慕课网使用了很中二的类比：

Angular概念

开发环境搭建（简略过程）

调试工具：（batrang插件+chrome浏览器）
依赖管理工具：bower(要装nodejs)
css预编译处理：less(这个可以说是打开了新世界的大门)
自动化构建工具：gulp（同上）

项目构建

Step1.了解目录结构

src 目录结构如下图所示，src就是我们写代码事往哪里写。所有的前端开发都是写JS html css， 从src可以看出来。

src结构

我们做的是单页的web app所以我们只要写一个页面就是index.html。但是我们可不是只要写一个html文件，view里面也都是html文件。
style存放的是用来生成css的东西，script就是放js文件的，这些文件里面还会细分：

屏幕快照 2017-03-31 上午11.42.41.png

重点讲解一下script，顺便串一下整个项目的逻辑。

2

文件夹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（上线用的目录）。结构如下：

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>