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

<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.jsaui.page.js
  • 打开hello-world.controller.js文件
  • 实现_controller接口,在该方法中创建数据上下文中(_vm)的绑定属性
  • _controller方法中,创建_vm属性,作为数据上下文的引用。
  • _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属性绑定到inputvalue属性
  • 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

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...