亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

1. 雙向數據綁定提升用戶體驗技巧

   a.首頁使用ng-bind命令

   b.后續頁面使用{{}}進行綁定

2. Zen Coding編碼技巧（SublineText，擴展webstorm/VS Code類似技能）

3. BootStrap中文網 （全局CSS樣式菜單）https://v3.bootcss.com/css/
   

$scope是有事件機制的，他是整個AngularJs的基礎

//$rootScope?根作用域

1.ng官方推薦的模塊切分方式

2.一切都是從模塊開始

3.ng依賴注入?

notice：ng本身部提供amd方式，可使用requireJS集成

使用方法：module定義中第二個參數（數組中）指定依賴的模塊

5.$scope解析

【chrome $scope調試工具：Inspect Angular Scope】

避坑：別將元素用$符號開始。

6.$scope的生命周期

1. ng-app：程序主入口（注意頁面級別/應用級別設計），此標簽嵌套的html標簽內所有指令都會被angular系統編譯、解析、渲染
   

2. angular的mvc是借助于$scope實現的(樹形結構)

3. angular常用命令 ng-app、ng-controller、ng-repeat（item in [data1,data2,data3...] | item in items）、ng-click

   ng-repeat截取代碼：

   a.頁面

   

b.引用js文件【$scope是樹結構的, note: $rootScope是根，js原型繼承，向上查找屬性機制】

4.angular事件機制：基于$scope

·1） $emit('eventName')--向上傳遞（針對的上下文：dom節點樹結構上下級/js類繼承機制，上級及同層級的都可以收到）

·2） $broadcast('eventName')--上下傳遞（同一層級及上下層級都會收到）

代碼截?。?/p>

a.頁面

b.js文件

Controller使用的正確姿勢：

MVC姿勢糾正

錯誤姿勢：

正確姿勢：

前端MVC的困難

前端開發工具匯總

?

?

?

0.?PowerCmd下載 可以不需要這個cmd命令即可 此工具無法設置node -v命令生效故而放棄

?

1.?nodejs 【多數前端工具以此為基礎，比如前端打包工具webpack】

npm命令

比如 npm install grunt

?

2. protractor 前端自動測試工具

?

3.Subline Text 源代碼編輯工具

快捷代碼生成鍵

快速生成10個div 此命令

Step1：輸入如下命令

?

?

?

Step2：再加 Ctrl+E

?

?

4.?webstorm 源代碼編輯工具

【JetBrain公司產品，也可考慮使用微軟的Visual Studio Code?】

【安裝包及破擊，本機安裝2018.02 案例中2017同樣適用于2018.02】

【破解案例地址 https://blog.csdn.net/pcent/article/details/79800355?

或者https://blog.csdn.net/vchen_hao/article/details/77248053?】

?

PS： Webstorm安裝插件 file-->settings -->Plugins-->AngularJS

?

?

?

5.斷點調試工具 chrome+插件Batarang

chrome://extensions/

?

6.源代碼版本管理工具 ?DS暫時不考慮此利器

a.?git 【命令工具】

b.?TortoiseGit 【圖形工具】

?

7.?Grunt ??【基于NodeJS前端源代碼編譯工具】 ?【類似webpack】

【非必須安裝，Angular已集成webpack】

慕課網課程： 1-5 開發、調試、測試工具（3）

npm install grunt 【不建議使用全局命令npm install -g grunt】

Api地址：

www.gruntjs.org/docs/sample-gruntfile.html?--國外網站訪問不了

https://www.gruntjs.net/installing-grunt?--訪問這個地址可打開

?

?

相關插件【點擊 Gruntfile范例菜單 搜索命令安裝相關插件 如下標志插件】

?

grunt-contrib-uglify 用于對代碼進行 混淆壓縮文件

grunt-contrib-qunit

grunt-contrib-contact 用于對代碼進行 合并文件

grunt-contrib-jshint

grunt-contrib-watch 用于對代碼進行 監控文件變化： 進行編譯輸出等操作

?

項目實例

編譯文件1) --> 3)

1).package.json 用于npm讀取依賴庫

?

2).Gruntfile.js用于grunt配置

?

?

3)?.grunt watch 命令 監聽文件并編譯

?

?

?

?

?

壓縮文件

4）.

?

?

?

8.Bower 【非必須安裝，Angular已集成webpack】【課程老師

不建議使用】

【Twitter公司出品，前端依賴打包工具：自動安裝依賴組件、組件之間的依賴檢測、版本兼容自動檢測】

?

?

?

?

9.npm install http-server 安裝 【非必須安裝】【服務寄宿運行】 【DS可選】

?

?

10.?Karma ?單元測試runner 【非必須安裝】

npm install -g karma

?

?

11.?Jasmine 單元測試工具 【非必須安裝】 【DS可選】

npm install -g jasmine

?

?

?

?

12.?Protractor ?【專門為Angular定制的測試工具】 【DS可選】

?

?

npm start

+

npm run protractor

?

?

$templateCache
app.run(function($templateCache){
????$templateCache.put("hello.html","<div>hello?everyone!!!!</div>>")
});
app.directive("hello",function($templateCache){
????return{
????????restrict:'A',
????????template:$templateCache.get("hello.html"),
????????replace:true
????}
});

E：<hello></hello>
A：<div?hello></div>
C：<div?class="hello"></div>
M：<!--?directive:hello?-->（這里注意要有兩個空格不可少）
???<div></div>

匹配模式一共有四個選項：AEMC

A：屬性 attribute(默認)

E：元素 element

M：注釋 comment

C：樣式 class

transclude---重要的配置項

也就是說把指令內部的嵌套內容放入到<div ng-transclude></div>中