Angular语法基础

Angular

技术：typescript的基本使用，es6

一，Angular环境搭建

1.安装前准备工作

• node
• npm install -g @angular/cli

2.创建项目
ng new 项目名称

如果要跳过npm i安装
ng new angulardemo --skip-install
3.运行项目
cd angulardemo
ng serve --open

src目录解析

• app 组件和根模块
• assets 静态资源文件
• browerslist 支持浏览器
• favicon_ico 图标

【node_modules 】 第三方依赖包存放目录。
【e2e 】 端到端的测试目录，用来做自动测试的。
【src 】 应用源代码目录。
【.angular-cli.json 】 Angular命令行工具的配置文件。后期可能会去修改它，引一些其他的第三方的包，比如jquery等。
【 karma.conf.js】 karma是单元测试的执行器，karma.conf.js是karma的配置文件。
【package.json 】 这是一个标准的npm工具的配置文件，这个文件里面列出了该应用程序所使用的第三方依赖包。实际上我们在新建项目的时候，等了半天就是在下载第三方依赖包。下载完成后会放在node_modules这个目录中，后期我们可能会修改这个文件。
【protractor.conf.js】 也是一个做自动化测试的配置文件。
【README.md】 说明文件。
【tslint.json】 是tslint的配置文件，用来定义TypeScript代码质量检查的规则，不用管它。

Angular_CSS
注意：Component.css仅用于组件，src根目录下的style.css全局的样式。
Angular模板语法
MVVM 设计模式起源于MVC。
M->model:数据（模型）/状态
V->view:视图
C->控制器：交互修改数据的方式

M->model
V->view
VM->对数据和视图的双向绑定，只要修改数据，VM（框架）就会自动改变视图，视图的交互改变了数据。

Angular插值
语法:{ {…变量和表达式}}
应用：应用于html内容里，也可以应用于property里

<h1>helloworld</h1>
<p>{
   {
   title}}</p>
<h1>3+4={
   {
   sum(3,4)}}</h1>
<button class="{
   {classStr}}">按钮</button>

ts

export class AppComponent {
   
  title = 'angularapp';
  classStr = 'bgBlue';
  msg='这是一个索引属性';
  sum(a,b){
   
    return a+b;
  }
}

自定义属性插入方式

<h1 [attr.data-index]='msg'>msg</h1>

绑定html自带的属性，那么还可以这么绑定

//1
<button class="{
   {classStr}}">按钮</button>
//2
<h1 [class]='classStr'>333</h1>

angular模块里绑定html

//css
.red{
   
color:red
}
//html
<div>{
   {
   content}}</div>
<h1 [innerHtml]='content' class='red'></h1>
//ts
public content='<h2>我是一个html标签</h2>'

Angular样式
定义class的三种方式，跟vue一致，会自动将变量和原有的HTML的CLASS相加。

ts

export class AppComponent {
   
  classStr = 'bgBlue active';
  classObj = {
   
    bgBlue:true,
    active:false
  };
  isShow = true;
}

<!-- 定义变量的方式 -->
<h1 class="abc" class="{
   {classStr}}">class1</h1>
<h1 [class]='classStr'>class2</h1>
<h1 [attr.class]='classStr'>class3</h1>//一般定义数据索引

//样式的切换
<div [ngClass]="{'orange':flag,'red':!flag}">ngClass演示</div>
//选择
<ul>
	<li *ngFor = 'let item of list;let key=index;' [ngClass]="{'red':key==0,'orange':key==1}">
		{
   {
   key.title}}
	</li>
</ul>

字符串模式

<!-- 字符串模式 -->
<h1 [class]='classStr'>class2</h1>
<!-- <h1 [class]='str abc'>1111</h1> -->

对象模式

<!-- 对象模式 -->
<h1 [class]='classObj'>222</h1>
<h1 [class]