Angular7教程-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16

最新推荐文章于 2023-12-11 14:23:31 发布

nzch

最新推荐文章于 2023-12-11 14:23:31 发布

阅读量528

点赞数

分类专栏： Angular

本文链接：https://blog.csdn.net/qq_28764557/article/details/102810161

版权

Angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

不成功：cnpm install node-sass@latest

不成功python：安装python：https://blog.csdn.net/lyj_viviani/article/details/51763101

无法加载：https://www.cnblogs.com/xiaofenguo/p/11511789.html

module的知识：

https://blog.csdn.net/sunshinessx/article/details/88663858

---------------------01------------------------------

package.json：这个文件存放的是依赖，npm install安装到node_modules里面

.editorconfig:不用管

.gitignore:不用管

angular.json:不用管

package.json：项目的配置文件

tsconfig.json：typescript的配置文件

tslint.json：不用管

src下面的：

app：组件

assets：静态资源

environments：不用管

browserslist：浏览器的配置文件

favicon.ico：图标

index.html：html的入口

karma.conf.js：不用管

main.ts：项目的入口

polyfills.ts：填充文件，正常不用管

styles.scss：公用的scss文件

test.ts：测试入口

：不管

---

必须知道的：

package.json

-----

进入app.module.ts

/*这个文件是Angular 根模块，告诉Angular如何组装应用*/


//BrowserModule，浏览器解析的模块
import { BrowserModule } from '@angular/platform-browser';  
//Angular核心模块
import { NgModule } from '@angular/core';
//根组件
import { AppComponent } from './app.component';
import { NewsComponent } from './components/news/news.component';
import { HomeComponent } from './components/home/home.component';
import { HeaderComponent } from './components/header/header.component';

/*@NgModule装饰器, @NgModule接受一个元数据对象，告诉 Angular 如何编译和启动应用*/
@NgModule({
  declarations: [    /*配置当前项目运行的的组件*/
    AppComponent, NewsComponent, HomeComponent, HeaderComponent
  ],
  imports: [  /*配置当前模块运行依赖的其他模块*/
    BrowserModule
  ],
  providers: [],  /*配置项目所需要的服务*/
  bootstrap: [AppComponent]    /* 指定应用的主视图（称为根组件） 通过引导根AppModule来启动应用  ，这里一般写的是根组件*/
})

//根模块不需要导出任何东西，   因为其它组件不需要导入根模块
export class AppModule { }

一个组件的组成：

什么是组件：所有的模块由组件构成的。

用命令行创建组件：ng g component compinents/news

创建组件之后就再app.modules.ts里面把新闻组件引入了。

如何用？

同理创建其他组件。

-------

定义数据：

默认什么不要加。

-----------------------------02--------------------------

创建项目不安装依赖。

--------------------------------------03------------------

---------------------------------04-------------------------

公共样式

jquery得dom操作

  /*    
    jquery  dom操作  定义变量最好指定类型

      <input type="text" id="username" />
      let usernameDom:any=document.getElementById('username');
      console.log(usernameDom.value);    
    */

--------------------------05--------------------------------

缓存搜索记录

注意一个问题：

key如果加''就是一个字符串，不加""就是前面的索引值。

----

注意一点：

这个东西在一个标签不能出现2次。

-------------------------------------------------06--------------

todoList的持久化问题：

-------------------------------07--------------------------------

丢失

----------08---------09--------------------------------------------

父组件给子组件传值的时候或者父组件改变传值的数据的时候。

请求数据就放在这里

了解。可以做一些自定义的操作，看输入数据是否改变。

组件初始化完成之后做的后期操作

重要：进行DOM操作

做自定义操作

销毁的生命周期函数

三个：onInit afterView Destory

------

带check就是可以写我们自定义的方法。

点击改变数据按钮

演示了ngDocheck和ngOnchange--这个是父组件给子组件传值改变的

一个重要的知识点：

固定数据就是这个要是动态数据的话

改变按钮

---

要回的组件三个其他的了解。

---------------------10-------------------------------------------------

视频的理解：首先setTimeOut是异步的方法。

异步如何获取：

