天天看點

Angular2入門--架構概覽

Angular 介紹

  Angular 是一款來自谷歌的開源的web前端架構,誕生于2009年,是一款優秀的前端JS架構,已經被用于谷歌的多款産品。

  Angular 基于Typescript開發 ,更适合中大型企業級的項目。

學習Angular的必備基礎

  html、css、js、es6、Typescript.

載入需要的庫

  推薦使用npm來作為包的管理工具

元件

  component定義對象是一個angular元件,接收一個包含兩個屬性的配置對象

  selector:為HTML元素定義了一個CSS選擇器my-app

  template: 屬性容納着元件的模闆

  @Component{

    selector:‘my-app’,

    templateUrl: \'\'

  }

子產品

  angular應用都是子產品化的

Class定義對象

  在Class方法中,我們可以給元件添加屬性和方法

  定義一個Class類

  定義一個構造函數

  .Class({

    constructor: function(){}

  })

添加NgModule

  angular應用是由angular子產品組成

  app.AppModule = ng.core.NgModule({

    imports: [ ng.platformBrowser.BrowserModule ],

    declarations: [ app.AppComponent ],

    bootstrap: [  app.AppComponent ]

  })

啟動應用

  添加app/main.js檔案

  我們需要兩樣東西來啟動應用:

    1.angular的platformBrowserDynamic().bootstrapModule 函數

    2.應用根子產品Appmodule

  執行過程為:當angular在main.js中調用bootstrapModule函數時,它讀取AppModule的中繼資料,在啟動元件中找到AppComponent并找到my-app選擇器,定位到元素,然後在這個标簽之間載入内容。

Angular2 Typescript

  Typescript是一種由微軟開發的自由開源的程式設計語言,它是JavaScript的一個超集,擴充了JavaScript的文法。

資料綁定

  有兩種類型的資料綁定:

    1. 事件綁定 讓你的應用可以通過更新應用的資料來響應目标環境下的使用者輸入。

    2. 屬性綁定 讓你将從應用資料中計算出來的值插入到HTML中。

  Angular 支援雙向資料綁定,這意味着DOM中發生的變化同樣可以反映回你的程式資料中。

依賴注入

  依賴注入器會為元件提供一些服務,比如路由器服務就能讓你定義如何在視圖之間導航。