Ver Fonte

初始化仓库

马大波 há 5 anos atrás
pai
commit
32a63cfde8

+ 3 - 0
.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "vendor"
+}

+ 4 - 0
.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/dist
+/vendor
+/.idea

+ 13 - 0
bower.json

@@ -0,0 +1,13 @@
+{
+  "name": "api-market-ui",
+  "version": "1.0.0",
+  "dependencies": {
+    "angular": "^1.8.0",
+    "angular-route": "^1.8.0",
+    "semantic": "^2.4.1",
+    "jquery": "^3.5.1",
+    "angular-animate": "^1.8.0",
+    "angular-cookies": "^1.8.0",
+    "angular-ui-router": "^1.0.28"
+  }
+}

+ 139 - 0
gulpfile.js

@@ -0,0 +1,139 @@
+var gulp = require('gulp');
+var loader = require('gulp-load-plugins')(); //按需加载插件,其他插件不用一个一个的引入
+
+var app = {
+  srcPath: 'src/',
+  distPath: 'dist/'
+};
+
+var htmlminOptions = {
+  removeComments: true, //清除HTML注释
+  collapseWhitespace: true, //压缩HTML
+  collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
+  removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
+  removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
+  removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
+  minifyJS: true, //压缩页面JS
+  minifyCSS: true //压缩页面CSS
+};
+
+gulp.task('views', function (done) {
+  gulp.src([
+    app.srcPath + 'app/**/*.html',
+    app.srcPath + 'common/**/*.html'
+  ], {allowEmpty: true})
+    .pipe(loader.plumber())
+    .pipe(loader.htmlmin(htmlminOptions))
+    .pipe(loader.ngHtml2js({prefix: 'app/', moduleName: 'Views'}))
+    .pipe(loader.uglify())
+    .pipe(loader.concat('views.min.js'))
+    .pipe(gulp.dest(app.distPath + 'js'));
+  done();
+});
+
+gulp.task('index', function (done) {
+  gulp.src(app.srcPath + 'index.html')
+    .pipe(loader.plumber())
+    .pipe(loader.htmlmin(htmlminOptions))
+    .pipe(gulp.dest(app.distPath))
+    .pipe(loader.connect.reload());
+  done();
+});
+
+gulp.task('less', function (done) {
+  gulp.src(app.srcPath + 'less/**/*.less')
+    .pipe(loader.sourcemaps.init())
+    .pipe(loader.plumber()) //源自于gulp-plumber,处理错误进程,输出错误日志
+    .pipe(loader.less())
+    .pipe(loader.sourcemaps.write()) //文件底部写入sourcemaps
+    .pipe(loader.minifyCss()) //压缩css成一行
+    .pipe(loader.concat('app.min.css'))
+    .pipe(gulp.dest(app.distPath + 'css'))
+    .pipe(loader.connect.reload());
+  done();
+});
+
+gulp.task('js', function (done) {
+  gulp.src(app.srcPath + '**/*.js')
+    .pipe(loader.plumber())
+    .pipe(loader.ngAnnotate({single_quotes: true})) // 自动注入
+    .pipe(loader.concat('app.min.js')) //合并成一个名为index.js文件
+    .pipe(loader.uglify()) //源自于gulp-uglify,功能压缩js
+    .pipe(gulp.dest(app.distPath + 'js'))
+    .pipe(loader.connect.reload());
+  done();
+});
+
+gulp.task('images', function (done) {
+  gulp.src(app.srcPath + 'assets/images/*.*')
+    .pipe(loader.plumber())
+    .pipe(gulp.dest(app.distPath + 'images'))
+    .pipe(loader.connect.reload());
+  done();
+});
+
+gulp.task('vendor', function (done) {
+  gulp.src([
+    'vendor/angular/angular.js',
+    'vendor/angular-ui-router/release/angular-ui-router.js',
+    'vendor/angular-animate/angular-animate.js',
+    'vendor/angular-cookies/angular-cookies.js',
+    'vendor/jquery/dist/jquery.js',
+    'vendor/semantic/dist/semantic.js'
+  ])
+    .pipe(loader.plumber())
+    .pipe(loader.ngAnnotate({single_quotes: true}))
+    .pipe(loader.concat('vendor.min.js'))
+    .pipe(loader.uglify())
+    .pipe(gulp.dest(app.distPath + 'js'))
+    .pipe(loader.connect.reload());
+  gulp.src('vendor/semantic/dist/themes/**/*.*')
+    .pipe(loader.plumber())
+    .pipe(gulp.dest(app.distPath + 'css/themes'))
+    .pipe(loader.connect.reload());
+  gulp.src('vendor/semantic/dist/semantic.min.css')
+    .pipe(loader.plumber())
+    .pipe(gulp.dest(app.distPath + 'css'))
+    .pipe(loader.connect.reload());
+  done();
+});
+
+gulp.task('fonts', function (done) {
+  gulp.src([
+    app.srcPath + '**/*.woff2',
+    app.srcPath + '**/*.woff',
+    app.srcPath + '**/*.eot',
+    app.srcPath + '**/*.ttf',
+    app.srcPath + '**/*.otf',
+    app.srcPath + '**/*.svg'
+  ])
+    .pipe(gulp.dest(app.distPath))
+    .pipe(loader.connect.reload());
+  done();
+});
+
+gulp.task('clean', function (done) {
+  gulp.src(app.distPath, {allowEmpty: true}).pipe(loader.clean());
+  done();
+});
+
+// gulp.parallel 并行执行, gulp.series 串行执行
+gulp.task('build', gulp.series('vendor', 'index', 'views', 'less', 'js', 'images', 'fonts'));
+
+gulp.task('serve', function () {
+  //gulp.watch 监听任务,目录下的之资源changed,执行任务流
+  gulp.watch('vendor/**/*', gulp.series('vendor'));
+  gulp.watch(app.srcPath + '**/*.html', gulp.series('views'));
+  gulp.watch(app.srcPath + 'less/*.less', gulp.series('less')); //当所有src/less下的 .less文件发生改变时,调用less任务
+  gulp.watch(app.srcPath + '**/*.js', gulp.series('js'));
+  gulp.watch(app.srcPath + 'assets/**/*.*', gulp.series('images'));
+  loader.connect.server({ //前端启动服务,源自于gulp-connect
+    root: [app.distPath], //服务启动的根目录
+    livereload: true, //即时刷新
+    port: 8000 //端口
+  });
+});
+
+gulp.task('default', gulp.series('clean', function () {
+  gulp.start('serve');
+}));

