关于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 在类路径上可用。将此脚本推送到没有该依赖项的环境将导致生成失败。现在让我们开始构建我们的 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小时内与您取得联系。

整合营销服务商