不同于普通的框架，你可以从中选择你想用的方法。在anjular中是不同组件写作工作的。这章中，你会看到anjular中基本的组成部分并且理解他们是如何协同工作的。很多组件会在以后的章节中详细讲解。
【开始使用Anjular】
无论你构建什么样的应用程序，以下两件事是你必须做的。
1、加载anjular.js文件
2、告诉anjular那部分DOM是被anjular管理的，通过加上ng-app的directive
【加载脚本】
你能从谷歌的CND中加载，如下
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js">
</script>
我们建议使用谷歌CDN，谷歌的服务器非常快，并且脚本可以跨应用程序缓存。这就是说如果你的用户有很多使用anjular的程序，只需要下载一次anjular。如果你的用户访问了别人的
使用了anjular的应用程序，那么当访问你的网站的时候也不用再次下载脚本。
如果你更喜欢使用存储在本地的脚本，也可以。
【使用ng-app声明anjular的边界】
ng-app告诉Anjular你的页面的哪部分是需要被管理的。如果你的页面全都是就加在html标签里
<html ng-app>
…
</html>
这告诉Anjuar管理页面中全部的DOM元素。
你也可以管理页面的一部分仅仅
<html>
…
<div ng-app>
…
</div>
…
</html>

【模型 试图 控制器】
在第一章中。我们提到了Anjular支持MVC模式。所以你可以很灵活的构建你的应用程序，你有这么几种选择：
一个模型包含现在应用程序状态的数据。
展现数据的试图
管理模型和视图的控制器
可以使用对象属性或基本类型存储你的数据。如果你想展现一些数据给用户看，你可以这么写一个字符串
 var someText = 'You have started your journey.';
然后通过HTML页面中从模型中取到的数据拼凑上去得到页面。就像这样
{{someText}}
控制器实际上是类或者类型，通过这个告诉Anjular那个对象构成你的模型通过分配他们到$scope中
function TextController($scope){
 $scope.someText = someText;
}
把上边这些组合到一起如下
<html ng-app>
<body ng-controller="TextController">
<p>{{someText}}</p>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<script>
function TextController($scope) {
$scope.someText = 'You have started your journey.';
}
</script>
</body>
</html>
在浏览器中加载这个文件。我们看到
You have started your journey.
通过这个简单的例子，对于大多数应用程序，你会创建好多模型来存储你的数据。我们将要创建一个message模型并使用它存储someText。所以
把var someText = 'You have started your journey.';
改成：
var messages = {};
messages.someText = 'You have started your journey.';
function TextController($scope) {
$scope.messages = messages;
}
在html中使用它
<p>{{messages.someText}}</p>
在后面我们会谈到$scope对象。创建一个这样的模型对象会避免未预料的影响$scope对象的行为。
最好不要把控制器创建为全局对象。而是要创建一个module，类似于C#中的命名空间。代码如下
<html ng-app='myApp'>
<body ng-controller='TextController'>
<p>{{someText.message}}</p>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<script>
var myAppModule = angular.module('myApp', []);
myAppModule.controller('TextController',
function($scope) {
var someText = {};
someText.message = 'You have started your journey.';
$scope.someText = someText;
});
</script>
</body>
</html>
在这个版本中。我们告诉ng-app元素module的名称，myApp。然后我们创建一个名称为myApp的module从我们的控制器方法里。
模板和数据绑定
在Angular应用程序只存在于从服务器上下载下来的HTML文档。angular存在于script标签中
在web浏览器中，Angular通过组合数据完善你的HTML模板。我们看到第一章的数据在购物车中如下：
<div ng-repeat="item in items">
<span>{{item.title}}</span>
...
</div>
在这，他重复显示外层的<DIV>和里面的所有东西。

【展示文本】

你可以展示更新文本，只要你在UI中使用ng-bind指令。它有两种对等的方式。一种是我们见过的两个花括号

 <p>{{greeting}}</p>

另一种叫做ng-bind

<p ng-bind="greeting"></p>

分别什么时候用这两种呢？我们使用双花括号语法读起来更自然。但是当页面加载的时候可能会出现用户看到未渲染完的页面模板，在安哥拉替换两个双花括号的内容为实际数据之前。

【表单输入】

例如

<form ng-controller="SomeController">

<input type="checkbox" ng-model="youCheckedIt">

</form>

这表示

1、当用户选择了box，SomeController中的$scope会被置为真

2、如果你设置了$scope.youCheckedIt为true在SomeController中。UI中的checkbox会为选中状态。

通过设置ng-change属性来制定控制器中当input的值改变时应该调用的方法。

<form ng-controller="StartUpController">

Starting: <input ng-change="computeNeeded()"

ng-model="funding.startingEstimate">

Recommendation: {{funding.needed}}

</form>

我们把初始值设置为0

function StartUpController($scope) {

$scope.funding = { startingEstimate: 0 };

$scope.computeNeeded = function() {

$scope.needed = $scope.startingEstimate * 10;

};

}

要在UI中更新一个字段，无论他是怎么被更新的。我们要调用一个全局函数$watch()

在本例中。我们要监视的是funding.startingEstimate然后调用的是computeNeeded()函数。我们就可以这样重写StartUpController

 function StartUpController($scope) {

 $scope.funding = { startingEstimate: 0 };

 computeNeeded = function() {

 $scope.funding.needed = $scope.funding.startingEstimate * 10;

 };

 $scope.$watch('funding.startingEstimate', computeNeeded);

 }

当startingEstimate改变的时候都会更新funding.needed方法。

<form ng-controller="StartUpController">

Starting: <input ng-model="funding.startingEstimate">

