发表于: 2019-10-29 07:40:55

1 1014


今天完成的事情:了解angular框架如何使用

明天要完成的事:任务6

难题:我建立了2个项目然后无法登陆了locahlost拒绝我的访问

我试图修改自己第2个项目的端口但是任然无法访问;除了端口问题还有什么问题??结果师兄发现没启动、、、、还要启动也就是把nginx那一步忽略了。


收获:

ng new angular-tour-of-heroes

ng new 命令会提示你输入要在初始应用项目中包含哪些特性,请按 Enter 或 Return 键接受其默认值。



进入工作区目录,并启动这个应用。

cd angular-tour-of-heroes

 ng serve --open

ng serve 命令会构建本应用、启动开发服务器、监听源文件,并且当那些文件发生变化时重新构建本应用。

--open 标志会打开浏览器,并访问 http://localhost:4200/


你会在这里看到 AppComponent 壳的三个实现文件:

  1. app.component.ts— 组件的类代码,这是用 TypeScript 写的。

  2. app.component.html— 组件的模板,这是用 HTML 写的。

  3. app.component.css— 组件的私有 CSS 样式。

双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。


你要从 Angular 核心库中导入 Component 符号,并为组件类加上 @Component 装饰器。

@Component 是个装饰器函数,用于为该组件指定 Angular 所需的元数据。

CLI 自动生成了三个元数据属性:

  1. selector— 组件的选择器(CSS 元素选择器)

  2. templateUrl— 组件模板文件的位置。

  3. styleUrls— 组件私有 CSS 样式表文件的位置。

CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称,以识别出该组件。

ngOnInit 是一个生命周期钩子,Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。

始终要 export 这个组件类,以便在其它地方(比如 AppModule)导入它。

显示 HeroesComponent 视图

要显示 HeroesComponent 你必须把它加到壳组件 AppComponent 的模板中。

别忘了,app-heroes 就是 HeroesComponent 的 元素选择器。 所以,只要把 <app-heroes> 元素添加到 AppComponent 的模板文件中就可以了,就放在标题下方。


添加hero属性

往HeroesComponent中添加一个hero属性,用来表示一个名叫“ Windstorm”的英雄。


显示英雄

打开模板文件heroes.component.html。删除角度CLI自动生成的默认内容,到对划线hero属性的数据绑定。

显示HeroesComponent视图

要显示HeroesComponent你必须把它加到壳组件AppComponent的模板中。

别忘了,app-heroes就是HeroesComponent的元素选择器。所以,把只要<app-heroes>元素添加到AppComponent的模板文件中就可以了,就放在标题下方。


(创建一个组件):ng generate component heroes

(显示一个属性或者类):首先在壳的html中去添加组件的html:

app-heroes 就是 HeroesComponent 的 元素选择器。 所以,只要把 <app-heroes> 元素添加到 AppComponent 的模板文件中就可以了

然后在组件中的html写上要显示的内容,在ts文件中定义你要显示的属性

类和属性是有所区别的:类所显示的是对象而属性显示的是值

第2引入某个类需要在被引入的组件的ts文件中:

import { Hero } from '../hero'; 引入这个类

hero: Hero = {    id: 1,    name: 'Windstorm'  };重构或者说定义这个类

而属性不用

显示类用{{}}并不会报错,显示{{object}}但是组件的ts文件里一定要对这个类进行说明定义,没有的话就会报错。而且一定要引入这个类不然也会报错


[(ngModel)] 是 Angular 的双向数据绑定语法。这个双向数据绑定我个人感觉和ajax很像并且是自动的而且这个似乎是把我的电脑当做服务器启动的服务器然后才能访问项目,所以确实是和ajax类似;


而且我似乎理解在项目实际执行中为何要实行模块化了,使用框架时大量繁复代码各个部分很容易搞混,分成不同模块会好很多;而上面我们还没有加入css加上css和图片再加上大型项目几十个页面。



@Injectable() 装饰器会接受该服务的元数据对象,就像 @Component() 对组件类的作用一样。


路由声明:ng generate module app-routing --flat --module=app

routing:路由

你将会使用 RouterModule 中的 Routes 类来配置路由器,所以还要从 @angular/router 库中导入这两个符号。

添加一个 @NgModule.exports 数组,其中放上 RouterModule 。 导出 RouterModule 让路由器的相关指令可以在 AppModule 中的组件中使用。

路由定义 会告诉路由器,当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时,要显示哪个视图。

典型的 Angular 路由(Route)有两个属性:

  1. path:一个用于匹配浏览器地址栏中 URL 的字符串。

  2. component:当导航到此路由时,路由器应该创建哪个组件。

如果你希望当 URL 为 localhost:4200/heroes 时,就导航到 HeroesComponent

首先要导入 HeroesComponent,以便能在 Route 中引用它。 然后定义一个路由数组,其中的某个路由是指向这个组件的。


看到路由和http实在看不懂很复杂英雄指南里只是讲述了一种用法其原理其机制完全没有解释;

所以先看了typescript的语法发现和js的语法很相似而且有一部分es6的痕迹,然后看到后面感觉和js很像除了any数据类型之外其他数据类型都之前看过师兄之前也讲过这个要补es6的基础,


typescript的基础格式:声明   变量名: 数据类型 =值 

typescript有点像之前我所了解的强语言(js是弱语言)变量类型不可改变

弱语言是可以改变变量类型的;

typescript比js多出一个类作用域:就是这个变量只在这个类里发生作用或者说可以只用出了这个类你可以通过类的对象来访问。

并且可以使用逻辑运算符:之前在angular的模板语句和模板上下文里似乎是不能使用位运算符和

  • 赋值 (=+=-=...)

  • newtypeofinstanceof 等操作符。

  • 使用 ; 或 , 串联起来的表达式

  • 自增和自减运算符:++ 和 --

  • 一些 ES2015+ 版本的操作符

都不能用,

但是我在看条件语句时发现一个自己之前一直存在的问题:就是

if(){

}

if(){

}

这个是2个判断但是  执行一次之后在执行第2个if

if(){

}

else{

}

这个是一个判断,不满足执行else

if(){

}

else if(){

}

这个也是2次判断但是 是执行一次判断不满足才会执行下一次判断所以任务2里的界面2是因为这个才出现问题


continue 语句

continue 语句有点像 break 语句。但它不是强制终止,continue 会跳过当前循环中的代码,强迫开始下一次循环。

还有一个问题

function  y(){

x=1;

console.log(x)

}

function   y ();

这是执行一次

给她加个括号就变成自执行函数

执行2次

给函数外面加个括号就变成了自执行函数

TypeScript 也支持使用 JavaScript 内置的构造函数 Function() 来定义函数:


匿名函数

匿名函数是一个没有函数名的函数。

匿名函数在程序运行时动态声明,除了没有函数名外,其他的与标准函数一样。

我们可以将匿名函数赋值给一个变量,这种表达式就成为函数表达式。

var res = function( [arguments] ) { ... }

就是var r = confin()这个类型




















const 声明静态常量,声明的同时必须赋予初始值,赋值后,不得修改;

let 声明变量,声明过得变量不能再次被声明;










返回列表 返回列表
评论

    分享到