Angular基礎(chǔ)概念

在搭建開發(fā)環(huán)境以前先說說angularJS 的基礎(chǔ)概念，Angular的常用概念有module(模塊),directive（指令，負(fù)責(zé)和HTML元素進(jìn)行綁定）,表達(dá)式，service （共有的代碼邏輯），controller（私有的代碼邏輯）。具體概念會(huì)通過demo展示。慕課網(wǎng)使用了很中二的類比：

Angular概念

開發(fā)環(huán)境搭建（簡略過程）

調(diào)試工具：（batrang插件+chrome瀏覽器）
依賴管理工具：bower(要裝nodejs)
css預(yù)編譯處理：less(這個(gè)可以說是打開了新世界的大門)
自動(dòng)化構(gòu)建工具：gulp（同上）

項(xiàng)目構(gòu)建

Step1.了解目錄結(jié)構(gòu)

src 目錄結(jié)構(gòu)如下圖所示，src就是我們寫代碼事往哪里寫。所有的前端開發(fā)都是寫JS html css， 從src可以看出來。

src結(jié)構(gòu)

我們做的是單頁的web app所以我們只要寫一個(gè)頁面就是index.html。但是我們可不是只要寫一個(gè)html文件，view里面也都是html文件。
style存放的是用來生成css的東西，script就是放js文件的，這些文件里面還會(huì)細(xì)分：

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

重點(diǎn)講解一下script，順便串一下整個(gè)項(xiàng)目的邏輯。

2

文件夾config存放路由，這個(gè)路由和計(jì)算機(jī)網(wǎng)絡(luò)的路由不一樣是js的路由。比如說我們的這個(gè)app在第一個(gè)模塊里主要有三個(gè)功能：1.主頁面展示職位列表(main.html） 2.職位頁面(position.html)3.公司頁面(company.html)

那么config里的router.js就負(fù)責(zé)分配這三個(gè)頁面的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用來寫控制器,上述三個(gè)頁面都有自己的控制器。
以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'];
        }
    )
}]);

以上這段的意思就是發(fā)送http請(qǐng)求得到想要的數(shù)據(jù)。
文件夾directive負(fù)責(zé)寫指令，指令是用來干嘛的，舉個(gè)很簡單的例子，比如說我main頁面長這樣子：

頁面樣式

是不是可以分為很簡單的三個(gè)部分呢？頭是提醒登陸，中間是職位列表，尾負(fù)責(zé)搜索和賬戶。我們來看看main.html的代碼是什么樣的

<div app-head=""></div>
<div app-position-list="" data="list"></div>
<div app-foot=""></div>

就三行哈哈這是angular最牛逼的地方，分塊開發(fā)。
app-head又有專門的html,less,js。app-head 就是一個(gè)指令，把頭連接到main來，這個(gè)指令就要在directive里面寫。注意斜杠表示后一個(gè)字母大寫

"use strict";
angular.module('app').directive('appHead',[function(){
    return {
        restrict:'A',
        replace:true,
        templateUrl:'view/template/head.html'
    }
}]);

以此類推其他的也一樣。

還有data和image沒有介紹，data其實(shí)就是模擬后端給你的數(shù)據(jù)，image顧名思義存放圖片。

介紹完src,結(jié)合app開發(fā)的觀念，我們肯定要生成build編譯用的目錄、dist（上線用的目錄）。結(jié)構(gòu)如下：

build目錄

dist目錄

項(xiàng)目構(gòu)建

我們的目標(biāo)就是要生成以上兩個(gè)目錄，可以理解為吧所有東西穿起來。使用工具的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']);

最后幾行牛逼轟轟，可以實(shí)現(xiàn)代碼編輯器更改代碼，瀏覽器跟著刷新，不用再改一下代碼按一下刷新那么難受了。
之后終端上運(yùn)行指令：

$ gulp serve 

瀏覽器就自動(dòng)打開localhost:1234,然后就可以愉快地工作了。順便說一下網(wǎng)課地址：<a href=‘http://coding.imooc.com/learn/list/80.html’>傳送門</a>