2016 各家網頁技術

網頁技術名詞:
   
laravel : 為網頁藝術家創造的 PHP 框架, 簡潔語法

Node.JS : 執行於server端的 工具,具備實際邏輯處理流程

Yeoman : web app開發工具,提供粗貌的架構 ,減少處理瑣碎的事情

AngularJS : javascript撰寫語法 之 Model View Control 的整合

BootStrap : 畫面縮放layout

Ionic : for mobile app UI

AngularJS 技術

(A)angularjs 執行順序:
app.config()
app.run()
directive's compile functions (if they are found in the dom)
app.controller()
directive's link functions (again, if found)

(B)angularjs 超連結做法:

 (b-1) <a ui-sref="profile"><i class="fa fa-fw fa-user"></i> Profile</a>
  裡面的profile 找到對應的 App.js裡面的
  .state('profile', {
            url: '/profile',
            templateUrl: '/views/profile.html',
            parent: 'master',
            requireAuth: true
        })
     
  (b-2)如果有傳遞參數則
    <a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})">
    對到$stateParams
    .controller('MainRootCtrl', function($scope, $state, $stateParams) {
    //..
    var foo = $stateParams.foo; //getting fooVal
    var bar = $stateParams.bar; //getting barVal
    //..
    $scope.state = $state.current
    $scope.params = $stateParams;
})


(C)services的使用:

http://www.w3schools.com/angular/tryit.asp?filename=try_ng_services_custom

AngularJS 與 Node JS 融合

範例1 :
https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular

bootstrap layout設計

1.navbar

  <nav id="top_menu_1"class="navbar navbar-default navbar-static-top" role="navigation"     style="top:125px;background:white;">
 
   固定頂端:  navbar-fixed-top

   不固定:  navbar-static-top



2.各物件範例:
http://v4-alpha.getbootstrap.com/components/popovers/

旅行必帶

1.隔日穿著衣物

2.晚上過夜衣物

3.拖鞋,充電器, 換洗用具,健保卡, 身分證+駕照(租車)

android bluetooth 技術相關

1.http://androidsourcehelp.com/bluetooth-auto-connection-in-android-devices/


2.問題: android.app.ServiceConnectionLeaked was originally bound here

  須看logcat訊息中 位於在更前面的exception訊息是什麼

Google Map 設計

1.沿路動畫
http://stackoverflow.com/questions/11519386/animate-a-route-with-google-map-js-api-v3

https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
2.雙模式
https://developers.google.com/maps/documentation/javascript/examples/streetview-simple

 https://developers.google.com/maps/documentation/javascript/examples/streetview-simple?hl=zh-tw

http://alves.im/gmaps-animated-route/


3.設定地圖的畫面位置(Drag):
var mapOptions = {
    center: new google.maps.LatLng(45, -122),
    zoom: 4,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
                              mapOptions);

function moveToLocation(lat, lng){
    var center = new google.maps.LatLng(lat, lng);
    map.panTo(center);  //重點!
}
$('#recenter').click( function() {
    moveToLocation( -34, 150 );
});