AngularJS初上手体验<二>Hello Word!

来源：互联网发布：百度nba球员数据编辑：程序博客网时间：2024/04/30 15:14

<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

打开hello-world.controller.js文件

实现_controller接口，在该方法中创建数据上下文中(_vm)的绑定属性。

在_controller方法中，创建_vm属性，作为数据上下文的引用。

在_controller方法中，创建_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实现：

使用编译器打开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

0 0