初学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

![](/Users/krislee/Desktop/屏幕快照 2017-09-18 下午3.42.35.png)

制作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样式
效果如图所示

![](/Users/krislee/Desktop/屏幕快照 2017-09-19 下午2.16.29.png)

你可能感兴趣的:(初学angular.js)