AngularJS 第一个小程序

zsjg13

浏览: 142448 次
性别:
来自: 安徽

最近访客更多访客>>

yeqingcheng

yang00878

whnuliba

playingfly

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

angularJS

在开始做第一个AngularJS app之前，你需要知道AngularJS其中的一些不同组件。以下是必须了解的：

1. Model：展示给用户的数据。是简单的POJO。

2. View：这是用户访问你的页面时看到的，也就是原始的HTML牵涉到一些 directives和expressions被编译后并且链接了正确的scope后的结果。

3. Controller：驱动你的应用的业务逻辑。

4. Scope：就是一个context，其中存有 data models和functions。一个controller常常在scope中设置这些models和functions。

5. Directives：它会教html新的语法。它扩展了Html，利用定制的元素和属性。

6. Expressions：在HTML中的{{}}就是表达式。它可以用来访问scope models以及functions。

7. Template：就是HTML加上一些额外的标签，形式如指令和表达式。

好了，说的够多了，接下来开始开发这个程序。

目标：创建一个HTML，询问用户的年薪以及它们愿意花费其中的百分之多少用来购物。所以要有2个输入框，一个用于工资，一个用于百分比。还需要一个<span>标签，用于显示计算结果。只要任何输入框的值变了，结果就会立即更新。

如何实现：如果纯粹用js或jQuery，你会怎么做呢？html搞好后，给输入框注册keyup事件的回调函数。在回调函数中，读取输入框的值，计算结果，设置<span>标签的innerHTML属性为计算的结果。

但是用AngularJS的话，根本一行JS都不需要写。在下载的angular-seed-master里的app目录中，新建一个文件叫 test.html。内容如下：

<!DOCTYPE html>
<html lang="en" ng-app>
    <head>
        <title>My First AngularJS App</title>
    </head>
    <body ng-init="salary=0;percentage=0">
        Your Salary?
        <input type="text" ng-model="salary">
        <br/>How much should you invest in gadgets?
        <input type="text" ng-model="percentage">%
        <br/>The amount to be spent in shopping will be:
        <span>{{salary*percentage*0.01}}</span>
        <script src="lib/angular/angular.js"></script>
    </body>
</html>

现在要访问这个页面，我们需要一个web服务器，要运行Angular Seed自带的web服务器，你还需要安装了Node.js。要测试是否成功安装了Node.js，在命令行中输入node，回车，就能知道了。

运行web服务器：在命令行中，转到angular-seed-master目录中，执行命令：node scripts/web-server.js，

会在8000端口上启动服务器。

访问我们新建的html：http://localhost:8000/app/test.html

就这么简单，所以AngularJS很适合快速web应用开发。

1. An AngularJS application bootstraps with the ng-app attribute (actually, it's a directive).

2. ng-init 初始化你的数据模型。

3. ng-model 将一个输入框和模型数据绑定在一起，这建立起了一个双向绑定。

4. The main purpose of an expression is binding the model data to the view uni-directionally; 也就是从模型同步到视图。

The beautiful thing is that the expression is re-evaluated each time any of the data models it depends on changes.

分享到：

安装Django | Angular Seed 项目

2016-04-19 21:34
浏览 778
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论