7_nodejs angularjs

 

 

webstrom使用：

ctrl+b/點擊，代碼導航,自動跳轉到定義

ctrl+n跳轉指定類

ctrl+d複製當前行ctrl+enter另起一行ctrl+y刪除當前行

ctrl+alt/shift+b跳轉方法實現/定義處

包裹/去掉外圍代碼unwrap...

主題appearance

字體editor-colors&fonts-font

自動換行settings-editor-appearance-show line

顯示行號..........................show line numbers

代碼對齊..........................show right margin

代碼提示速度...editor-code completion,autopopup in(ms):0

代碼拼寫檢查設置

ctrl+e打開最近文件

代碼補全settings-javascript-libraries-down/xxx.ts定義文件定位

git配置：editor-github改github帳戶

插件安裝file-plugins   css-X-fire插件：firebug修改css屬性時，編輯器內的css代碼也會發生變化

禁用部分插件提升打開速度

webstrom配置nodejs：

settings-->languages....-->nodejs....-->選擇文件exe；配置source code:directory;c:\.....\npm

 

 

Node.js：

js運行在瀏覽器/客戶端的語言，主要對象包括ES原生對象(11個)、BOM對象、DOM對象

node.js運行於服務器端，相似於php,jsp,asp.net；主要對象包括：es對象、1000+擴展對象；能夠編寫獨立的服務器應用/向web發送數據；基於服務器和客戶端的v8引擎，訪問服務器端文件系統/數據庫

node.js與php+Nginx性能對比：node.js每秒響應請求數較多（輸出/執行mysql查詢）

LTS： Long Term Support               下載：https://nodejs.org

npm全局模塊存放路徑；cache緩存路徑

，一個

Node.js 文件就是一個模塊，這個文件多是 JavaScript 代碼、JSON 或者編譯過的 C/C++ 擴展。

Node.js 特色：異步式 I/O（或者非阻塞 I/O）與事件緊密結合的編程模式；

控制流很大程度上要靠事件和回調函數來組織

 

①node兩種運行模式：

交互模式：REPL模式，cmd：node

腳本模式：node xxx.js絕對路徑或cmd：e:-->cd 文件夾-->node 文件名

node -v查看版本

②調試：命令行調試：cmd：node debug debug.js，

單擊行號添加斷點

③nodejs HTTP模塊：內部是用 C++ 實現的，外部用 JavaScript 封裝

HTTP協議的內容：nodejs需手動設置http協議，php一般不須要設置http協議

  (1)請求消息

       GET /web/index_new.html?tedu HTTP/1.1

Host: tmooc.cn

Connection: keep-alive

  (2)響應消息

       HTTP/1.1 200 OK

Server: Apache-Coyote/1.1

Content-Type: text/html;charset=UTF-8

QueryString模塊：用於解析鍵值對形式的查詢字符串，獲得一個對象。

HTTP 協議規定，請求消息能夠在URL後面追加一個?開頭的QueryString，用於向服務器提交請求數據。

var qs=require("querystring");     //引入指定模塊

var str = 'uname=tom&upwd=123&age=20';

var obj=qs.parse(str);                  //將str解析爲對象

URL模塊：解析一個完整的URL地址，獲得其中的各個部分

var url=require("url");

var str="http://tedu.cn:80/s.do?k1=v1&k2=v2";

var obj=url.parse(str，true);              //true表示使用

手動解析?後內容，得到表單數據，get請求在url上返回數據

FileSystem模塊：用於操做文件系統,讀寫目錄、讀寫文件，Node.js底層使用C程序來實現

              var fs = require('fs');

              var data = fs.readFileSync('源文件名',['utf-8'],[f(err,data)]);   //同步讀取文件內容到緩衝區

fs.readFile(file,['utf-8'],[f(err,data)])          //異步讀取文件

              fs.writeFileSync('目標文件名', '要寫出的內容');            //向文件中寫出內容

              fs.appendFileSync('目標文件名', '要追加的內容');  //向文件中追加內容

 

