不同于普通的框架，你可以从中选择你想用的方法。在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. maven下载的jar包可以查看源码

    1:Maven命令下载源码和javadocs 当在IDE中使用Maven时如果想要看引用的jar包中类的源码和javadoc需要通过maven命令下载这些源码,然后再进行引入,通过mvn命令能够容易的 ...

  2. 图像滤镜艺术---保留细节的磨皮之C#程序实现

    上一篇博文"保留细节的磨皮滤镜之PS实现"一文中.我简介了本人自己总结的一种非常easy的磨皮滤镜,这个滤镜在磨光皮肤的同一时候,会保留非常不错的细节,今天,我将介绍使用C#程序实 ...

  3. HTML5 Canvas 获取网页的像素值。

    我之前在网上看过一个插件叫做出JScolor   颜色拾取器  说白了就是通过1*1PX的DOM设置颜色值通过JS来获取当前鼠标点击位置DOM的颜色值. 自从HTML5 画布出来之后.就有更好的方法来 ...

  4. caioj1497&&bzoj3125: CITY

    震惊!bzoj居然又被苏大佬D飞了... 这题煞笔模板题好吧. 然而bzojAC caiojWA%40??? 好强啊 今天早上发现是m打成n了囧 #include<cstdio> #inc ...

  5. 如何用php实现qq登陆网站

    PHP网站入QQ互联,使用QQ号码登录网站. 平台接口系列文章 PHP网站入QQ互联,使用QQ号码登录网站 PHP网站接入人人网,授权登陆 php facebook api网站接入facebook 1 ...

  6. Centos7 minimal 系列之Nginx负载均衡搭建（四）

    一.Nginx搭建请参考我的上篇文章 http://www.cnblogs.com/WJ--NET/p/8143899.html 二.在IIS上搭建2个网站 三.配置nginx 虚拟机和主机网络互通请 ...

  7. 解决问题方法：没有设置对象，app.Config没有配置

  8. 理解HashMap底层原理，一个简单的HashMap例子

    package com.jl.testmap; /** * 自定义一个HashMap * @author JiangLai * */ public class MyHashMap<K,V> ...

  9. 大话主席（superslide和 touchslide）插件的使用

    对于实现效果来说,插件的办事效率真的是太高了,而且里边也被处理过兼容性,用起来实在是特别方便,现在我们来说说大话主席中的slide插件,它分为pc端(superslide)和移动端(touchslid ...

  10. android 给imageView,文字等加上阴影[记录]

    1.链接 https://github.com/Devlight/ShadowLayout 2.效果 3.code compile 'com.github.devlight.shadowlayout: ...