不同于普通的框架，你可以从中选择你想用的方法。在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. VS调试ASP.NET浏览器会不断的发出POLL请求

    Poll管道不断发送请求问题! Visual Studio 2013的一个问题Visual Studio 2013中在IE浏览器浏览localhost网站时候,发现会不断有下面链接的请求,这个是怎么回 ...

  2. BA--湿球温度和干球温度的区别

    关于湿球温度和干球温度的区别: 干湿球温度表:用一对并列装置的.形状完全相同的温度表,一支测气温,称干球温度表,另一支包有保持浸透蒸馏水的脱脂纱布,称湿球温度表.当空气未饱和时,湿球因表面蒸发需要消耗 ...

  3. 精简Linux文件路径

    精简Linux的文件路径: ..回退的功能 .留在当前文件夹 //仅仅保留一个/ abc/..要返回. 报错 删除最后一个/ 主要思路: 用栈记录路径的起始位置,讨论/后的不同情况就可以: #incl ...

  4. robot framework框架selenium API

    RIDE面板认识 selenium API 关键字 语法 参数 备注 Open Browser url Chrome 用不同的浏览器打开url,需要下载不同的浏览器驱动,默认火狐 Close Brow ...

  5. unity3d面试题摘选（全）

    ======================================= 数据结构和算法非常重要.图形学也非常重要! 大的游戏公司非常看重个人基础.综合能力.也有的看重你实际工作能力,看你的De ...

  6. h5-注册成功

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdUAAAGnCAIAAABuMVpqAAAgAElEQVR4nOy9eXQTd57om2R6uvtO3z ...

  7. js 智能识别收获地址

    项目地址https://github.com/wzc570738205/smart_parse 支持以下数据格式 马云,1351111111,北京市朝阳区姚家园3楼 马云1351111111北京市朝阳 ...

  8. c/c++ 比较好的开源框架

    作者:EZLippi链接:https://www.zhihu.com/question/19823234/answer/31632919来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...

  9. C#对 Json的序列化和反序列化时出现“k_BackingField”

    在C#2.0的项目中,以前经常使用Json.NET实现序列化和反序列化.后来从c#3.0中开始使用新增的DataContractJsonSerializer进行json相关的操作.微软提供的原生类库使 ...

  10. SQL学习——基础语句（1）

    简序 1.SQL,指结构化查询语言,全称是 Structured Query Language. 2.SQL 让您可以访问和处理数据库. 3.SQL 是一种 ANSI(American Nationa ...