您的位置：首页 > 编程语言 > Lua

angluar入门学习二【应用剖析上】

2014-06-30 13:43 225 查看

在借助angularjs构建应用时，需要遵循以下的步骤

一、调用angular

1.加载angualr.js

2.使用ng-app告诉angualr管理哪一部部分的DOM，ng-app可放于大部分的标签中，并告诉浏览器借助angualr来构建这部分的web

二、加载脚本

加载脚本有两种方式：和其他js库一样，可以冲google的CDN加载脚本或者存储本地，并指定正确的路径便可

对于第一种方式

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

有以下优点：首先google服务器非常快，且脚本是跨应用缓存，仅需加载一次，便可供多个应用使用

三、用ng-app标识符声明angular范围

ng-pp标识符告诉angualr应管理页面上的哪一部分，用于需要构建部分的标签，如构建的是一整套的angualr,则可以如下使用：

<html ng-app>
…
</html>

四、模型 -视图-控制器【MVC】

在第一篇的学习中，简单的对MVC进行介绍。而在接下来部分，将依次通过一些代码片段来让我们了解到其更多的特性

【1】模型包含代表应用当前状态的数据

【2】视图显示数据

【3】控制器管理模型与视图的关系

使用对象属性或只是原型包含数据来创建模型

var someText = 'You have started your journey.';

并通过HTML页面模版创建视图层，然后用模型中的数据进行合并，及二次解析赋值【将新的内容插入到一个存在的模版中】

<p>{{someText}}</p>

其中双｛｛｝｝进行一个数据的绑定，显示结果为

You have started your journey.';

控制器是一些类活着你写的类型告知angualr那个对象或原型通过他们指定$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.

ng-controller用于指定对应控制其名字【任意命名】

对于上述代码，在简单的场经常可以很好的运行，但是对于绝大数应用来说，需要创建模型对象来包含数据，这样做可以$scope对象中原型继承引起的非预期行为，而且在诸如后续中，如增加数据项等更加友好。

改良代码如下：

var messages = {};
messages.someText = 'You have started your journey.';
function TextController($scope) {
$scope.messages = messages;
}

<p>{{messages.someText}}</p>

四、模版和数据绑定

angular应用中的模版只是那些我们从服务器加载的HTML文档或者是定义在<script>标签中的一些静态资源。而我们在模版中去定义界面，并在界面组件即HTML标签中使用angular标识符

基本的启动流程就像这样：

1. 用户请求页面

2.浏览器发出http请求，加载包含模板请求页面【index.html】

3.在angualr加载完毕后，寻找ng-app定义部分，并通过模版寻找标识符和进行数据绑定。

4.连接到服务器加载需要展示的用户数据

在上述步骤中，1-3为angular应用标准，其余步骤可选择，而这些步骤以同步或异步发生，为了提高性能，需要将一个视图数据随模版一起加载，可避免多次请求

在这里再讲多一个基于属性的标识符ng-bind，用于显示更新文本，作用等价于｛｛｝｝

<p>{{greeting}}</p>等价于<p ng-bind='greeting'></p>

在这里建议最好使用ng-bind进行一个数据绑定，虽然前者更适合我们的阅读习惯，但有可能在加载时用户看到为渲染的模版。

对于表单输入部分，这里举一个简单的例子进行分析

<form ng-controller="SomeController">
<input type="checkbox" ng-model="youCheckedIt">
</form>

在上面的代码中，在我们选中以后，在someController中一个叫youCheckedIt属性值变成了true;你也可以在控制器中进行设置该属性，同样可以反馈到视图进行展示

下面再给出angular在更深层次的表单应用

这是一个计算示例，用于帮助创业者了解他们需要多少资金支持【ng-change与js中change事件作用一致，监听表单是否发生变化，一旦发生变化便触发事件】

<form ng-controller="StartUpController">
Starting: <input ng-change="computeNeeded()"
ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>

对于这个单纯的例子，我们设置输出用户价值的10倍

function StartUpController($scope) {
$scope.funding = { startingEstimate: 0 };
$scope.computeNeeded = function() { $scope.funding.needed = $scope.funding.startingEstimate * 10;
};
}

在上述代码中存在一个潜在的问题，当用户在输入框输入时，只是重新计算了需要的数量，仅仅只是作为数值的更新，如果有其他输入框绑定到这个模型，便会发生错误。

这个时候，我们可以用$scope的$watch函数更新这个字段，而对于$watch（）函数将再后续中进行详细讨论，这里你仅需要了解通过$watch（）传递一个表达式和一个回调函数，当表达式发生变化时将调用回调函数

function StartUpController($scope) {
$scope.funding = { startingEstimate: 0 };
computeNeeded = function() {
$scope.funding.needed = $scope.funding.startingEstimate * 10;
};
$scope.$watch('funding.startingEstimate', computeNeeded);
}

在这里，你需要注意的是表达式需要写在引号中，因为字符串作为angular表达式执行，表达式能做简单的运算和访问$scope中的属性。

接下来讲解如何去添加css样式

第一种直接其实和我们平时所用的方法一样，通过在标签内定义class属性，而这里需要用到指令ng-class

CSS样式部分

.menu-disabled-true {
color: gray;
}

<div ng-controller='DeathrayMenuController'>
<ul>
<li class='menu-disabled-{{isDisabled}}' ng-click='stun()'>Stun</li>
...
</ul>
<div/>

然后通过控制器设置disabled属性

function DeathrayMenuController($scope) {
$scope.isDisabled = false;
$scope.stun = function() {
// stun the target, then disable menu to allow regeneration
$scope.isDisabled = 'true';
};
}

在上述例子中，当你点击Stun时，会触发stun()函数，将isDisabled初始值false设置为true，此时页面列表就会应用上css中对应的样式。

五、src和href属性的建议

当数据绑定到一个<img>或<a>标签时，在src或者href中使用{{}}的路径不能正常运行，因为对于其他内容，浏览器是并行加载图片的，angular无法进行拦截

虽然<img>直接语法可能是这样的

<img src="/images/cats/{{favoriteCat}}">

然而，在应用ng-src属性，并系那个这样写模版：

<img ng-src="/images/cats/{{favoriteCat}}">

与之类似，<a>标签，也应该应用ng-href

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs 应用

相关文章推荐

新的分享

章节导航