用angularjs开发下一代web应用（二）：angularjs应用骨架（一）

浏览数：14 / 时间：2015年06月09日

1.调用angularjs

1>加载angularjs库

可以从google的CDN（内容分发网络）中加载，获取快，并且可以在多个应用之间缓存脚本库(建议使用这种方式，但是中国的特殊国情，不能用这种方式)：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>

本地主机方式。

2>使用ng-app申明angular的边界

2.MVC

定义控制器的正确方式是，把它定义成模块的一部分，控制器可以为应用里面相关的部分提供命名空间机制。模块可以将东西从全局命名空间隔离开。

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

3.模板和数据绑定

    基本的运作流程如下。
              1．用户请求应用起始页。
              2．用户的浏览器向服务器发起一次HTTP连接，然后加载index.html页面，这个页面里面包含了模板。
              3．Angular被加载到页面中，等待页面加载完成，然后查找ng-app指令，用来定义模板边界。
              4．Angular遍历模板，查找指令和绑定关系，这将触发一系列动作：注册监听器、执行一些DOM操作、从服务器获取初始化数据。这项工作的最后结果是，应用将会
                    启动起来，并且模板被转换成了DOM视图。
              5．连接到服务器去加载需要展示给用户的其他数据。对于每一个Angular应用来说，步骤1到步骤3都是标准化的，步骤4和步骤5是可选的。

这些步骤可以同步进行也可以异步进行。为了提升性能，对于应用中的第一个视图，你可以把数据和HTML模板一起加载进来，从而避免发起多次请求。
4.显示文本

     使用ng-bind指令，你可以在UI中的任何地方显示并刷新文本。它还有两种等价形式。
        第一种是使用花括号的形式：<p>{{greeting}}</p>
          还有一种方式就是使用基于属性的指令，叫做ng-bind：<p ng-bind="greeting"></p>

虽然两种形式的输出内容相同，但是使用双花括号语法的时候，在Angular使用数据替换这些花括号之前，第一个加载的页面，也就是应用中的index.html，其未被渲染好的模板可能会被用户看到。而使用第二种方法的视图就不会遇到这个问题。

在大多数模板中你依然可以使用{{ }}。但是，对于index.html页面中的数据绑定操作，建议使用ng-bind。

5.表单输入

ng-model:将元素绑定到模型属性上。

ng-change:指定一个控制器方法，一旦用户修改了输入值，此方法就会调用。

$watch()函数来监视一个表达式，当这个表达式发生变化时就会调用一个回调函数。

ng-submit、ng-click、ng-dblclick。

<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;
};
}

用angularjs开发下一代web应用（二）：angularjs应用骨架（一）,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

用angularjs开发下一代web应用（二）：angularjs应用骨架（一）