调整基础案例

gulpfile.js

@@ -110,7 +110,7 @@ gulp.task('views', function (done) {
 });
 
 gulp.task('dev_less', function (done) {
-  gulp.src(app.srcPath + 'less/**/*.less')
+  gulp.src(app.srcPath + '**/*.less')
     .pipe(loader.sourcemaps.init())
     .pipe(loader.plumber()) //源自于gulp-plumber，处理错误进程，输出错误日志
     .pipe(loader.less())
@@ -122,7 +122,7 @@ gulp.task('dev_less', function (done) {
 });
 
 gulp.task('less', function (done) {
-  gulp.src(app.srcPath + 'less/**/*.less')
+  gulp.src(app.srcPath + '**/*.less')
     .pipe(loader.sourcemaps.init())
     .pipe(loader.plumber()) //源自于gulp-plumber，处理错误进程，输出错误日志
     .pipe(loader.less())
@@ -155,10 +155,10 @@ gulp.task('js', function (done) {
   done();
 });
 
-gulp.task('images', function (done) {
-  gulp.src(app.srcPath + 'assets/images/*.*')
+gulp.task('assets', function (done) {
+  gulp.src(app.srcPath + 'assets/**/*.*')
     .pipe(loader.plumber())
-    .pipe(gulp.dest(app.distPath + 'images'))
+    .pipe(gulp.dest(app.distPath))
     .pipe(loader.connect.reload());
   done();
 });
@@ -210,17 +210,17 @@ gulp.task('clean', function (done) {
 });
 
 // gulp.parallel 并行执行, gulp.series 串行执行
-gulp.task('build', gulp.series('vendor', 'views', 'less', 'js', 'images', 'fonts', 'index'));
+gulp.task('build', gulp.series('vendor', 'views', 'less', 'js', 'assets', 'fonts', 'index'));
 
-gulp.task('dev_build', gulp.series('dev_vendor', 'dev_views', 'dev_less', 'dev_js', 'images', 'fonts', 'dev_index'))
+gulp.task('dev_build', gulp.series('dev_vendor', 'dev_views', 'dev_less', 'dev_js', 'assets', 'fonts', 'dev_index'))
 
 gulp.task('serve', function () {
   //gulp.watch 监听任务，目录下的之资源changed，执行任务流
   gulp.watch('vendor/**/*', gulp.series('dev_vendor', 'dev_index'));
   gulp.watch(app.srcPath + '**/*.html', gulp.series('dev_views', 'dev_index'));
-  gulp.watch(app.srcPath + 'less/*.less', gulp.series('dev_less', 'dev_index')); //当所有src/less下的 .less文件发生改变时，调用less任务
+  gulp.watch(app.srcPath + '**/*.less', gulp.series('dev_less', 'dev_index')); //当所有src/less下的 .less文件发生改变时，调用less任务
   gulp.watch(app.srcPath + '**/*.js', gulp.series('dev_js', 'dev_index'));
-  gulp.watch(app.srcPath + 'assets/**/*.*', gulp.series('images'));
+  gulp.watch(app.srcPath + 'assets/**/*.*', gulp.series('assets'));
   loader.connect.server({ //前端启动服务，源自于gulp-connect
     root: [app.distPath], //服务启动的根目录
     livereload: true, //即时刷新

src/app/app.js

@@ -7,9 +7,9 @@ angular
         controller: 'IndexController',
         templateUrl: 'app/views/index/index.tpl.html'
       })
-      .when('/info', {
-        controller: 'InfoController',
-        templateUrl: 'app/views/info/info.tpl.html'
+      .when('/list', {
+        controller: 'ListController',
+        templateUrl: 'app/views/list/list.tpl.html'
       });
     $routeProvider.otherwise({ redirectTo: '/' }); // 未找到指定的路由地址，重定向到home页
     $locationProvider.html5Mode({
@@ -17,6 +17,15 @@ angular
       requireBase: false
     });
   })
+  .run(function ($rootScope, $location) {
+    /* 监听路由的状态变化 */
+    $rootScope.$on('$routeChangeStart', function (event, next, current) {
+      console.log('route begin change');
+    });
+    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
+      console.log('route have already changed ：' + $location.path());
+    });
+  })
   .controller('AppController', function () {
-    console.log('应用初始化！');
-  });
+    console.log('Application Loaded!');
+  });

src/app/views/index/index.js

@@ -1,7 +1,6 @@
 angular
   .module('app')
   .controller('IndexController', function ($scope, $http) {
-    console.log('我是首页控制器');
     var fetchBlogConfig = function () {
       $http.get('https://blog.coosom.com/setting/fetch').then(function (data) {
         console.log(data);

src/app/views/index/index.tpl.html

@@ -1,6 +1,7 @@
 <div style="padding: 16px;">
   <p>首页</p>
   <p>id: {{user.id}}, name: {{user.name}}, age: {{user.age}}</p>
+  <a href="/list" class="ui button">List Page</a>
   <button class="ui primary button" ng-click="test()">测试</button>
   <div>
     <br/>

src/app/views/info/info.js

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

src/app/views/info/info.tpl.html

@@ -1 +0,0 @@
-<div>Info</div>

src/app/views/list/list.js

@@ -0,0 +1,28 @@
+angular
+  .module('app')
+  .controller('ListController', function ($scope, $http) {
+    $scope.linkList = [];
+    $http.get('https://blog.coosom.com/link/list').then(function (resp) {
+      $scope.linkList = resp.data.data;
+    });
+    $('.link-list').on('click', '.list-item-check', function () {
+      $(this).checkbox({
+        onChecked: function () {
+          console.log('Check Item!', $(this).val());
+        },
+        onUnchecked: function () {
+          console.log('Cancel Check Item!');
+        }
+      });
+    });
+    $('.link-list').on('click', '.list-check-all', function () {
+      $(this).checkbox({
+        onChecked: function () {
+          console.log('Check All!');
+        },
+        onUnchecked: function () {
+          console.log('Cancel Check All!');
+        }
+      });
+    });
+  });

src/app/views/list/list.less

@@ -0,0 +1,10 @@
+.link-list {
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: auto;
+
+  [data-label="icon"] img {
+    height: 50px;
+    width: auto;
+  }
+}

src/app/views/list/list.tpl.html

@@ -0,0 +1,48 @@
+<div class="link-list">
+  <table class="ui celled padded table">
+    <thead>
+      <tr>
+        <th>
+          <div class="ui checkbox list-check-all">
+            <input type="checkbox">
+            <label>全选</label>
+          </div>
+        </th>
+        <th>图标</th>
+        <th>名称</th>
+        <th>地址</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr ng-repeat="link in linkList track by $index">
+        <td>
+          <div class="ui checkbox list-item-check">
+            <input type="checkbox" value="{{link.id}}">
+            <label></label>
+          </div>
+        </td>
+        <td data-label="icon"><img ng-src="{{link.icon}}" alt="{{link.name}}" /></td>
+        <td data-label="name">{{link.name}}</td>
+        <td data-label="url"><a ng-href="{{link.url}}" target="_blank">{{link.url}}</a></td>
+      </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <th colspan="5">
+          <div class="ui right floated pagination menu">
+            <a class="icon item">
+              <i class="left chevron icon"></i>
+            </a>
+            <a class="item">1</a>
+            <a class="item">2</a>
+            <a class="item">3</a>
+            <a class="item">4</a>
+            <a class="icon item">
+              <i class="right chevron icon"></i>
+            </a>
+          </div>
+        </th>
+      </tr>
+    </tfoot>
+  </table>
+</div>

src/index.html

@@ -6,6 +6,7 @@
         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="icon" href="favicon.ico" type="image/x-icon">
   <!-- build:css -->
   <!-- endBuild -->
 </head>