④nodejs第三方模塊：https://www.npmjs.com/全世界最大的node.js第三方模塊集散地

第三方模塊js必須保存在js同級目錄下的名爲node_modules的文件夾中

MySQL模塊：npm

var mysql=require("mysql");

var coon=mysql.createConnection({

host        :             '127.0.0.1',

       user        :             'root',

       password :             '',

       database :             'tedu'

});

conn.query('INSERT/SELECT...',f(err,result){});

conn.end();

 

⑤建立一個靜態Web服務器：

步驟：

建立一個HTTP Server

爲server指定處理請求消息的過程(獲取請求數據，返回響應數據，http、url、fs模塊)

解析請求URL中的資源名稱， 如 /login.html

       讀取指定文件中的內容，如 htdocs/login.html

       構建響應消息，把讀取到的文件內容輸出客戶端客戶端

讓server開始監聽特定端口

var http = require('http');

var server = new http.Server();

server.on(事件, f(){             //解析url，讀取html文件 });

server.listen(端口號);

事件：

request：f返回http.ServerRequest請求對象，http.ServerResponse響應對象參數

req請求對象：

req.url：請求文件的url，做爲url字符串使用

req.data(chunk)：請求體數據到來時被觸發，chunk請求體數據，

所有數據：datas+=chunk；該事件會屢次調用

用於表單的post請求，post請求在請求體中返回數據

req.end()：請求體數據傳輸完成觸發

req.close()：請求結束觸發，包括用戶強制終止傳輸

res響應對象：輸出到客戶端

res.writeHead(status,[headers])：向客戶端發送請求頭，status狀態碼

res.write(data,[encoding])：發送響應內容，data內容，encoding編碼方式

res.end([data],[encoding])：結束相應，不調用則客戶端永遠處於等待狀態

connection：TCP鏈接創建被觸發

close：服務器關閉時觸發，不包括用戶鏈接斷開

修改代碼後必須終止Node.js 再從新運行纔會奏效(不能刷新)

ex：啓動服務器並開始監聽3000端口：

var http = require('http');

var server=http.createServer(function(req, res) {            //http.createServer()建立http.Server服務器對象

res.writeHead(200, {'Content-Type': 'text/html'});   //請求成功的響應代碼200

res.write('<h1>Node.js</h1>');                         //返回響應體

res.end('<p>Hello World</p>');

}).listen(3000);                                                      //鏈式，

console.log("HTTP server is listening at port 3000.");//進程一直等待，直到按下ctrl+c退出

打開瀏覽器訪問 http://176.2.18.39:3000

 

⑥建立一個動態Web服務器：

解析url資源：xxx.html或xxx.do

爲Server指定處理請求消息的過程

若請求資源名稱以.html結尾，直接讀取指定文件中的內容，如 htdocs/login.html，做爲響應消息數據；

若請求資源爲xxx.do，解析請求數據，訪問數據庫，把執行結果做爲相應消息數據

構建響應消息，把讀取到的文件內容輸出客戶端客戶端

讓Server開始監聽特定端口

 

⑦共享80端口：虛擬主機，就是讓多個網站共享使用同一服務器同一IP地址，經過域名的不一樣來劃分請

求；在Nginx 中設置反向代理和虛擬主機很是簡單，下面是配置文件的一個示例：

server {

listen 80;

server_name mysite.com;

location / {

proxy_pass http://localhost:3000;

}

}

這個配置文件的功能是監聽訪問mysite.com 80 端口的請求，並將全部的請求轉發給

http://localhost:3000，即咱們的Node.js 服務器。如今訪問http://mysite.com/，就至關於服務器

訪問http://localhost:3000了。

在添加了虛擬主機之後，還能夠在Nginx配置文件中添加訪問靜態文件的規則（具體請

參考Nginx文檔），刪去app.js 中的app.use(express.static(__dirname + '/public'));。

這樣能夠直接讓Nginx 來處理靜態文件，減小反向代理以及Node.js 的開銷。

 

 

 

 

 

MVC架構：設計模式之一，

Model：模型，項目中的數據；

View：視圖，數據的呈現；

Controller：控制器，獲取模型數據，選擇視圖加以呈現

模板爲中心的架構：PHP、ASP、JSP

AngularJS：js框架

致力於開發單頁面應用程序(Single Page Application)

易於構建頁面CRUB操做

一切操做都以數據爲中心：建立/綁定/修改/更新數據；基本思路與jQuery的先查找元素再操做元素不一樣

AngularJS四大特性：採用MVC模型，雙向數據綁定，依賴注入(DI)，模塊化設計

使用：

引入js文件：angular.js；<script src="js/angular.js"></scropt>

爲父級元素聲明ng-app屬性；

在父級元素內部使用AngularJS：<p>{{1+2}}</p>

 

AngularJS的MVC:

ng-controller聲明模型數據：

<html ng-app="myapp">                   //定義模塊名並肯定模塊做用範圍

<div ng-controller="myctrl">            //控制器組件

<p>{{num}}</p>               //綁定數據

</div>

 <button ng-click="add($index)">loadMore</button>           //傳入參數

</html>

var app = angular.module('myapp',[]);              //聲明模塊

//一個模塊能夠定義多個功能組件：controller,directive,filter,service,...

app.controller("myctrl",function($scope){ //聲明控制器

console.log($scope);

$scope.num=10;                               //定義模型數據，存在$scope對象中

$scope.add=function(){...}                //定義模型函數

})

或angular.module('模塊名',[依賴列表]).controller("控制器",function($s){s.xxx;});

     

 

雙向數據綁定：

Model數據綁定到View：髒數據檢查(Dirty Checking)：model數據的修改自動更新到View

①{{表達式}}：

+ - * / % > >= == === !== && || ! ?:  {{20>18?1:0}}

不容許：1++,1--；1+=2；

特殊運算符:typeof(num),age instanceof String；

new和var關鍵字

{{{'ename':'tom'}.ename}}獲取對象的成員屬性 member={ename:'tom'}

{{member.ename}}

{{'hello'.toUpperCase()}}獲取對象的成員方法

{{['tom','mary'][1]}}獲取數組中的指定元素

②指令directive：標籤內添加屬性，封裝DOM操做

ng-app[="模塊名"]                     初始化一個AngularJS應用程序，肯定一個應用模塊的做用範圍；

ng-init="表達式"                聲明/賦值變量，不推薦，變量可賦值值/數字/對象{}，雙向綁定

x1=val;x2=val;      car={name:'BMW',price:'30'}

ng-bind="表達式"               表達式的值輸出爲當前元素的innerHTML；將模型變量綁定到視圖中

{{...}}去輸出表達式結果時，有可能會出現閃爍，ng-bind代替輸出防止閃爍

ng-repeat="v in arr/obj"              循環生成當前元素，爲HTML增長循環功能

<li ng-repeat="tmp in arr/obj">{{tmp}}</li>          tmp下標，經常使用{{arr.tmp/tmp.xxx}}

ng-repeat="dish in list track by $index"

ng-repeat="(k,v) in arr/obj"        

<li ng-repeat="(k,v) in car">{{k}} {{v}}</li>  arr:k下標；obj:循環輸出鍵值對key,value          

ng-if="表達式"            表達式爲true,當前元素會掛到DOM，不然刪除

<tr ng-repeat="tmp in stuList" ng-if="tmp.chinese > 60">{{tmp}}</tr>知足ng-if時循環輸出tmp

ng-include="'tpl/footer.html'"            替換某標籤內片斷,如footer     

ng-controller="控制器"              每一個控制器有一個$scope做用域對象，可嵌套

控制器應該儘量保持短小精悍，而在控制器中進行DOM操做和數據操做則是一個很差的實踐。

<ANY  ng-xx=''/>              xx:html標籤的擴展屬性

ng-click="f()"

ng-src="img/{{url}}"          <img ng-src="img/{{dish.url}}" alt=""/>

err-src="img/404.jpg"   若圖片加載失敗，404報錯時，提供備用圖片

ng-herf=「...」

<ngView />擴展標籤

ng-show/hide="isshow"              ngShow表達式計算結果爲假時，ng-hide CSS 類會被加到元素的class屬性中

      <p ng-show='hasMore' ng-click="add()">添加更多按鈕</p>

       <p ng-hide="hasMore">沒有更多數據能夠加載了</p>

ng-style/class

ng-checked

ng-disabled

ng-model=」val」                 綁定input,select,texttarea;￥scope.val=...;

 

View數據綁定到Model：View數據的修改自動更新到Model

①ng-model="模型變量名"        只有表單控件的值能夠修改：input,多行文本textarea,下拉框select,單選複選

<input type="checkbox" ng-model="isAgree">

<button ng-disabled="!isAgree">111</button>

$scope.$watch('agree',function(){console.log($scope.agree);})      使用$scope.$watch()監視到模型數據的每次修改

 

 

過濾器filter：對錶達結果進行篩選/格式化；| 管道，用於數據傳遞

{{ 表達式 | filter[:params] | filter2[:params] }}

number:小數部分有效位數               格式化數字，若不是數字則返回空字符串

currency:'貨幣符號'                          格式化爲貨幣形式$

{{sum()|currency:'￥'}}                    sum():return value;

date:'日期時間格式'                          把date/string/number轉換爲特定的日期格式

{{nowDate | date:'yy-MM-dd'}} $scope.nowDate = new Date();

upperCase                                         全部字符轉換爲大寫

lowerCase                                         小寫

orderBy:表達式                                對數組進行排序，默認增序,true降序,

 <li ng-repeat="tmp in friends|orderBy:'age'[:true | limitTo:3]>{{tmp.name}} {{tmp.age}}</li>只顯示前三名

limitTo:n                                                 返回指定長度

 

 

函數function：

angular.uppercase(string);                               大寫轉換

angular.lowercase(string);                                小寫

angular.fromJson(jsonStr);                              反序列化

angular.toJson(obj, [pretty]);                                  序列化，json->str

angular.forEach(obj/arr, fn(value,key), [context]);   對obj/arr的每一個條目調用一次fn

angular.module(name, [requires], [configFn]); 建立模塊,angular.module('app',['ng'/依賴列表])     

 

 

服務service:每一個service對象都是單例的

經常使用內置服務/注入對象：

$scope：        做用域對象，子$scope若找不到值則訪問父$scope，直到$rootScope中也找不到

$scope.$watch("模型變量名",function(to,from){....},[false/true]);              監聽模型數據變化，

每次進行model到view的綁定都會建立一個$watch追加到$watch隊列中

$scope.$digest()                                手工觸發$watch隊列中的全部監聽函數，

$scope.$apply(function(){...})           對$scope.$digest()的進一步封裝，建議使用$apply方法完成$digest的調用

angular上下文環境中對模型修改自動調用；若在上下文環境以外被修改需手工調用

$scope.$apply();<==> $rootScope.$digest();

$location：

controller(控制器名,function($scope,$location){    //使用某個服務則需在控制器的回調函數中注入進來

console.log($location.absUrl());         //獲取地址

});

$http：能夠向服務器發起ajax請求，異步的獲取服務器端返回的相應數據，默認json數據

$http({method:"GET/POST",url:"/url"})   請求地址：data/test.json或php

.success(function(data, status, headers, config){})

.error(function(data, status, headers, config){});

$http.get("/url").success(fn(data,...));               傳數據url+?k=v

$http.post("/url",data).success(fn);

$http.head

$http.put

$http.delete

$http.jsonp

$rootScope                  根做用域對象，所用的控制器實例共用，用於跨控制器共享模型數據

module.controller('控制器名',function($rootScope){$rootScope.模型變量=值;$rootScope.模型方法=fn;})

$window：提供對於瀏覽器的 window 對象的包裝引用。

$animate：實現動畫

$log

$interval：週期性定時器

$scope.timer=$interval(function(){

})

終止定時器$interval.cancel($scope.timer);

<==>setInterval($scope.f(),1000)

$timeout：一次性定時器

$timeout(function(){...},1000);

<==>setTimeout(fn,time)

 

依賴注入(Dependency Injection)：$injector注入器快速定位到須要注入的各類服務

①推斷式依賴注入：不須要關注注入時參數的前後順序，ng會根據參數查找對應的服務並注入進來，這種方式不能處理壓縮或者混淆後的代碼，只能處理原始的代碼

自定義服務

app.factory('服務名字',function(){

return {

方法名：function(){},

屬性名：屬性值

};

});

app.controller('MyCtrl',function($scope,$show){$service.方法()/屬性}

②標記式依賴注入：直接調用$inject屬性來完成(字符型數組)

var ctrFunc = function ($scope,$print,$show) {

           $scope.callShow = function () {

               $show.show();

           }

 

           $scope.callPrint = function () {

               $print.print();

           }

};

ctrFunc.$inject = ["$scope","$print","$show"];

app.controller('myCtrl',ctrFunc);

③行內式依賴注入：容許咱們將一個字符數組做爲對象的參數；在這個數組中，除最後一個元素必須是函數體以外，其他都是注入的服務名稱。

app.controller('MyCtrl',["$scope","$show"，function($scope,$show){...}])

 

獲得注入器：auto/service

 var injector = angular.injector(['myApp','ng']);

 或app.controller('myCtrl',fn($scope){

$scope.f=function(){

var injector=angular.injector(['myApp','ng']);           //經過注入$injector服務代替angular.injector()

injector.has('$show')...

}

}

injectorAPI:

injector.has('$show'):從註冊列表中查找對應服務，找到返回true

injector.get('$show'):返回指定名稱的服務實例，獲取實例以後，調用服務中的屬性和方法

 

壓縮文件：

YUICompressor：雅虎UI庫,java語言編寫，壓縮css/js文件

刪除全部註釋，無語義的空白字符，將變量名/函數名替換爲儘量短的形式

安裝java運行環境-jdk

經過命令行：java.exe -jar C:\yui-compressor.jar C:\demo03Js.js > C:\demo.min.js

或webstorm配置yuicompressor,監視並自動進行壓縮

file-settings-file watchers-+添加yui-配置jar包路徑

壓縮文件的依賴注入：

壓縮過程會對函數的形參名進行精簡壓縮，則Angular沒法識別，從而沒法實現注入

解決：行內式依賴注入：module.controller('控制器名',['$scope','$http','$log',function($scope,$http,$log){...}])

 

 

模塊化：

b模塊使用a模塊當中的東西，在b模塊聲明的時候，在依賴列表中寫上對應的模塊名字

var app01=angular.module("myApp01",[]);

var app02=angular.module("myApp",['ng','myApp01']);

面試題：一個ng模塊，能夠包含哪些組件：

①controller：多個控制器組件

②directive：指令，view中綁定模型數據

③service：服務，在不一樣控制器之間提供某種函數服務

④filter：過濾，篩選，格式化輸出

⑤function：

provider組件：相似於service，較少使用

type組件：好比

object組件：有些對象，不多用

 

 

 

 

自定義指令

app.directive('指令名'.function(){                                         //駝峯式命名tsHello，使用則ts-hello

return{

restrict:'EAC',                                                        //限制值：E(Element)A(Attribute)C(Class)M(Comment)

template:'該指令實際對應的HTML內容',             //替換標籤內文本

templateUrl:'xxx.html'

};

})

普通標籤使用：<ts-hello></ts-hello>

屬性使用：<p ts-hello></p>

class使用：<p class="ts-hello"></p>

 

建立一個服務：

app.service('服務名',function(){                             //服務名：$xxx

this.xx=xxx;

this.yy=function(){...}

})

factory是普通方法，service是構造函數

 

自定義過濾器：

app.filter('過濾器名',function(){

return function(輸入參數){

//處理過程

return 處理結果

}

})

 

 

SPA(single page application)單頁應用工做原理：

1.url形式：http://127.0.0.1/index.html#/路由地址

2.瀏覽器先拿到index.html，再解析路由地址

3.路由詞典

#/start==>tpl/start.html

#/main

4.獲取到真實頁面地址，發起請求，獲取末班頁面，插入到DOM樹，實現刷新

 

路由模塊：

①建立一個完整html頁面，引入angular.js和angular-route.js

②聲明模塊angular.module('myApp',['ng','ngRoute']);

③html中使用ngView聲明一個容器元素，盛放代碼片斷

④建立模板頁面

⑤配置路由詞典

app.config(function($routeProvider){

$routeProvider.

when('/路由地址1',{                                //頁面url:/start

templateUrl:'模板頁面地址1',           //文檔url：xxx.html,包含片斷如<p>..</p>，無需完整結構

controller:"starCtrl"                                  //聲明控制器

}).when('/路由地址2/:index',{                 //:index變量前加冒號

templateUrl:'模板頁面地址2',

controller:"mainCtrl"                

}).otherwise({

redirectTo:'/路由地址1'                            //默認其餘跳轉url

})

});

模板跳轉：

超連接：<a href="#/路由地址">...</a>

js實現：

<button ng-click="jump()"></button>

$scope.jump=function(){  $location.path("/路由地址");  }

var app = angular.module('myApp',['ng','ngRoute']);

  app.controller('startCtrl',

    ['$scope','$location',

      function ($scope,$location) {

      $scope.jump = function () {

        $location.path('/login');

      }

  }]);

讀取路由參數：

.controller("...",function($routeParams){console.log($routeParams.dno);})

 

動畫模塊ngAnimate

依賴兩種技術：

CSS Transition/Keyframes動畫

聲明ngAnimate依賴模塊後，元素消失/顯現時自動添加的class

.ng-enter：元素消失=>存在時，剛一進入時的狀態

.ng-enter-active：元素消失=>存在時，進入完成時的狀態

.ng-leave：存在=>消失時，剛一離開時的狀態

.ng-leave-active：存在=>消失時，離開完成時的狀態

中間的動畫的執行由css transition實現

經過設置四個class來添加動畫

.page {

    position: absolute;

    width: 100%;

}

.page.ng-enter,

.page.ng-leave {

    -webkit-transition: .5s linear all;

    -moz-transition: .5s linear all;

    -ms-transition: .5s linear all;

    -o-transition: .5s linear all;

    transition: .5s linear all;

}

.page.ng-leave {

    left: 0;

    opacity: 1;

}

.page.ng-leave.ng-leave-active {

    left: -100%;

    opacity: 0;

}

.page.ng-enter {

    left: 100%;

    opacity: 0;

}

.page.ng-enter.ng-enter-active {

    left: 0;

    opacity: 1;

}

jQuery.animate()函數

引入jquery.js,angular.js,angular-animate.js

建立模塊，聲明對ngAnmiate模塊的依賴

var app = angular.module('kaifanla',['ng','ngRoute','ngAnimate']);

app.animation(‘要使用動畫的元素選擇器’,function(){

return{

enter:function(e,fn){

$(e).css({剛一進入時的初始狀態});

$(e).animate({剛入完成時的狀態},2000,fn);

},

leave:function(e,fn){

$(e).css({剛一離開時的初始狀態});

$(e).animate({離開完成時的狀態},2000,fn);

}

}

})