2015年10月27日 星期二

grunt





best tutorial, step by step:
http://fairwaytech.com/2014/01/understanding-grunt-part-1-installation-linting-concatenation-and-minification/


linting
making sure that our code adheres to good JavaScript practices

concat
整合檔案的任務

uglify
是用來設定壓縮檔案並根據專案的 metadata 產生一些註解。



watch
This can be run on the command line with grunt watch. When it detects any of the files specified have changed (here, I just use the same files I told JSHint to check), it will run the tasks you specify, in the order they appear.


● 外掛原則上可以分成兩類:開發過程的工具、發佈的工具
◎ 發佈的工具,以下將介紹:
  grunt-contrib-concat
  grunt-contrib-uglify
  grunt-contrib-cssmin
  grunt-contrib-copy
  grunt-usemin
◎ 開發過程的工具,以下將介紹:
  grunt-contrib-jshint
  grunt-contrib-connect
  grunt-contrib-watch

grunt 教學 tutorial

http://gruntjs.com/getting-started

http://clayliao.blogspot.tw/2013/06/introducing-grunt.html


example Gruntfile.js

module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' } } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); };




package.js

{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-uglify": "~0.5.0" } }


2015年10月13日 星期二

ng-view angular js template

from:
https://thinkster.io/a-better-way-to-learn-angularjs/ng-view


include  angular-route.js





angular.module('myApp', ['ngRoute'])

.config(function($routeProvider){
  $routeProvider.when("/",
    {
      templateUrl: "app.html",
      controller: "AppCtrl",
      controllerAs: "app"
    }
  );
})

.controller('AppCtrl', function() {
  var self = this;
  self.message = "The app routing is working!";
});


<h1>{{ app.message }}</h1>
<body ng-app="myApp">
  <ng-view></ng-view>
</body>

2015年10月12日 星期一

angular js service


from :
http://programer-learn.blogspot.tw/2014/07/angularjs-service.html


-Service 可以把它想做是一個提供某一項服務的物件
-Service 封裝了某一個定功能的實作邏輯,讓你能夠在不同模組之間重覆使用(reuse)
-AngularJS 的 Module 提供了三個方法(method)來定義你的 Service , 分別是 factory、service 以及 provider

這三個方法的結果完全是一樣的,就是一個 Service Object (注意:是一個物件)

而這三種方法的差別其實僅在於 Service Object 的建立與管理的過程



<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">

   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <script src="js.js"></script>


         <title>Examples</title>
         <script>

              var demoApp = angular.module("demoApp", []);
              demoApp.controller("demoCtrl1", function($scope, echoService){
                  $scope.name = "Allen";
                  $scope.echo = function(){
                       alert("demoCtrl1");
                       echoService.echo($scope.name);
                  };
             }).controller("demoCtrl2", function($scope, echoService){
                  $scope.name = "Bob";
                  $scope.echo = function(){
                       alert("demoCtrl2");
                       echoService.echo($scope.name);
                  };
             });

           
             demoApp.factory("echoService", function(){
               console.log("Factory Function be executed...");
               var echoCount = 0;
               return {
                    echo: function(name){
                        return console.log((echoCount++) + ", Your name is " + name);
                    }
               };
             });
         </script>
     </head>
     <body ng-app="demoApp">
         <div ng-controller="demoCtrl1">
              Name : <input type="text" ng-model="name"/><br/>
              <button ng-click="echo()">click</button>
         </div>

         <div ng-controller="demoCtrl2">
              Name : <input type="text" ng-model="name"/><br/>
              <button ng-click="echo()">click</button>
         </div>
     </body>


</html>

2015年10月6日 星期二

best video about bower

from:
https://www.youtube.com/watch?v=Vs2wduoN9Ws&list=PLLe5zZLcs7m8v-Y-mHVOLTlPcOQgu2TsF


  592  bower install jquery
  593  bower list
  594  bower list --paths
  595  bower install underscore
  596  bower list --paths
  597  ls
  598  bower uninstall jquery
  599  bower list --paths
  600  bower init


2015年10月4日 星期日

angula , time interval

 var app= angular.module('scopeExample', [])

app.controller('MyController', function($scope) {
  $scope.person = { name: "Ari Lerner" };


  var updateClock = function() {
    $scope.clock = new Date();
  };


  var timer = setInterval(function() {
    $scope.$apply(updateClock);
  }, 1000);


  updateClock();
});

===============

   <h5>{{ clock }}</h5>