+ 27 - 0
package.json

@@ -0,0 +1,27 @@
+{
+  "name": "angular-app-example",
+  "version": "1.0.0",
+  "description": "Angular App Example",
+  "main": "index.js",
+  "scripts": {
+    "dev": "gulp clean && gulp build && gulp serve"
+  },
+  "author": "Fatboo",
+  "license": "ISC",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-clean": "^0.4.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-connect": "^5.7.0",
+    "gulp-htmlmin": "^5.0.1",
+    "gulp-imagemin": "^7.1.0",
+    "gulp-less": "^4.0.1",
+    "gulp-load-plugins": "^2.0.4",
+    "gulp-minify-css": "^1.2.4",
+    "gulp-ng-annotate": "^2.1.0",
+    "gulp-ng-html2js": "^0.2.3",
+    "gulp-plumber": "^1.2.1",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-uglify": "^3.0.2"
+  }
+}

+ 20 - 0
src/app/app.js

@@ -0,0 +1,20 @@
+var app = angular.module('app', ['ng', 'ui.router', 'Views']);
+app.config(function ($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
+  $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
+  $stateProvider
+    .state('index', {
+      url: '/index',
+      controller: 'IndexController',
+      templateUrl: 'app/views/index/index.tpl.html'
+    })
+    .state('info', {
+      url: '/info',
+      controller: 'InfoController',
+      templateUrl: 'app/views/info/info.tpl.html'
+    });
+  $urlRouterProvider.otherwise('index'); //未找到指定的路由地址,重定向到home页
+  $locationProvider.html5Mode(false).hashPrefix('');
+});
+app.controller('AppController', function ($scope) {
+  console.log('应用初始化!');
+});

+ 16 - 0
src/app/views/index/index.js

@@ -0,0 +1,16 @@
+app.controller('IndexController', function ($scope) {
+  console.log('我是首页控制器');
+  $scope.user = {
+    id: '01',
+    name: 'job',
+    age: 13
+  };
+  $scope.test = function () {
+    var id = $scope.user.id;
+    $scope.test2(id);
+  };
+  $scope.test2 = function (id) {
+    console.log(id);
+    $('.ui.modal').modal('show');
+  };
+});

+ 147 - 0
src/app/views/index/index.tpl.html

