歷史學習筆記

1，取JSON的長度：.length

 

2，$scope的做用域：

2.1，controller的嵌套：

$scope會從內向外查找函數和值。

2.2，$rootScope：

最父級的做用域。

子類能夠經過$parent()來找到父級的$scope的值。

 

3，$parse：轉義

 

4，$filter(‘uppercase’)(‘abc’)==‘ABC’

 

5，$watch：

綁定不一樣的ng-model，有不一樣的function(參數)                    //$watch不須要注入

Ng-model                            function(參數)

Input                                   function(newVal,oldVal,scope)      //這裏的scope和controller的$scope同一個做用域

Textarea                              function(body)                            //body：textarea中的內容

 

6，數據JSON的新增

$scope.person={greet:false;};                                   //{{person}}   ==   {‘greet’:’false’;}

$scope.person.name=’aaa’;                              

//{{person}}   ==   {‘greet’:’false’;’name’:’aaa’}

 

7，<pre>

 

 

 

 

 

20150614

 

angularJS

指令：

1，駝峯命名法：

<my-directive>---html

‘myDirective’ ----js

 

2，restrict:

E-element

<my-hello>

C-class

<div class=’my-hello’>

A-attr

<div my-hello>

M-註釋

 

Js---myHello

 

3，隔離做用域：directive中有一個做用域：scope

 

4，$scope.someBarValue---copy

$scope.someModel.someValue---引用copy

 

5，ng-include：將外部HTML寫入應用中。

 

6，ng-switch

 

7，ng-class=’{even:!$even，odd:!$odd}’                         //控制class產生相間的class

 

 

 

20150616

angularJS指令：

.directive

1，scope做用域的區別：

網上的許多例子都在玩做用域，將不一樣的模塊分開來，.directive有一個.js文件，.factory有一個.js文件，在用一個.js文件將全部依賴的文件都傳進來。

Angular.module(‘myApp’,[這裏放全部依賴的指令，服務等])

 

2，將指令的video再看一遍，在瞭解了基礎知識的狀況下，看video會不會有不一樣的體會，體驗學習方法，是直接看視頻有效，仍是先初步瞭解API，再看視頻有效。

 

3，下面總結今天所學的一些知識點，在從此學習到更系統的知識之後再回來糾正或者補充。

1，.directive變換標籤時，原來的屬性attr不會被換掉，會保留下來（replace:true）,是這樣的嘛？

 

2，目前學習到的做用域有3種：

$rootscope---根做用域

Controller中繼承的做用域

指令中的隔離做用域

（後面要理解三者的區別）

 

3，transclude:true時，template有子節點時爲true？？

4，compile（編譯）---標籤解析和變換

5，link（連接）---數據綁定，事件綁定等（綁定template上的元素）

6，requie---鏈接其餘controller

 

 

後續還要看例子，積累別人是怎麼寫代碼的

 

 

 

20150623

 

nodeJS：對於後端，仍是要按部就班，慢慢熟悉整個過程，先完成前端angular的學習，再學習Node.

 

 

angularJS:

UI-router提供路由

 

 

 

 

 

 

20150630

angularJS

指令（還要多看例子，學習代碼怎麼寫）

1，directive，scope做用域的區別，三種不一樣的做用域產生方式。

2，構思vote和供應商admin後臺實現方式。

3，ng-transclude---在控制器中控制DOM：

Template中有ng-transclude屬性，老的數據放在<span ng-transclude></span>中

4，指令中的controller是公共的，能夠被其餘指令require使用的。

5，link中的函數，方法只能這個指令中使用。

6，compile---有compile就不用link了，由於compile中返回的就是link,link指的是postlink，而compile中能夠有prelink和postlink。

 

 

路由（ng-view，模板，根據不一樣的url分不一樣的走向，不刷新整個頁面，刷新部分頁面，相似於ajax，也有綁定controller提供業務處理的函數和方法）

1，html和controller怎麼引入，一個頁面一個js，怎麼實現？或者有其餘更好的方法，controller在使用前，是否是不會是實例化？

 

 

20150701

Angular

學習問題：

1，在頁面加載的時候，如何給ng-repeat中小於100的數字的添加{color:red}的樣式。

 

20150705

 

畢業已經一年了，來杭州也快一年了，在這一年的時間裏學會了不少東西，收穫了不少。

