<span style="font-family: Arial,Helvetica,sans-serif; background-color: rgb(255,255,255);">概述：</span>
前一小节讲了一些理论，但是上手之前肯定得了解。接下来，我要描述的Step完全是按照公司的教程来的，有一些东西不是非常基础。不过用起来很顺手。
工程需求结构：
1. AngularJS库。 这个不多赘述，网上一大堆，可哪儿都是。
2.HTML/CSHTML. 额…这个必须有。
3.hello-world.controller.js。 存放控制器逻辑。
4.app.moudle.js 可以理解为创建一个app对象，加载一些参数。
5.aui.page.js 这个我不能告诉是哪儿来的，只能说这个是一个好用的UI库。可有可无。
app.moudle.js实现：
(function () {
//创建app
angular.module('app',["aui"]);
})();
*hello-world.controller.js的实现（Controller）:
- 在工程文件夹中创建
hello-world.controller.js
- 使用编译器打开
demo.html文件，引入jquery-1.9.1.js、aui.page.js、
- 打开
hello-world.controller.js文件
- 实现
_controller接口，在该方法中创建数据上下文中(_vm)的绑定属性。
- 在
_controller方法中，创建_vm属性，作为数据上下文的引用。
</pre><pre name="code" class="html">
(function () {
$$page("helloWorld.controller",{
//创建数据上下文中的绑定属性
_controller: function (vm,scope) {
var self = this;
//_vm作为数据上下文的引用 [Style Y032]
self._vm = vm;
//_scope作为$scope的引用
self._scope = scope;
}
});
//设置Controller
angular.module('app').controller('HelloWorldController',$$page.helloWorld_controller);
$$page.helloWorld_controller.$inject = ['$scope'];
})();
HTML/CSHTML实现：
- 使用编译器打开
demo.html文件。
- 创建一个
div，并绑定HelloWorldController。
- 创建
input标签，类型button
- 将
helloWorld属性绑定到input的value属性。
- 将
showMessage方法绑定到input的click事件。
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="utf-8" />
<title>demo</title>
<script src="jquery-1.9.1.js"></script>
<script src="aui.page.js"></script>
<script src="angular.min.js"></script>
<script src="app.module.js"></script>
<script src="hello-world.controller.js"></script>
</head>
<body>
<!-- 绑定Controller -->
<div data-ng-controller="HelloWorldController as vm">
<input type="button" value="" data-ng-click="vm.showMessage()" />
</div>
</body>
</html>
Attention：
1.至此理论上是运行成功的，页面上会显示Hello Word! 表示：Your first Anguarjs Demo Program is successful!
2.data-ng-app="app" 声明app的作用域。前文app.moudle注册了一个app对象，在View里要对其作用域进行引入。
3.data-ng-controller 定义此Controller的作用范围，data-ng-click绑定控制器中的某一Function。
附:(aui.page.js)
http://download.csdn.net/detail/u010488290/9633718 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
