angualr 工程搭建

一、安裝相關工具

node
batarang: angular調試工具
bower

安裝bower cnpm install -g bower

常用bower命令： bower init bower install bower uninstall

配置文件： .bowerrc 修改安裝目錄 bower.json 主配置文件

 //初始化npm
 npm init
 //全局安裝bower
 cnpm install -g bower
 //初始化bower配置文件
 bower init

二、目錄結構說明

1 根目錄結構如下：

src:源碼
build: 構建代碼編譯之後的目錄，用於調試
dist:產品發佈的目錄
bower_components: bower的默認軟件安裝目錄
test: 存放單元測試的目錄
.eslintrc: 語法檢查配置文件
bower.json: bower的配置文件
gulpfile.js : gulp任務代碼
package.json: node的配置文件

2 src目錄結構如下：

data：存放json數據目錄，本地測試數據
image: 圖片
style: css目錄
view：視圖目錄 template: 模板目錄 404.html index.html
script: js存放目錄

3 script目錄結構如下：

config: 啓動配置目錄，app.js啓動時讀取config中的配置信息
controller: 控制器目錄
directive: 自定義指令目錄
filter:過濾器目錄
service: 服務目錄
app.js: 項目啓動文件

三、自動化構建工具 gulp

優點：基於流，任務化

1 常用命令

src: 讀取文件和文件夾
dest: 生成文件
watch：監控文件變化
task: 定製任務
pipe: 用流的方式處理文件

2 gulp 中文網

gulpjs.com.cn

3 使用

    1. 全局安裝gulp
    npm install -g gulp
    2. 在當前目錄安裝gulp並寫入node配置文件
    npm install gulp --save-dev

    3. 安裝gulp相關模塊
        gulp
        gulp-clean
        gulp-concat
        gulp-connect
        gulp-cssmin
        gulp-imagemin
        gulp-less
        gulp-load-plugins
        gulp-uglify
        open

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

4. 在gulpfile.js中編寫task任務

        lib
        html
        json
        css
        js
        image
        clean
        reload
        watch

        gulpfile.js
        //引入gulp
        var gulp = require('gulp');
        //引入gulp插件加載模塊
        var $ = require('gulp-load-plugins')();//後面括號不能省略
        //
        var open = require('open');
        //引入less編譯
        var gulpless = require('gulp-less');
        //css壓縮
        var cssmin = require('gulp-cssmin');

        //用來定義目錄路徑
        var app = {
            srcPath:'src/',//源碼路徑
            devPath:'build/',//開發目錄
            prdPath:'dist/'//生產目錄
        }

        //lib任務 ：將bower安裝的第三方文件，拷貝到

        gulp.task('lib',function(){
            // 讀取bower_components目錄下面的所有文件
            gulp.src('bower_components/**/*')
            //拷貝到開發目錄
            .pipe(gulp.dest(app.devPath+'vendor'))
            //拷貝到生產目錄
            .pipe(gulp.dest(app.prdPath+'vendor'))
            //通知服務器刷新瀏覽器
            .pipe($.connect.reload())

        })
        //命令行執行 gulp lib 測試一下

        //html任務：將src所有的html文件拷貝 到開發和測試目錄下
        gulp.task('html',function(){
            //讀取src/目錄下所有的html文件
            gulp.src(app.srcPath+"**/*.html")
            // 拷貝到開發目錄
            .pipe(gulp.dest(app.devPath))
            //拷貝到生產目錄
            .pipe(gulp.dest(app.prdPath))
            .pipe($.connect.reload())
        })

        //命令行執行 gulp html 測試一下

        //json 任務：將模擬數據拷貝到開發生產目錄
        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 json 測試一下

        //less任務： 將less
        //style/index.less中引入@import所有其他的less文件，編譯只需要處理它即可
        gulp.task('less',function(){
            //讀取sytle/index.less文件
            gulp.src(app.srcPath+'style/index.less')
                //將less編譯爲css文件
                .pipe(gulpless())
                //將編譯好的css文件放入開發目錄的css文件夾中
                .pipe(gulp.dest(app.devPath+'css'))
                //將css文件壓縮
                .pipe(cssmin())
                //將壓縮的文件放入生產目錄的css文件夾中
                .pipe(gulp.dest(app.prdPath+'css'))
                .pipe($.connect.reload())
        })

        //js任務
        gulp.task('js',function(){
            //讀取script目錄下所有js文件
            gulp.src(app.srcPath+'script/**/*.js')
            //將這些js文件合併成一個 index.js
            .pipe($.concat('index.js'))
            //放入開發目錄下
            .pipe(gulp.dest(app.devPath+'js'))
            //壓縮js
            .pipe($.uglify())
            //放入聲場目錄下
            .pipe(gulp.dest(app.prdPath+'js'))
            .pipe($.connect.reload())
        })

        //image任務
        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('clean',function(){
            //讀取開發目錄和生產目錄
            gulp.src([app.devPath,app.prdPath])
            //清楚所有文件
            .pipe($.clean());
        })

        //總任務 build
        gulp.task('build',['image','js','less','lib','html','json'])

        //開啓服務
        gulp.task('serve',function(){
            $.connect.server({
                //默認從開發目錄讀起
                root:[app.devPath],
                //刷新瀏覽器
                livereload:true,
                port:8888
            });
            open('http://localhost:8888');
            //自動構建監聽變動
            gulp.watch(app.srcPath+'script/**/*.js',['js']);
            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+'image/**/*',['image']);
        })
        //命令行輸入 gulp 默認執行 gulp serve
        gulp.task('default',['serve']);