今天翻看年初拿到的筆記本，上面寫着的以往的天天的計劃和完成的事情。看着本身從html標籤都不認識的，到如今會寫js腳本，會使用jquery,在學習angularJS，這一路上，多少的日日夜夜，很感謝本身，堅持了下來，也但願本身能學會放空本身，時時刻刻記住，剛剛接觸編程時的，興奮，謹記赤子之心，多多學習。

 

須要實現的目標：

1，讀一遍供應商前端代碼。

2，用angular將供應商代碼寫出來，思索，是否使用angular使代碼簡化。

3，前端html.css，從空白到頁面，要畫出來。（完成）

4，h5,c3要看視頻，學會。

5，完成好以後，angular仍然是重點，有精力要看看angular的源碼，瞭解angular有哪些坑。

6，後端，懂點皮毛吧，先學php，相信php框架會持續一段時間，yii，nodejs，mean，須要長時間的積累和學習才能聯通，稍安勿躁，欲速則不達。

安靜的作好本身的事情，緣生緣滅，雲起雲散，世事總無常。

 

 

angularJS

一個很重要的點須要注意的是，任何使用jQuery能作的事情，咱們都能用Angular指令來作到，而且使用更少的代碼。因此，在使用jQuery以前，請考慮一下咱們可否在不進行DOM操做的狀況下以更好的方式來完成任務。試着使用Angular來最小化jQuery的使用吧。
再來看一下咱們的筆記本應用，刪除筆記的功能被故意漏掉了。鼓勵讀者們本身實驗和實現這個功能。 你能夠從GitHub上下到這個Demo的源代碼。

 

記事本代碼學習：

 

 

20150716

CSS學習

 

學習CSS+DIV，首先要學習頁面佈局，接着才能從小的模塊入手，畫出空間的樣式。控件填充也是未解決的一個問題，還要在學習完變換之美CSS以後，再baidu，經過寫頁面加以熟悉。接着是要經過變換之美來注意一些畫樣式時候的，注意事項。瀏覽器兼容性也是一個最大的問題，css3的引用。以前畫的頁面就存在chrome中佈局是好的，ie中佈局就亂了，width是否要寫死，仍是要怎麼處理？

 

首先來關注佈局：佈局的方式有不少種，固定佈局，流體，表格，浮動，定位，如何選擇，視狀況而定。

 

佈局：position；relative:相對的

Absolute:絕對的

 

固定佈局：就是把width寫死，靈活性不大，很差討論。

流體：width:auto，目前還沒怎麼用到。

表格：用table來佈局，table>thead+tbody+tfooter，三行兩列的例子，colspan,rowspan,合併單元格的屬性在這種佈局中會常常使用到。

浮動：浮動佈局是我在目前爲止的實戰中，使用到最多的佈局方式。簡單，靈活。Clear:both，是這種佈局方式的一個重要技能，解決上下浮動亂掉的煩惱。

定位：使用position，能從外div>內div，兩個div中，定義position，達到精肯定位內div的效果來看出，怎麼使用。

 

改變元素大小：resize:both，overflow:auto;

這個樣式能使一個element的右下角出現能夠拖動的標誌，接着就能夠拖動這個標誌，改變element的大小了。

 

報紙效果：columns，使用這個樣式能夠達到報紙的效果，也適用於手機端閱讀文段。

 

A>img：a裏面嵌套一個img，避免圖片撐開a影響佈局，要對img設置溢出隱藏，overflow:hidden;讓a的display:block，讓整個圖片都能點，提升用戶體驗。

 

CSS實現截字效果：overflow:hidden;text-overflow:ellipsis;white-space:nowrap;

溢出隱藏，文字截取符號，不換行

 

Css3:拉動效果，overflow:auto

自適應：box-sizing:border-box

過渡效果和動畫效果，十分酷炫，實戰中加以使用。

 

 

 

 

20150719

 

本週完成由JPG轉化成靜態頁面的做業，過程當中發現，畫頁面的時候，width,leight，在頁面兼容性方面，還有不少問題，如不一樣頁面分辨率下怎麼控制佈局樣式不亂，不一樣的瀏覽器下怎麼控制樣式不亂，是否兼容ie6等低版本瀏覽器。

 

對於H5的酷炫頁面，還須要練習demo，css3還要練習，練習好一個demo之後，要不copy，本身寫出來。

 

‘百度前端技術培訓班’的git要跟着看，不過，能夠稍微放一放，先把PHPget起來。

 

PHP：先看視頻，看完再看是否能寫一個完整的webDemo出來先，也算對以前學的全部的東西，交一個成績單。