AngularJs60分鐘入門基礎教程_AngularJS

來源：懂視網責編：小采時間：2020-11-27 20:52:59

AngularJs60分鐘入門基礎教程_AngularJS

AngularJs60分鐘入門基礎教程_AngularJS:AngularJs是一個不錯的用于開發SPA應用（單頁Web應用）的框架。單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，由JavaScript來

推薦度：

點擊下載本文 文檔為doc格式

導讀AngularJs60分鐘入門基礎教程_AngularJS:AngularJs是一個不錯的用于開發SPA應用（單頁Web應用）的框架。單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，由JavaScript來

AngularJs是一個不錯的用于開發SPA應用（單頁Web應用）的框架。單頁Web應用（single page web application，SPA），就是只有一張Web頁面的應用。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，由JavaScript來控制不同view在這個頁面上的呈現。本文源于Youtube上一個不錯的AngularJs的入門教程視頻：AngularJS Fundamentals In 60-ish Minutes，主要講解了AngularJs中Directive,Data Binding,Filter和Module的概念和用法。個人認為這四個概念是AngularJs的核心，支撐起了AngularJs的骨架。掌握了他們對全局上把握AngularJs很有幫助。進階則需要大量實踐和官網API文檔的閱讀。

看看下圖大致就可以了解AngularJs有何能耐。

首先從官網下載angular.min.js和angular-route.min.js。可以從官網下載（https://angularjs.org/或https://code.angularjs.org/）

在VS中創建一個空的Empty Web項目。

Directive 和 Data Binding

AngularJs 中的Directive概念不是很容易理解，入門階段可暫且將其理解為用來擴展HTML的一種tag. Angularjs會解析這些tag，以實現Angularjs的Magic.
下面代碼使用了兩個Directive：ng-app 和 ng-model.

ng-app: 用于auto-bootstrap 一個AngularJs應用。這是必須的一個Directive，一般加在HTML的根對象上（如下代碼所示）。更詳細解釋，移步官網：https://docs.angularjs.org/api/ng/directive/ngApp

ngModel：用于在property和HTML控件（input,select, textarea）之間建立雙向的Data Binding，也就是說HTML控件的值改變會反應到property上，反過來也同樣成立。property就是通過{{}}創建的一個對象。

下面代碼展示了將文本控件和name之間建立了Data Binding.

Module

Module就是一個容器，用于管理一個AngularJS應用的各個部分，是AngularJS中很重要的概念。一個AngularJS應用就是一個Module，其作用和C#應用程序中Assembly作用類似。C#中我們通過main函數來bootstrap應用程序。而AngularJS則通過na-app="moduleName"的方式來bootstrap一個AngularJS應用。moduleName就是Module對象的name.

下圖是一個Module有哪些常見部分組成。

Config/Route:用于配置AngularJS應用的路由（AngularJS），作用類似于ASP.NET MVC應用中的Config/Route。
Filter:對數據起過濾作用，上文有解釋。

Directive: 擴展HTML,AngularJS中最重要的概念。沒有Directive就沒有AngularJS。

Controller: 作用類似于ASP.NET MVC應用中的Controller。頁面邏輯就在Controller中實現，通過controller可以對model進行操作。 AngularJS則通過內建的Data-Binding機制將model綁定到view(HTML控件)

Factory/Service/Provider/Value: 提供對數據源的訪問。比如Restful API就是常見的數據源。 Controller通過Factory/Service/Provider/Value訪問數據源完成數據的CRUD操作。

下面這段代碼實現了上面實例的相同的功能，差異就在于這個實例通過創建一個module（angularJS應用），并在module下添加contorller來實現上面的功能。在SimpleController（Controller）中，我們創建了customers（Model）并進行數據初始化， View(Html控件）則直接綁定到customers（Model）。Scope是一個AngualrJS中所有viewModule的容器對象。Controller需要通過Scope是一個AngualrJS中所有viewModule的容器對象。Controller需要通過Scope來訪問viewModule。