關于AngularJs基礎教程筆記

：了解AngularJS

AngularJS是一款非常優秀的前端高級 JS 框架，由 Misko Hevery 等人創建 2009 年被 Google 收購，用于其多款產品有一個全職的開發團隊繼續開發和維護這個庫有了這一類框架就可以輕松構建 SPA 應用程序 single page web application 通過指令擴展了 HTML，通過表達式綁定數據到 HTML。

二：AngularJS的優勢

更少的代碼，實現更強勁的功能

.帶領前端進入MVC時代
　　 mvc模式：Model（模型）是應用程序的核心，指的是程序在數據庫中存儲數據。
　　　　　 View（視圖）是應用的界面，將數據庫里的數據展現出來，展現給程序的使用者。
　　　　　　 Controller（控制器）處理用戶的交互行為，程序使用者更改數據，由控制器接受并發送給模型。

三：AngularJS的特性

MVC
.模塊化
自動化雙向數據綁定使用{{ }}對動態數據綁定，綁定到元素的innerHTML
指令系統 ng-
表單驗證
HTML組件化
.Angular 在構建增加、查詢、修改、刪除的頁面應用時能發揮最大優勢。

四：AngularJS語法特點

Angular 最大程度的減少了頁面上的 DOM 操作；
　　讓 JavaScript 中專注業務邏輯的代碼；
　　通過簡單的指令結合頁面結構與邏輯數據；
　　通過自定義指令實現組件化編程；
　　代碼結構更合理；
　　維護成本更低；
　　Angular 解放了傳統 JavaScript 中頻繁的 DOM 操作

五：AngularJS的用法

1.編寫第一個Angular應用

當網頁加載完畢，AngularJS 自動開始執行； HTML 頁面中 ng-xxx 的屬性稱之為指令（Directive）； ng-app 指令告訴 AngularJS，<html> 元素是 AngularJS 應用程序管理的邊界； {{ }} 雙花括號里面的叫做數據綁定表達式，可以是任何有效的JavaScript值、變量或語句。而在頁面上顯示的是表達式計算后的結果值。 | 管道符號可以給表達式添加過濾器，如 | number:2， |currency

<body>

</body>

</html>

2.Module.controller() 控制器

第二行代碼創建了一個名為userCtrl的控制器，以及一個控制器函數控制器函數接受一個名為$scope的參數

var app=angular.module(“myApp”, []); //myApp模塊名 app是模塊實例

app.controller(“userCtrl” ,function($scope){ //userCtrl是控制器的名字

$scope.name=“李雷和韓梅梅”; //$scope用來保存數據，定義方法

});

由于篇幅會很長，又考慮到條友們可能會沒有耐心看很長的篇章，所以本期就寫到這里，感興趣的同學可以關注小編，小編會繼續發送文章的！

為了感謝觀看，小編準備了禮物給大家，關注小編后私信回復“資料”即可領取哦！

面的指令可用于綁定應用程序數據到HTML DOM元素的屬性。

S.No.	名稱	描述
1	ng-disabled	禁用給定的控制
2	ng-show	顯示了一個給定的控制
3	ng-hide	隱藏一個給定的控制
4	ng-click	表示一個AngularJS click事件

　　ng-disabled 指令

　　添加ng-disabled屬性到一個HTML按鈕，并把它傳遞模型。綁定模型到復選框，來看看變化。

<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>12復制代碼類型：[html]

　　ng-show 指令

　　添加 ng-show 屬性到HTML按鈕，并把它傳遞到模型。該模型綁定復選框。

<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>

1234復制代碼類型：[html]

　　ng-hide 指令

　　添加 ng-hide 屬性到HTML按鈕，并把它傳遞模型。該模型綁定復選框。

<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>

1234復制代碼類型：[html]

　　ng-click 指令

　　添加ng-click屬性到一個HTML按鈕，更新模型。綁定模型到HTML如下所示。

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter=clickCounter + 1">Click Me!</button>

開課吧廣場-人才學習交流平臺

. 概述

在本文中，我們將向堆棧添加一個前端應用程序。到目前為止，我們一直在后端工作，以構建我們的云應用程序。但是，如果沒有 UI，Web 應用程序有什么用呢？在本文中，我們將通過將單頁應用程序集成到我們的項目中來解決這個問題。

我們將使用Angular和Bootstrap編寫此應用程序。Angular 4 代碼的風格感覺很像編寫 Spring 應用程序，這對于 Spring 開發人員來說是一個自然的交叉！雖然前端代碼將使用 Angular，但本文的內容可以輕松地擴展到任何前端框架，只需最少的努力。