四、模塊劃分

職位
搜索
用戶

五、單頁面應用入口文件 src/index.html

1 引入angular

    <script src="vendor/angular/angular.min.js"></script>

    <script src="js/index.js"></script>

    <html lang="en" ng-app="app">

2 src/script/app.js

    angular.module('app',[]);

六、路由配置

1. 安裝 ui-router

    bower install --save ui-router

2. gulp lib

3. 在src/index.html中引入 angular-ui-router

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

4. 修改app.js,加入依賴模塊

    angular.module('app',['ui.router']);

5. src/script/config/router.js ，路由配置

    angular.module('app').config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        $stateProvider.state('main',{
            url:'/main',
            templateUrl:'view/main.html',
            controller:'mainCtrl'//命名規則，頁面名+ctrl
        })
        $urlRouterProvider.otherwise('main');
    }])

6. src/index.html加入ui-view標籤讓頁面顯示

    <div ui-view></div>

7. 解決mainCtrl找不到報錯 src/script/controller/mainCtrl.js

    angular.module('app').controller('mainCtrl',['$scope',function($scope){

    }])

七、路由常用方法

1 路由參數及匹配

    /home 只匹配 /home
    /user/:id   /user/{id} 匹配 /user/123 或 /user/
    /message?a=1&b=2

2 跳轉方式

跳轉

使用$state服務的go方法跳轉

  $state.go('main',{id:123},{location:'replace'})  //location:replace 回退的時候不會回退到當前頁面

3 參數獲取

    $state.param.id  <==> $stateParam.id

八、移動端自適應rem src/index.html

    <script>
        document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 10 + 'px';
    </script>

九、使用指令組合main.html頁面

1 src/view/main.html 用header footer content三個指令拼成頁面

    <div>
        <app-header></app-header>
        <app-content></app-content>
        <app-footer></app-footer>
    </div>

2 src/view/template/header.html

    <div class="head">
        <span>10秒定製職位</span>
        <button>去定製</button>
    </div>

3 創建指令 src/script/directive/header.js

    angular.module('app').directive('appHeader',[function(){
        return {
            restrict:'E',
            replace:true,
            templateUrl:'view/template/header.html'
        }
    }])

十、移動端字體、寬、高自適應

1 修改 src/style/index.less

    .fs(@px){
        font-size:unit(@px / 37.5,rem);
    }
    .w(@px){
        width:unit(@px / 37.5,rem);
    }

    .h(@px){
        height:unit(@px / 37.5,rem);
    }
    body{
        .fs(16)
    }

2 index.html頁面引入 css

    <link rel="stylesheet" href="css/index.css">

angualr 工程搭建

一、安裝相關工具

二、目錄結構說明

1 根目錄結構如下：

2 src目錄結構如下：

3 script目錄結構如下：

三、自動化構建工具 gulp

1 常用命令

2 gulp 中文網

3 使用

4. 在gulpfile.js中 編寫task任務

四、模塊劃分

五、單頁面應用入口文件 src/index.html

1 引入angular

2 src/script/app.js

六、路由配置

1. 安裝 ui-router

2. gulp lib

3. 在src/index.html中引入 angular-ui-router

4. 修改app.js,加入依賴模塊

5. src/script/config/router.js ，路由配置

6. src/index.html加入ui-view標籤讓頁面顯示

7. 解決mainCtrl找不到報錯 src/script/controller/mainCtrl.js

七、路由常用方法

1 路由參數及匹配

2 跳轉方式

3 參數獲取

八、移動端自適應rem src/index.html

九、使用指令組合main.html頁面

1 src/view/main.html 用header footer content三個指令拼成頁面

2 src/view/template/header.html

3 創建指令 src/script/directive/header.js

十、 移動端字體、寬、高自適應

1 修改 src/style/index.less

2 index.html頁面引入 css

4. 在gulpfile.js中編寫task任務

十、移動端字體、寬、高自適應