1.回调函数：

外部：

2.第二种方法promise

外部：

3.rxjs

外部：

rxjs更加强大。

rxjs的取消订阅：比如我们一秒之后撤回数据。

可以每隔一秒获取异步方法的数据。promise只能执行一次。

---

改用rxjs

外部：

rxjs的根据函数：map，filter

map如何使用？

多个一起：

------------------------------------------------------------------11--------------------------------------------------------------------

数据交互：

---

为什么用jsonp，域名端口，协议，有任何一个不同就会有跨域的问题。

---

要使用jsonp要经历以下几步。

新建服务

------------------12-------------------------------------

什么是路由：根据不同的url地址，动态的让根组件挂载其他组件来实现一个单页面应用。

如何创建带路由的项目？

这个选择y

打开项目：

注意多了这个文件。

这个是放动态加载的组件的。

-----

1.新建组件

2.配置路由

这个就可以在浏览器输入了地址跳转到组件了。

都放在这里了

----------

如何点击进入不同的界面？

这个就是这么写的不要问为什么。

第一个是动态的第二个是静态的

注意插件问题：

提示和补全插件

-----

默认进来显示首页：

这个是重定向的

---

路由的选中，加上就搞定了，这个得意思是说是active就是选中了，选中就加active样式：

active得样式要自己写。

active是类名随便写

-------------------13----------------

场景，新闻和详情我要知道点击的哪一条新闻。

步骤：

1.写新闻详情的路由

2.在new的界面

<p>
  news works!
</p>


<br>

<br>


<a [routerLink]="[ '/newscontent']">跳转到新闻详情</a>


<ul>
  <li *ngFor="let item of list;let key=index;">
    <!-- <a href="/newscontent?aid=123">{{key}}--{{item}}</a> -->
        
    <a [routerLink]="['/newscontent']" [queryParams]="{aid:key}">{{key}}--{{item}}</a>

  </li>
</ul>

get传值的写法。传值得数据是一个对象。

传值的数据是一个对象key是aid，value是key

效果。aid=5

如何在新闻详情组件获取信息呢？

这个是在

直接打印的：

这个属性。这个是哥RXJS的对象

要这么传值。

-------get的一个组件给另一个组件传值。

---------------------------------------------------------------------------动态路由

2.key就是动态路由的值也可以是对象。

显示：

3.赋值给写的动态路由aid

4.获取

----------------javascript跳转动态路由-------14：03-------------------------------

1.动态路由的js跳转

注意这个‘1234’是固定的值，动态的值就不要加‘’了。

2.先引入再注入也叫声明

3.适合普通路由和动态路由这个是适合动态路由

普通路由跳转到首页这哥是适合普通的路由

----------------------一般的带参数的路由是怎么跳转的呢？------------------------

get传值的js跳转：

引入NavigationExtras

这样写是老版本也是可以的，可以不引入。

3.接收

不引入也是可以的。

----------------14 ------------------

父子路由也是嵌套路由：

点击左侧菜单的话上面和左侧是不变的。

从第十分钟开始看。

1.新建组件，在路由引入组件配置路由。

2.布局

样式放在这里全局生效。

3.挖坑，注意填坑也是在这个界面这个是在根页面

4.新建子组件

5.统一配置路由

6.跳转

7.在父路由挖坑

8.默认匹配

9.-----

---------------------15----------------

前面讲了新建项目，可以复习下。

1.构建组件：

2.配置路由：

3.实现布局：

先写静态资源然后重构。

4.返回的按钮：

5.httpclient请求数据：

将请求的数据封装为服务，统一域名

6.菜品的循环

7.动态路由传值

配置动态路由。

8. 动态路由这个不是潜逃路由

获取传过来的id通过id查后台数据。

组件可以获得服务的属性。

绑定

------------------------16-----------------

nzch

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular7教程-1-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16

不成功：cnpm install node-sass@latest不成功python：安装python：https://blog.csdn.net/lyj_viviani/article/details/51763101无法加载：https://www.cnblogs.com/xiaofenguo/p/11511789.html---------------------01------...
复制链接

扫一扫