Angular簡介和入門

ITzhongzi發表於2017-03-31
Angular
  1. 流行框架第一天：Angular簡介和入門1.1. 前端流行技術的歷史
    • 之前時代，是桌面應用的天下，客戶端伺服器的天下，本沒有前端這樣的職位，網站設計師
    • 石器時代，網際網路開始發展網站設計師（靜態）-不過是html、css、js、flash，頁面設計師
    • 青銅時代，yui、prototype、extjs、dojo等等框架的時代，美工、頁面設計師 前端工程師
    • 黑鐵時代，jquery和jquery的一堆衍生品jqueryui、easyui、ligerui等 ui設計 前端工程師
    • 白銀時代，angularjs、react
    • 黃金時代，現在前端技術和後端平起平坐的時代 跨平臺開發

1.2. 前端緣何一地雞毛？
* 一地雞毛，書名，劉震雲的中篇小說，意思是說瑣事特別多，並非貶義詞。
* 說前端一地雞毛，既是機遇又是挑戰
* 這幾年前端技術迅速發展，特別是在nodejs的基礎之上發展，
* 分工協作前後端分離，給前端帶來的機會

1.3. 什麼是庫（包），什麼是框架？
* jQuery ：庫

* 
    * 封裝了一些常用的方法，我們主動的呼叫這些方法 -- 提高了程式碼的利用，以及程式碼後期的維護

* Angular: 前端框架 react vue

* 
    * 框架提供了一些結構或者模式，
    * 我們是根據框架提供的結構或者模式去書寫程式碼
    * 由框架幫助我們去執行相應的操作。

1.4. 什麼是 Angular
* 一款非常優秀的前端高階 JS 框架
* 最早由 Misko Hevery 等人建立
* 2009 年被 Google 公式收購，用於其多款產品
* 目前有一個全職的開發團隊繼續開發和維護這個庫
* 有了這一類框架就可以輕鬆構建 SPA 應用程式
* 單頁面應用程式 模擬cs結構 客戶端伺服器 作出的bs的結構的網站，但是帶有客戶端的功能性、頁面區域性重新整理特點

* 其核心就是通過指令擴充套件了 HTML，通過表示式繫結資料到 HTML。

* Angular不推崇DOM操作，也就是說在NG中幾乎找不到任何的DOM操作

寫一個輸入框一個按鈕

1.4.1. 案例1

案例2

1.4.2. 安裝 Angular
* 暴力安裝: 直接從本地硬碟中複製一個angular.js檔案到專案中

* 通過工具安裝

* 
    * npm 方式 npm install angular npm i angular 當前目錄下的node_modules

    * bower 方式 'bower install angular'


* bower 安裝 'npm install -g bower'

1.5. CDN - 擴充套件內容百度靜態資源公共庫 http://cdn.code.baidu.com/ content delivery network 內容分發網路
注意，每一種安裝方式，本質都是為了拿到angular.js檔案
1.5.1. 指令內建指令 angular自帶的 ng- 已ng-開頭的標籤裡面的屬性的擴充套件形式稱之為指令 ng-app 告訴angular從這裡開管理程式碼了 ng-controller 定義控制器範圍 ng-model 繫結input輸入框的值 ng-click 新增點選事件 ng-init 初始化一個物件的值
1.5.2. Angular 表示式{{}}表示一個表示式，像模板引擎
hello:{{user.name}}
{{“hello:”+user.name}}
{{1+1}}
{{[1,2,3,4]}}
//注意不能寫json或物件
1.6. Angular 基礎概念1.6.1. Angular 的核心特性
* 指令

* MVC

* 模組化 angular.module()

* 雙向資料繫結

1.6.2. 模組(module)
* angular.module(‘myApp’,[])
第一個引數是模組的名字 第二個引數是一個陣列，陣列的元素是該模組所依賴其他模組的名字 注意,即使不依賴任何模組，也需要給第二個引數傳遞一個空陣列 否則angular.module(‘myApp’)就是去獲取名為myApp的模組物件

1.6.3. 控制器(controller)
* angular.module(‘myApp’,[]).controller(‘demoController’,function(scope){})  
第一個引數，是控制器的名字 第二個引數，是一個回撥函式，在回撥函式裡寫我們想要的js程式碼。 ###依賴注入 我需要什麼，我就在引數上面去定義，要是呼叫我的方法就給我傳 //angular var controller =function(callback){ setTimeout(function(){ //寫了一堆邏輯  
callback(

},2000) } //我們按照angular邏輯去寫的程式碼 controller(function(scope){

scope){
scope }) 依賴注入的引數是不能修改的
1.6.4. 雙向資料繫結
* 資料模型的值發生改變，就會導致頁面值的改變. 頁面值的改變，就會導致資料模型值的改變，這各種相互影響的關係就是雙向資料繫結。
* ng-model

1.6.5. 單向資料繫結
* 使用表示式顯示資料模型的值。

1.6.6. MVC 思想1.6.6.1. 什麼是 MVC 思想
* M:Model 模型 :資料儲存，一些業務邏輯
* V:View 檢視 ：就是用來展示資料
* C:Controller 控制器: 排程業務邏輯

1.6.7. mvvm
* M:Model 模型 :資料儲存，一些業務邏輯
* V:View 檢視 ：就是用來展示資料
* vm:ViewModel $scope

1.6.8. watch∗用於監視數據模型的變化（並且只能監視數據模型的變化）∗

watch * 用於監視資料模型的變化（並且只能監視資料模型的變化） *
scope.watch(‘數據模型名的字符串形式′,function(變化後的值,變化前的值))∗
watch(‘資料模型名的字串形式’,function(變化後的值,變化前的值){}) *
scope.$watch裡的回撥函式會預設執行一次。
* 速度快
* 減輕了伺服器自身在頻寬壓力。

1.6.9. 相關連結
* AngularJS 1.x 官方網站
*
* https://angularjs.org/

* AngularJS 2.x 官方網站
* 
    * https://angular.io/

* Google Material Design for Angular
* 
    * https://material.angularjs.org

* Angular UI（Angular最大的第三方社群）
* 
    * http://angular-ui.github.io/

* AngularJS中文社群
* 
    * http://www.angularjs.cn/

* AngularJS中文社群提供的文件（不用翻牆）
* 
    * http://docs.angularjs.cn/api
    * http://www.apjs.net/

相關文章