在本文中，我們將構建一個 Angular 4 應用程序并將其連接到我們的云服務。我們將演示如何在 SPA 和 Spring 安全性之間集成登錄。我們還將展示如何使用 Angular 對 HTTP 通信的支持來訪問應用程序的數據。

2. 網關更改

前端到位后，我們將切換到基于表單的登錄，并為特權用戶保護 UI 的某些部分。這需要對網關安全配置進行更改。

2.1. 更新httpSecurity

首先，讓我們更新網關 SecurityConfig.java 類中的 configure(HttpSecurity http) 方法：

@Bean
public SecurityWebFilterChain filterChain(ServerHttpSecurity http) {
    http.formLogin()
        .authenticationSuccessHandler(new RedirectServerAuthenticationSuccessHandler("/home/index.html"))
        .and().authorizeExchange()
        .pathMatchers("/book-service/**", "/rating-service/**", "/login*", "/").permitAll()
        .pathMatchers("/eureka/**").hasRole("ADMIN")
        .anyExchange().authenticated()
        .and().logout().and().csrf().disable()
        .httpBasic(withDefaults());
    return http.build();
}

首先，我們添加一個默認的成功 URL 來指向 /home/index.html 因為這將是我們的 Angular 應用所在的位置。接下來，我們將匹配器配置為允許除 Eureka 資源之外的任何請求通過網關。這會將所有安全檢查委托給后端服務。

接下來，我們刪除了注銷成功 URL，因為默認重定向回登錄頁面將正常工作。

2.2. 添加Principal Endpoint

接下來，讓我們添加一個終結點來返回經過身份驗證的用戶。這將在我們的 Angular 應用程序中用于登錄并識別我們的用戶具有的角色。這將幫助我們控制他們可以在我們的網站上執行的操作。在網關項目中，添加一個身份驗證控制器類：

@RestController
public class AuthenticationController {
 
    @GetMapping("/me")
    public Principal getMyUser(Principal principal) {
        return principal;
    }
}

控制器將當前登錄的用戶對象返回給調用方。這為我們提供了控制 Angular 應用程序所需的所有信息。

2.3. 添加登陸頁面

讓我們添加一個非常簡單的登錄頁面，以便用戶在轉到應用程序的根目錄時看到一些內容。在 src/main/resources/static 中，讓我們添加一個 index.html 文件，其中包含指向登錄頁面的鏈接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Book Rater Landing</title>
</head>
<body>
    <h1>Book Rater</h1>
    <p>So many great things about the books</p>
    <a href="/login">Login</a>
</body>
</html>

3. Angular CLI 和入門項目

在開始一個新的 Angular 項目之前，請確保安裝最新版本的 Node.js 和 npm。

3.1. 安裝 Angular CLI

首先，我們需要使用 npm 下載并安裝 Angular 命令行界面。打開終端并運行：

npm install -g @angular/cli

這將在全球范圍內下載并安裝 CLI。

3.2. 安裝一個新項目

當仍在終端中時，導航到網關項目并進入網關/src/main 文件夾。創建一個名為“angular”的目錄并導航到它。從這里運行：

ng new ui

CLI 正在建立一個全新的項目并使用 npm 下載所有 JavaScript 依賴項。此過程需要花費很多分鐘的情況并不少見。

ng 命令是 Angular CLI 的快捷方式，新參數指示 CLI 創建新項目，ui 命令為我們的項目命名。

3.3. 運行項目

新命令完成后。導航到已創建并運行的 ui 文件夾：

ng serve

項目生成后，導航到 http://localhost:4200。我們應該在瀏覽器中看到這一點：

3.4. 安裝引導程序

讓我們使用 npm 來安裝引導程序。從 ui 目錄運行以下命令：

npm install bootstrap@4.0.0-alpha.6 --save

這會將引導程序下載到node_modules文件夾中。在 ui 目錄中，打開 .angular-cli.json 文件。這是配置有關項目的某些屬性的文件。找到 apps > styles 屬性并添加我們的 Bootstrap CSS 類的文件位置：

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],

這將指示 Angular 將 Bootstrap 包含在與項目一起構建的已編譯 CSS 文件中。

3.5. 設置構建輸出目錄

接下來，我們需要告訴 Angular 將構建文件放在哪里，以便我們的 Spring 啟動應用程序可以為它們提供服務。Spring Boot 可以從資源文件夾中的兩個位置提供文件：

src/main/resources/static
src/main/resource/public

由于我們已經使用靜態文件夾為 Eureka 提供一些資源，并且 Angular 在每次運行構建時都會刪除此文件夾，因此讓我們將 Angular 應用程序構建到public文件夾中。

再次打開 .angular-cli.json 文件，找到 apps > outDir屬性。更新該字符串：

"outDir": "../../resources/static/home",

