Angular 2.x折腾记 :(2)初步认识angular2,不一样的开发模式

简介: 想来想去,概念这些东西不怎么想讲,更多的是想讲点实战性的内容。所以有些东西跳过去了,小伙伴们请去看官方文档哈;跳跃性的前进,写的不好多包涵。


前言


想来想去,概念这些东西不怎么想讲,更多的是想讲点实战性的内容。


所以有些东西跳过去了,小伙伴们请去看官方文档哈;跳跃性的前进,写的不好多包涵。


基础概念


官方中文社区一把梭: 你想要的都概念基本可以在这里找到。


angular-cli 启动


src是开发目录,生产打包后会产生一个dist目录; 初步说下你从启动到浏览器看到app works!依赖了哪些文件,有哪些作用


  • index.html


<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>NgTestdemo</title>
  <!--规定所有url的默认目标由谁开始-->
  <base href="/"> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
 <!--根组件-->
  <app-root>Loading...</app-root>
</body>
</html>


  • main.ts


//  引入生产模式,控制关闭开发模式的,函数来的
import { enableProdMode } from '@angular/core';
// app启动引导模块,必须引入
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 根模块
import { AppModule } from './app/app.module';
// 环境配置文件,可以写入接口路径什么的。。dev,prod各一份
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
// 引导程序启动
platformBrowserDynamic().bootstrapModule(AppModule);


  • polyfill.ts : 要兼容到ie10,安装里面对应的腻子(polyfill),文件内有详细的注释
  • typings.d.ts : 全局变量声明的文件
  • testconfig.*.json: 不同模式下调用的tsconfig配置文件
  • app目录下(分的很彻底,写起来跟常规基本一样)
  • app.component.css : 根样式文件,配置了scss就是.scss
  • app.component.html : 根html


<!--Mustache包括的是双向数据绑定-->
<h1>
  {{title}}
</h1>
复制代码
  • app.component.spec.ts: 测试用例,够繁琐,以后再说


  • app.components.ts:组件逻辑处理


// 导入装饰器:装饰器可以理解为一些函数的封装,使其书写起来非常简洁明了
  import { Component } from '@angular/core';
  @Component({
    selector: 'app-root',  // 自定义元素
    templateUrl: './app.component.html', // 组件关联的html页面
    styleUrls: ['./app.component.css'] // 组件自身的样式
  })
  // 导出对应的组件
  export class AppComponent {
    title = 'app works!';  // 声明一个public的变量并且赋值
  }
  ```


  • app.module.ts:模块


// 浏览器的NG模块
    import { BrowserModule } from '@angular/platform-browser';
    // 这也是一个装饰器,用来定义模块和组件相关的,比如服务,组件元素,指令,导入导出模块的识别
    // 每个模块的定义必须有这个才能生效,ng2的开发模式就是类似一个树,从根节点无限发散
    import { NgModule } from '@angular/core';
    // 表单模块,比如你要在组件内用到一些表单元素或者数据绑定,不然会报错
    import { FormsModule } from '@angular/forms';
    // rest风格的请求模块
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './app.component';
    @NgModule({
      declarations: [ // 指令和组件的放在这里
        AppComponent
      ],
      imports: [ // 比如你要引用那些模块的功能就要引入
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      providers: [], // 服务
      bootstrap: [AppComponent] // 启动的模块,一个app一般只有一个启动模块!!一般!!
    })
    export class AppModule { }
    ```


常见模板指令用法解释


  1. {{item | SliceStr:1:2:'...' }}: 可以响应组件内对应的item字段值变化, |是管道,支持多个管道,支持内置管道和自定义管道,:跟随是管道的参数,后续文档我写一个如何自定义管道的文章
  2. []="":绑定组件内的值[单向,数据流向视图],指令,原生html控件的自身属性[value,src,class,style]等,双引号内支持条件表达式[不完全等同于js条件表达式]或者方法亦或者变量,
  3. (click)="": 事件绑定[视图触发改变数据源],同上,支持表达式和方,特殊之处后面解释。
  4. [(target)]: 双向数据绑定,视图和数据源同步改动,一般用于表单比较多。


绑定赋值的条件表达式的特殊之处


  • 不支持:
  • 赋值 (=, +=, -=, ...)
  • new运算符
  • 使用;.的链式表达式
  • 自增或自减操作符 (++--)
  • 不支持位运算|&
  • 支持:
  • 逻辑运算(|| , &&)
  • 三目运算符( true ? true : false )
  • 直接赋值运算(item = 2);
  • 变量传递
  • 空值保护运算符(?.)
  • item?.a?.b : 会判断item是否有a这个值,防止undefined或者null让视图渲染报错


最常用的内置指令


  • 样式绑定(ngClass)
  • [ngClass]或者[ngStyle]:可以传递一个对象,用来动态判断增加多个样式
  • [class.a]或者[style.font-size]:单一操作类或者某个行内样式
  • 数据遍历(*ngFor)
  • *ngFor="let i of item; let index = index": 可以用这个来遍历数组对象,let index = index意思是创建一个局部遍历把当前遍历的索引保存到你的自定义变量index
  • 动态渲染(*ngIf)
  • *ngIf="item" : 比如loading到视图全部渲染就经常用到这个,当前不在乎低版本的可以用[hidden]来控制切换,因为*ngIf这种动态渲染节点的还是有一定的性能消耗的。。


总结


这一篇没有涉及到路由这些和表单这些; 准备拆成两个文章来说;


  • 路由的配置及懒加载这些,
  • 模板驱动的表单及响应式表单[嵌套表单响应等],回车键触发搜索等。。
目录
相关文章
|
资源调度 JavaScript 测试技术
Angular 2.x折腾记 :(1)初识Angular-cli[官方脚手架]及脱坑要点
这个系列的进度有些跳跃性,我尽量直白点解释,但是我不是官方文档,直入主题!!!!
164 0
|
数据采集 JavaScript 前端开发
|
3月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
60 0
|
3月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
52 0
|
3月前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
103 0
|
3月前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
46 0