@@ -0,0 +1,147 @@
+<div ng-controller="IndexController" style="padding: 16px;">
+  <p>首页</p>
+  <p>id: {{user.id}}, name: {{user.name}}, age: {{user.age}}</p>
+  <button class="ui primary button" ng-click="test()">测试</button>
+  <div>
+    <br/>
+    <div class="ui icon input">
+      <input type="text" placeholder="Search...">
+      <i class="search icon"></i>
+    </div>
+  </div>
+  <br/>
+  <div>
+    <i class="ae flag"></i>
+    <i class="france flag"></i>
+    <i class="china flag"></i>
+  </div>
+  <br/>
+  <div>
+    <i class="american sign language interpreting icon"></i>
+    <i class="assistive listening systems icon"></i>
+    <i class="audio description icon"></i>
+    <i class="blind icon"></i>
+    <i class="braille icon"></i>
+    <i class="closed captioning icon"></i>
+    <i class="closed captioning outline icon"></i>
+    <i class="deaf icon"></i>
+    <i class="low vision icon"></i>
+    <i class="phone volume icon"></i>
+    <i class="question circle icon"></i>
+    <i class="question circle outline icon"></i>
+    <i class="sign language icon"></i>
+    <i class="tty icon"></i>
+    <i class="universal access icon"></i>
+    <i class="wheelchair icon"></i>
+  </div>
+  <br/>
+  <form class="ui form">
+    <div class="field">
+      <label>First Name</label>
+      <input type="text" name="first-name" placeholder="First Name">
+    </div>
+    <div class="field">
+      <label>Last Name</label>
+      <input type="text" name="last-name" placeholder="Last Name">
+    </div>
+    <div class="field">
+      <div class="ui checkbox">
+        <input type="checkbox" tabindex="0" class="hidden">
+        <label>I agree to the Terms and Conditions</label>
+      </div>
+    </div>
+    <button class="ui button" type="submit">Submit</button>
+  </form>
+  <br/>
+  <table class="ui celled table">
+    <thead>
+    <tr><th>Name</th>
+      <th>Age</th>
+      <th>Job</th>
+    </tr></thead>
+    <tbody>
+    <tr>
+      <td data-label="Name">James</td>
+      <td data-label="Age">24</td>
+      <td data-label="Job">Engineer</td>
+    </tr>
+    <tr>
+      <td data-label="Name">Jill</td>
+      <td data-label="Age">26</td>
+      <td data-label="Job">Engineer</td>
+    </tr>
+    <tr>
+      <td data-label="Name">Elyse</td>
+      <td data-label="Age">24</td>
+      <td data-label="Job">Designer</td>
+    </tr>
+    </tbody>
+  </table>
+  <br/>
+  <div class="ui card">
+    <div class="image">
+      <img src="https://semantic-ui.com/images/avatar2/large/kristy.png">
+    </div>
+    <div class="content">
+      <a class="header">Kristy</a>
+      <div class="meta">
+        <span class="date">Joined in 2013</span>
+      </div>
+      <div class="description">
+        Kristy is an art director living in New York.
+      </div>
+    </div>
+    <div class="extra content">
+      <a>
+        <i class="user icon"></i>
+        22 Friends
+      </a>
+    </div>
+  </div>
+  <div class="ui modal">
+    <i class="close icon"></i>
+    <div class="header">
+      Profile Picture
+    </div>
+    <div class="image content">
+      <div class="ui medium image">
+        <img src="https://semantic-ui.com/images/avatar/large/chris.jpg">
+      </div>
+      <div class="description">
+        <div class="ui header">We've auto-chosen a profile image for you.</div>
+        <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
+        <p>Is it okay to use this photo?</p>
+      </div>
+    </div>
+    <div class="actions">
+      <div class="ui black deny button">
+        Nope
+      </div>
+      <div class="ui positive right labeled icon button">
+        Yep, that's me
+        <i class="checkmark icon"></i>
+      </div>
+    </div>
+  </div>
+  <div class="ui card" data-html="<div class='header'>User Rating</div><div class='content'><div class='ui star rating'><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i></div></div>">
+    <div class="image">
+      <img src="https://semantic-ui.com/images/movies/totoro-horizontal.jpg">
+    </div>
+    <div class="content">
+      <div class="header">My Neighbor Totoro</div>
+      <div class="description">
+        Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
+      </div>
+    </div>
+    <div class="ui two bottom attached buttons">
+      <div class="ui button">
+        <i class="add icon"></i>
+        Queue
+      </div>
+      <div class="ui primary button">
+        <i class="play icon"></i>
+        Watch
+      </div>
+    </div>
+  </div>
+</div>

+ 3 - 0
src/app/views/info/info.js

@@ -0,0 +1,3 @@
+app.controller('InfoController', function ($scope) {
+  console.log('我是Info控制器');
+});

+ 1 - 0
src/app/views/info/info.tpl.html

@@ -0,0 +1 @@
+<div ng-controller="InfoController">Info</div>

+ 18 - 0
src/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="zh" ng-app="app">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Angular 1.x Learning</title>
+  <link rel="stylesheet" href="css/semantic.min.css">
+  <link rel="stylesheet" href="css/app.min.css">
+</head>
+<body ng-controller="AppController">
+<div ui-view></div>
+<script src="js/vendor.min.js"></script>
+<script src="js/views.min.js"></script>
+<script src="js/app.min.js"></script>
+</body>
+</html>

+ 1 - 0
src/less/style.less

@@ -0,0 +1 @@
+// 全局样式