MyException - 我的异常网
当前位置:我的异常网» 综合 » Angular学习笔记1

Angular学习笔记1

www.MyException.Cn  网友分享于:2013-09-07  浏览:0次
Angular学习笔记一

官方的范例运行效果:https://embed.plnkr.co/?show=preview

项目初创建时,文件结构如下:

angular-tour-of-heroes
...src   //文件夹是项目的根文件夹之一。 其它文件是用来帮助你构建、测试、维护、文档化和发布应用的。
......app
.........app.component.ts   //app.component.{ts,html,css,spec.ts} => 使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件,随着应用的成长它会成为一棵组件树的根节点。
.........app.component.html
.........app.component.css
.........app.module.ts   //定义AppModule,这个根模块会告诉Angular如何组装该应用。 目前,它只声明了AppComponent。 稍后它还会声明更多组件。
.........app.component.spec.ts
......assets   //这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。
..........gitkeep
......environments   //为各个目标环境准备的文件,它们导出了一些应用中要用到的配置变量。
.........environment.prod.ts
.........environment.ts
......favicon.ico   //每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
......main.ts   //这是应用的主要入口点。 使用JIT compiler编译器编译本应用,并启动应用的根模块AppModule,使其运行在浏览器中。
......index.html   //这是别人访问你的网站是看到的主页面的HTML文件。 大多数情况下你都不用编辑它。 在构建应用时,CLI会自动把所有js和css文件添加进去,所以你不必在这里手动添加任何 <script> 或 <link> 标签。
......styles.css   //这里是你的全局样式。 大多数情况下,你会希望在组件中使用局部样式,以利于维护,不过那些会影响你整个应用的样式你还是需要集中存放在这里。
......polyfills.ts   //不同的浏览器对Web标准的支持程度也不同。 填充库(polyfill)能帮我们把这些不同点进行标准化。 你只要使用core-js 和 zone.js通常就够了
......test.ts   //这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置,不过你并不需要编辑这里的任何东西。
......systemjs.config.js
......tsconfig.json   //tsconfig.{app|spec} TypeScript编译器的配置文件。tsconfig.app.json是为Angular应用准备的,而tsconfig.spec.json是为单元测试准备的。
......node_modules 
......package.json
/** 备注:这里记录了主要的文件概况,还有更多关于项目结构的更多用途信息,可以查看官方文档,更详细:https://angular.cn/guide/quickstart#项目文件概览 */

步骤一: 显示英雄

向 AppComponent 组件添加两个属性,title  属性表示应用的名字,hero 属性表示名叫 "windstorm"的英雄。

app.component.ts (AppComponent class) 

export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

app.component.html 

/** 这里的双大括号是Angular中的插值表达式绑定语法。它们表示组件的title和hero属性的值会作为字符串插入到HTML标签中间。*/
<h1>{{title}}</h1><h2>{{hero}} details!</h2>

刷新浏览器可以看到,成功显示了应用标题和英雄名称,现在,给这个英雄创建一个对象,让他拥有更多属性。

src/app/app.component.ts (Hero class) 

export class Hero {
  id: number;
  name: string;
}

把组件hero属性的类型换成Hero。 然后以1为 id、以 “Windstorm” 为名字,初始化它。

src/app/app.component.ts (hero property) 

hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

更新模板中的绑定表达式,来引用heroname属性。

app.component.html 

<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>

//使用多行模版字符串添加更多html
<h1>{{title}}</h1> 
<h2>{{hero.name}} details!</h2> 
<div><label>id: </label>{{hero.id}}</div> 
<div><label>name: </label>{{hero.name}}</div>

步骤二:编辑英雄名字

添加一个 <input>输入框,让用户可以输入英雄名字,可以实现这个输入框同时显示和修改英雄的name属性,也就是说,我们要在表单元素<input>和组件的hero.name属性之间建立双向绑定

双向绑定需要用到 [(ngModel)] Angular语法,用与把hero.name绑定到输入框中。 它的数据流是双向的:从属性到输入框,并且从输入框回到属性。

app.component.html 

<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

注意!虽然NgModel是一个有效的Angular指令,但它默认情况下却是不可用的。 它属于一个可选模块FormsModule。 我们必须选择先导入。

app.module.ts (FormsModule import) 

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms'; // <-- NgModel lives here
 
import { AppComponent }  from './app.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule // <-- import the FormsModule before binding with [(ngModel)]
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

完整的代码如下:

=> app.component.ts
---------------------------------------------------------
import { Component } from '@angular/core';
 
export class Hero {
  id: number;
  name: string;
}
 
@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})

export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

=> app.component.html
--------------------------------------------------------
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input [(ngModel)]="hero.name" placeholder="name">
    </div>

 

Thank for your time !

 

文章评论

程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
程序员应该关注的一些事儿
程序员应该关注的一些事儿
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员的鄙视链
程序员的鄙视链
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
10个调试和排错的小建议
10个调试和排错的小建议
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
我的丈夫是个程序员
我的丈夫是个程序员
老程序员的下场
老程序员的下场
如何成为一名黑客
如何成为一名黑客
每天工作4小时的程序员
每天工作4小时的程序员
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
编程语言是女人
编程语言是女人
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
 程序员的样子
程序员的样子
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
漫画:程序员的工作
漫画:程序员的工作
Java程序员必看电影
Java程序员必看电影
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
那些争议最大的编程观点
那些争议最大的编程观点
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
代码女神横空出世
代码女神横空出世
中美印日四国程序员比较
中美印日四国程序员比较
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
总结2014中国互联网十大段子
总结2014中国互联网十大段子
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员和编码员之间的区别
程序员和编码员之间的区别
鲜为人知的编程真相
鲜为人知的编程真相
程序员都该阅读的书
程序员都该阅读的书
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
一个程序员的时间管理
一个程序员的时间管理
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有