如果 Angular 項目位于 src/main/angular/ui 中，那么它將構建到 src/main/resources/public 文件夾中。如果應用位于另一個文件夾中，則需要修改此字符串才能正確設置位置。

3.6. 使用 Maven 自動構建

最后，我們將設置一個自動化構建，以便在編譯代碼時運行。每當運行“mvn compile”時，此 ant 任務將運行 Angular CLI 構建任務。將此步驟添加到網關的 POM.xml 中以確保每次編譯時都能獲得最新的 UI 更改：

<plugin>
    <artifactId>maven-antrun-plugin</artifactId>
    <executions>
        <execution>
            <phase>generate-resources</phase>
            <configuration>
                <tasks>
                    <exec executable="cmd" osfamily="windows"
                      dir="${project.basedir}/src/main/angular/ui">
                        <arg value="/c"/>
                        <arg value="ng"/>
                        <arg value="build"/>
                    </exec>
                    <exec executable="/bin/sh" osfamily="mac"
                      dir="${project.basedir}/src/main/angular/ui">
                        <arg value="-c"/>
                        <arg value="ng build"/>
                    </exec>
                </tasks>
            </configuration>
            <goals>
                <goal>run</goal>
            </goals>
        </execution>
    </executions>
</plugin>

我們應該注意，這種設置確實要求 Angular CLI 在類路徑上可用。將此腳本推送到沒有該依賴項的環境將導致生成失敗?，F在讓我們開始構建我們的 Angular 應用程序！

4. Angular

我們將在頁面中構建身份驗證機制。我們使用基本身份驗證并遵循簡單的流程來使其工作。用戶有一個登錄表單，他們可以在其中輸入用戶名和密碼。

接下來，我們使用其憑據創建 base64 身份驗證令牌并請求“/me”終結點。終端節點返回包含此用戶角色的 Principal 對象。

最后，我們將在客戶端上存儲憑據和主體，以便在后續請求中使用。

4.1. 模板

在網關項目中，導航到 src/main/angular/ui/src/app 并打開 app.component.html 文件。這是 Angular 加載的第一個模板，也是我們的用戶登錄后登陸的地方。

在這里，我們將添加一些代碼來顯示帶有登錄表單的導航欄：

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
    <button class="navbar-toggler navbar-toggler-right" type="button" 
      data-toggle="collapse" data-target="#navbarCollapse" 
      aria-controls="navbarCollapse" aria-expanded="false" 
      aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Book Rater 
        <span *ngIf="principal.isAdmin()">Admin</span></a>
    <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
    </ul>
    <button *ngIf="principal.authenticated" type="button" 
      class="btn btn-link" (click)="onLogout()">Logout</button>
    </div>
</nav>

<div class="jumbotron">
    <div class="container">
        <h1>Book Rater App</h1>
        <p *ngIf="!principal.authenticated" class="lead">
        Anyone can view the books.
        </p>
        <p *ngIf="principal.authenticated && !principal.isAdmin()" class="lead">
        Users can view and create ratings</p>
        <p *ngIf="principal.isAdmin()"  class="lead">Admins can do anything!</p>
    </div>
</div>

此代碼使用引導類設置導航欄。嵌入在欄中的是內聯登錄表單。Angular 使用此標記與 JavaScript 動態交互，以呈現頁面的各個部分并控制表單提交等內容。

像(ngSubmit)=“onLogin(f)” 這樣的語句只是指示在提交表單時調用方法 “onLogin(f)” 并將表單傳遞給該函數。在巨型 div 中，我們有段落標簽，這些標簽將根據我們主要對象的狀態動態顯示。接下來，讓我們編寫將支持此模板的 Typescript 文件。

4.2. Typescript

從同一目錄中打開 app.component.ts 文件。在此文件中，我們將添加使模板功能所需的所有typescript屬性和方法：

import {Component} from "@angular/core";
import {Principal} from "./principal";
import {Response} from "@angular/http";
import {Book} from "./book";
import {HttpService} from "./http.service";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    selectedBook: Book=null;
    principal: Principal=new Principal(false, []);
    loginFailed: boolean=false;

    constructor(private httpService: HttpService){}

    ngOnInit(): void {
        this.httpService.me()
          .subscribe((response: Response)=> {
              let principalJson=response.json();
              this.principal=new Principal(principalJson.authenticated,
              principalJson.authorities);
          }, (error)=> {
              console.log(error);
        });
    }

    onLogout() {
        this.httpService.logout()
          .subscribe((response: Response)=> {
              if (response.status===200) {
                  this.loginFailed=false;
                  this.principal=new Principal(false, []);
                  window.location.replace(response.url);
              }
           }, (error)=> {
               console.log(error);
       });
    }
}

