AngularJS学习笔记之目录结构与项目构建

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>

推荐阅读更多精彩内容