首頁 > web前端 > js教程 > 主體

angularjs應用程式場景有哪些? angularjs的應用場景介紹

寻∝梦
發布: 2018-09-06 14:27:18
原創
2754 人瀏覽過

這篇文章主要的向大家講述了關於angularjs的應用場景的介紹,還有angularjs的應用介紹,內容不多,希望大家都能認真看完,下面就讓我們一起來看這篇文章吧

首先我們先說說angularjs的應用場景解釋:

AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成為AngularJS編譯器的輸入。 AngularJS將會遍歷DOM模板, 來產生對應的NG指令,所有的指令都負責針對view(即HTML中的ng-model)來設定資料綁定。因此, NG框架是在DOM載入完成之後, 才開始運作的。它試用在大型的瀏覽器端,大型網站專案。

現在說說angularjs的應用場景的介紹:

Angular 是一款流行的企業級框架,許多程式設計師都用它來建立和維護複雜的網頁應用程式。 Angular 擁有巨大的人氣,使用它的公司跟 Domino 的 Pizza 種類一樣多,如 Ryanair, iTunes Connect, PayPal Checkout, Google。 Angular 是一個由 Google 支援的開源框架。 Angular 稱自己為建立複雜網頁應用程式而對 HTML 的擴展。如果你也對 TypeScript 很熟悉,那麼可以看看 怎樣寫 Angular 2 .

Angular 採用 MVC 架構。它提供了 Model 層和 View 層之間雙重資料綁定。這種資料綁定方式的好處是不管哪一邊資料改變,都會自動的更新兩邊的資料。這有助於你建立可服用的 View 元件。它還提供了一個前後端服務易於互動的服務框架。最重要的是,它是簡單的 JavaScript。

什麼時候使用 AngularJS? 當你建立一個複雜的網頁前端應用並且需要一個單獨的模組框架去處理一切。

angularjs應用程式的介紹:

angular 應用程式:用具有angular 拓展語法的HTML 寫模板,用元件類別管理這些模板,用服務添加應用邏輯,在模組中打包發布組件與服務。透過引導 根模組啟動應用。 angular 在瀏覽器中接手、展現應用程式的內容,並根據我們提供的操作指令回應使用者的互動。

這幾個名詞很重要,貫穿angular應用開發。 (想知道更多與angularjs相關的介紹,就到PHP中文網AngularJS參考手冊欄位)

angular 應用的8個主要建構塊:

  • 模組modules

  • 元件components

  • 範本template

  • 元資料metadata

  • 資料綁定data binding

  • ##rective

  • 服務services

  • 依賴注入dependency injection

#angular的模組:

angular 應用程式是模組化的,有自己的模組系統,叫做angular 模組/NgModules。

到底模組是什麼?在angular裡模組化意味著什麼?

angular 應用程式至少有一個模組(根模組),稱為 AppModule。

大多數應用程式都有很多其它的 特性模組,它們由一組領域類別、工作流程、或緊密相關的功能聚合形成。

angular的所有模組都是一個帶有 @NgModule 裝飾器的類別。

angular的模組是類別! ! !

裝飾器是用來修飾JavaScript類別的函數。負責把元資料附加到類別上。

  • NgModule 是一個裝飾器函數,它接收一個用來描述模組屬性的元資料物件。屬性有:

  • declarations(聲明):本模組中擁有的視圖類別。 angular 有三種視圖類別:元件、指令、管道。

  • exports:declarations的子集,可用來用於其它模組中的元件模板。

  • imports:本模組元件範本中需要由其他範本匯出的類別。

  • providers:服務的創建者。本模組將它們加入全域的服務表中,讓他們在應用程式中的任何部分都可被存取。

  • bootstrap:標識出應用程式的主視圖(根元件)。只有根模組可設定此屬性。

下面是一個簡單的根模組:

// app.module.ts
import { NgModule }   from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// @NgModle 装饰器函数,接受一个对象,对象有几个属性
@NgModule({
 imports:   [ BrowserModule ],
 providers:  [ Logger ],
 declarations: [ AppComponent ],
 exports:   [ AppComponent ],
 bootstrap:  [ AppComponent ]
})
// AppComponent 的 export 语句导出,根模块不需要导出,其他组件不需导入根模块。
export class AppModule { }
登入後複製

引導根模組來啟動應用程式。在main.ts 檔案中引導AppModule:

// app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 从app.module 文件导入了 AppModule
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
登入後複製

此時,專案只有app/app.module.ts 檔案和app/main.ts ,前者定義了應用的根模組,後者引用它來啟動應用。

好了,以上就是這篇關於angularjs的應用場景和應用給介紹的文章了(想學更多angularjs的相關知識,推薦到PHP中文網AngularJS學習手冊欄目學習),有問題的可以在下方留言提問。

【小編推薦】

angularjs和Vue有哪些不同? angularjs與Vue的比較詳情

angularjs的優點有哪些?這裡有你必須了解的angularjs七大優點

以上是angularjs應用程式場景有哪些? angularjs的應用場景介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板