AngularJS 项目创建

1 初始化 git

    git init

2 安装 cnpm

    npm i -g cnpm

3 安装 bower (不能用git_bash安装，否则报错)

        cnpm i -g bower

4 项目根目录

    bower init

5 安装依赖Angularjs的文件

    bower install --save angular  angular-ui-router angular-cookies angular-validation angular-animate

 //如果是固定版本,后面直接 #1.5

6 创建以.开头的文件，在cmd目录下用以下命令：

    null>.bowerrc 

    然后在.bowerrc 里写json目录

    [

        *directory:"lib"

    ]

7 可以用 bower 安装/卸载 某个js插件

   bower install --save requirejs   

   bower uninstall --save requirejs

|--------------------项目操作----------------------------------------------------|

注：以下命令可直接在vscode 命令终端操作

9 安装自动化构建工具：gulp

    /* 优点 基于流、任务化

    /* 常用API    src 读取文件  dest 生成文件  watch 监控文件  task:定制任务   pipe：流的方式处理文件

    /*

cnpm i -g gulp

10    初始化项目文件/生成配置文件 node_modules

   

npm init

11   安装gulp插件 //把nodejs的gulp模块 写保存到package.json   

    

cnpm i --save-dev gulp gulp-clean gulp-concat gulp-connect gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify gulp-plumber open

    |-------插件介绍----------|

    gulp-htmlmin     看到名字就能知道，这个插件是用来压缩HTML。PS：注释啥的都可以去掉哦，看文档get更多技能哈

    gulp-imagemin     除了能压缩常见的图片格式，还能压缩 SVG

    gulp-clean-css     压缩 CSS。我原本推荐的是 gulp-minify-css，结果其首页中已建议改用gulp-clean-css...

    gulp-uglify     专业压缩 Javascript

    gulp-concat     上面几个都是压缩，这插件是管合并的...恭喜，“减少网络请求”的成就达成:)

    gulp-autoprefixer 给 CSS 增加前缀。解决某些CSS属性不是标准属性，有各种浏览器前缀的情况，灰常有用

    gulp-rename     修改文件名称。比如有时我们需要把app.js改成app.min.js，瞬间高级了

    gulp-util         最基础的工具，但俺只用来打日志...

    gulp-plumber    作用：编译CSS js时发生错误，不会立即中断线程，只是抛出错误

    /----创建文件 gulpfile.js #编写任务

  lib、html、 json 、css 、js 、image 、clean 、reload、watch

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());});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($.plumber())  .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($.plumber())  .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($.plumber())  .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('server', ['build'], function() {  $.connect.server({    root: [app.devPath],    livereload: true,    port: 1234  });  open('http://localhost:1234');  gulp.watch('bower_components/**/*', ['lib']);  gulp.watch(app.srcPath + '**/*.html', ['html']);  gulp.watch(app.srcPath + 'data/**/*.json', ['json']);  gulp.watch(app.srcPath + 'style/**/*.less', ['less']);  gulp.watch(app.srcPath + 'script/**/*.js', ['js']);  gulp.watch(app.srcPath + 'image/**/*', ['image']);});gulp.task('default', ['server']);

12 配置路由

    index.html  首页引入路由插件

    <script src="vendor/angular-ui-router/release/angular-ui-router.min.js" charset="utf-8"></script>

13 项目创建：#目录根据自己实际开发创建即可：

    src

    ----script

        app.js 

        config

        ----router.js  配置

        controller-----控制器

            mainCtrl.js

        directive------指令

            head.js

            foot.js

        filter

            xxx.js

        service

            cache.js

    ----style

        index.less

        template

            head.less

            foot.less