此類與 Angular 生命周期方法 ngOnInit() 掛鉤。在此方法中，我們調用 /me 終結點來獲取用戶的當前角色和狀態。這決定了用戶在主頁上看到的內容。每當創建此組件時，都會觸發此方法，這是檢查用戶屬性以獲取我們應用程序中的權限的好時機。

我們還有一個 onLogout() 方法，可以將我們的用戶注銷并將此頁面的狀態恢復到其原始設置。

不過，在構造函數中聲明的 httpService 屬性。Angular 在運行時將此屬性注入到我們的類中。Angular 管理服務類的單例實例，并使用構造函數注入注入它們，就像 Spring 一樣！

接下來，我們需要定義 HttpService 類。

4.3. HttpService

在同一目錄中創建一個名為“http.service.ts”的文件。在此文件中，添加以下代碼以支持登錄和注銷方法：

import {Injectable} from "@angular/core";
import {Observable} from "rxjs";
import {Response, Http, Headers, RequestOptions} from "@angular/http";
import {Book} from "./book";
import {Rating} from "./rating";

@Injectable()
export class HttpService {

    constructor(private http: Http) { }

    me(): Observable<Response> {
        return this.http.get("/me", this.makeOptions())
    }

    logout(): Observable<Response> {
        return this.http.post("/logout", '', this.makeOptions())
    }

    private makeOptions(): RequestOptions {
        let headers=new Headers({'Content-Type': 'application/json'});
        return new RequestOptions({headers: headers});
    }
}

在此類中，我們使用 Angular 的 DI 構造注入另一個依賴項。這次是 Http 類。此類處理所有HTTP通信，并由框架提供給我們。

這些方法各自使用 angular 的 HTTP 庫執行 HTTP 請求。每個請求還在標頭中指定內容類型。

現在我們需要再做一件事來讓 HttpService 在依賴注入系統中注冊。打開 app.module.ts 文件并找到提供程序屬性。將 HttpService 添加到該數組。結果應如下所示：

providers: [HttpService],

4.4. 添加Principal

接下來，讓我們在 Typescript 代碼中添加我們的 Principal DTO 對象。在同一目錄中添加一個名為“principal.ts”的文件并添加以下代碼：

export class Principal {
    public authenticated: boolean;
    public authorities: Authority[]=[];
    public credentials: any;

    constructor(authenticated: boolean, authorities: any[], credentials: any) {
        this.authenticated=authenticated;
        authorities.map(
          auth=> this.authorities.push(new Authority(auth.authority)))
        this.credentials=credentials;
  }

    isAdmin() {
        return this.authorities.some(
          (auth: Authority)=> auth.authority.indexOf('ADMIN') > -1)
    }
}

export class Authority {
    public authority: String;

    constructor(authority: String) {
        this.authority=authority;
    }
}

我們添加了主體類和頒發機構類。這是兩個DTO類，很像Spring應用程序中的POJO。因此，我們不需要以角度形式向 DI 系統注冊這些類。

接下來，讓我們配置一個重定向規則，將未知請求重定向到應用程序的根目錄。

4.5. 404 處理

讓我們導航回網關服務的 Java 代碼。在 GatewayApplication 類所在的位置添加一個名為 ErrorPageConfig 的新類：

@Component
public class ErrorPageConfig implements ErrorPageRegistrar {
 
    @Override
    public void registerErrorPages(ErrorPageRegistry registry) {
        registry.addErrorPages(new ErrorPage(HttpStatus.NOT_FOUND,
          "/home/index.html"));
    }

}

此類將標識任何 404 響應并將用戶重定向到“/home/index.html”。在單頁應用中，這就是我們處理所有流量的方式，而不是流向專用資源，因為客戶端應該處理所有可導航的路由。

4.6. 構建和查看

現在從網關文件夾運行“mvn compile”。這將編譯我們的 java 源代碼并將 Angular 應用程序構建到公共文件夾。讓我們開始其他云應用程序：config，discovery和zipkin。然后運行網關項目。服務啟動后，導航到 http://localhost:8080 以查看我們的應用。我們應該看到這樣的東西：

接下來，讓我們點擊登錄頁面的鏈接：

使用用戶/密碼憑據登錄。單擊“登錄”，我們應該被重定向到加載單頁應用程序的 /home/index.html。

看起來我們的巨型屏幕表明我們以用戶身份登錄！現在，通過單擊右上角的鏈接注銷，然后這次使用管理員/管理員憑據登錄。

5. 結論

在本文中，我們已經看到了將單頁應用程序集成到我們的云系統中是多么容易。我們采用了一個現代框架，并將有效的安全配置集成到我們的應用程序中。

在線咨詢

上一篇：學習用 Python 編程時要避免的 3 個錯誤
下一篇：STM32 學習8 USART串口通訊與printf

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商