初学angular.js

Angular Web应用(1)

...新建项目 ...创建一个组件(template)

准备工作。

angular使用的是TypeScript这是ES6版的一个超集

• npm install -g typescript

Angular提供了一个命令行工具angular-cli，它能让用户通过命令行创建和管理项目。它自动化了一系列任务。当你创建和维护应用时，它能帮你遵循很多常用模式。

• npm install -g @angular/cli

如果失败了，npm install -g cnpm 安装cnpm，然后再全书中使用cnpm代替npm命令。可以通过ng命令设置为ng的默认鲍管理工具：ng set --global packageManager=cnpm

示例项目

运行应用 是运行在4200端口上

ng serve


制作Component

创建一个组件

组件化
比如说创建第一个组件就使用app-hello-world

这个需要使用angular-cli来创建新组件，可以使用generate（生成）命令.

要生成hello-world组件，我们需要运行下列命令：

ng generate component hello-world

新建完成的组件在文件中的路径为：
src/app/hello-world/hello-world.component.ts

注意，TypeScript文件的后缀是.ts而不是.js。问题在于浏览器并不知道该如何解释Typescript文件，为了解决这个问题，ng serve 命令会自动把.ts文件变异为.js文件。

Component注解

@Component({
    selector:'app-hello-world',
    templateUrl:'./hello-world.component.html'
    styleUrls:['./hello-world.component.css']
})

用templateUrl添加模板

添加template

@Component({
    selector:'app-hello-world',
    template:`
        
hello-world works inline!
    `
})

用styleUrls添加CSS样式

效果如图所示