<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
- 在
_scope
属性,作为$scope
的引用。
</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实现:
<!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:
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