Recommendation: {{funding.needed}}

</form>

你可以在表单上制定ng-submit指令。告诉这个表单提交到哪个方法上

 <form ng-submit="requestFunding()" ng-controller="StartUpController">

 Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">

 Recommendation: {{needed}}

 <button>Fund my startup!</button>

 </form>

 function StartUpController($scope) {

 $scope.computeNeeded = function() {

 $scope.needed = $scope.startingEstimate * 10;

 };

 $scope.requestFunding = function() {

 window.alert("Sorry, please get more customers first.");

 };

 }

这会组织默认的post提交

我们可以通过这种方法做一个重置按钮\

<form ng-submit="requestFunding()" ng-controller="StartUpController">

Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate">

Recommendation: {{needed}}

<button>Fund my startup!</button>

<button ng-click="reset()">Reset</button>

</form>

function StartUpController($scope) {

$scope.computeNeeded = function() {

$scope.needed = $scope.startingEstimate * 10;

};

$scope.requestFunding = function() {

window.alert("Sorry, please get more customers first.");

};

$scope.reset = function() {

$scope.startingEstimate = 0;

};

}

【关于不突出的JavaScript】

不要再html中间写click、mousedown这样的方法。

不唐突的JavaScript

[AngularJS]Chapter 2 剖析安哥拉JS应用程序的更多相关文章

  1. Js倒计时程序

    Js倒计时程序 点击下载

  2. nw.js桌面程序自动更新（node.js表白记）

    Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...

  3. 【翻译】在Ext JS应用程序中构建可维护的控制器

    原文:Building Maintainable Controllers in Ext JS Apps 你好You Had Me 你是Tearing Me Apart 模板We Dont Need t ...

  4. 在 Web 应用中创建 Node.js 应用程序

    本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Pyth ...

  5. 用chrome的snippets片段功能创建页面js外挂程序，从控制台创建js小脚本

    用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.可以访问和从 ...

  6. 嗨，让我带你逐行剖析Vue.js源码

    本项目受到了阮一峰老师的肯定,已刊登在阮一峰老师微信公众号的科技爱好者周刊第87期,同时也被多个微博大V转发,短短一个月时间内在github上star数量就已经突破2k! Hello,大家好,我最近在 ...

  7. 用简单的 Node.js 后台程序浅析 HTTP 请求与响应

    用简单的 Node.js 后台程序浅析 HTTP 请求与响应 本文写于 2020 年 1 月 18 日 我们来看两种方式发送 HTTP 请求,一种呢,是命令行的 curl 命令:一种呢是直接在浏览器的 ...

  8. [AngularJS]Chapter 4 AngularJS程序案例分析

    前边讲的都是基础.本章看看他们怎么合作的. 我们要建一个程序.一次一步.章末结束 [这个程序] GutHub是一个简单的菜谱管理程序.功能是存好吃的的菜谱并提供步骤.这个程序包含: 两列布局 左边是导 ...

  9. [AngularJS]Chapter 3 使用AngularJS构建应用程序

    本章内容提要: 如何布置AngularJS进行快速开发 开启服务器进行测试 使用Karma进行单元测试用例测试 编译压缩AngularJS进行生产 使用Batarang进行Debug 如何简化开发工作 ...

随机推荐

  1. redis代码解析-事务

    redis 的事务相关的几个命令分别为 watch multi exec. watch 可以监控一个变量在事务开始执行之前是否有被修改.使用方式为: WATCH key [key ...] 在redi ...

  2. pl/sql sql窗口允许输出和允许变量替换

    pl/sql sql窗口允许输出和允许变量替换 允许输出:类似在命令窗口中输入的 setserveroutput on; 允许变量替换:如果点击了这个,类似于执行 set define off命令 在 ...

  3. C语言：一个涉及指针函数返回值与printf乱码、内存堆栈的经典案例

    一个奇怪的C语言问题,涉及到指针.数组.堆栈.以及printf.以下实现: 整数向字符串的转换,返回字符串指针,并在main函数中调用printf显示. #include<stdio.h> ...

  4. 深入理解 C 指针阅读笔记 -- 第五章

    Chapter5.h #ifndef __CHAPTER_5_ #define __CHAPTER_5_ /*<深入理解C指针>学习笔记 -- 第五章*/ /*不应该改动的字符串就应该用 ...

  5. IPK僵尸网络 看看其传播手法

    转自:http://www.freebuf.com/vuls/154975.html 一.IPK僵尸网络概述 IPK僵尸家族是自2012年底就开始出现并长期持续活跃在境外的DDoS僵尸网络.2016年 ...

  6. hdoj--1201--18岁生日(模拟)

    18岁生日 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Subm ...

  7. php开启CURL支持

    window下安装php_curl支持 1. 找到php.ini 修改extension=php_curl.dll 把前面的分号去掉2. 把 php_curl.dll libeay32.dll ssl ...

  8. （转载） Android Studio你不知道的调试技巧

    Android Studio你不知道的调试技巧 标签: android studio 2015-12-29 16:05 2514人阅读 评论(0) 收藏 举报  分类: android(74)    ...

  9. Android Handler学习笔记

    已经习惯了挖坑不填,继续任性一下,周一到周五继续挖坑,每周六周日负责填坑. 1.从Android UI线程谈起 出于性能考虑,Android 中的UI操作并不是线程安全的,所以Android中规定只能 ...

  10. 手游服务器端接入google的SDK

    在接入google的SDK之前,当然先要用你的google开发者账号要去申请你接入的应用,这些步骤就直接省略了具体的步骤可以查看这篇博文:http://blog.csdn.net/hjun01/art ...