wahengjavascript: 10月 2015

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

2015年10月27日 星期二