您的位置：首页 > Web前端 > AngularJS

AngularJS基础讲解-语法入门02

2017-01-20 14:51 876 查看

上篇文章（http://blog.csdn.net/microsoftdesigner/article/details/54630035 ）我们大致地了解了下AngularJS的一些特性，那么我们能不能以写JS代码的方式来实现那些功能呢?

<body ng-app="FirstModule">



<div ng-controller="FirstControl">

<p>

第三个值为:{{ points[2] }}

</p>

</div>



<div ng-controller="SecondControl">

<p>

姓为: {{ persons.lastName }}

</p>

</div>



<script src="Media/js/angular.1.4.6.min.js"></script>

<script>

var firstModule = angular.module('FirstModule', []);

firstModule.controller('FirstControl', function ($scope) {

$scope.points = [1, 15, 19, 2, 40];

});

firstModule.controller('SecondControl', function ($scope) {

$scope.persons = { firstName: 'John', lastName: 'Doe' }

});

</script>

</body>

这次挑选了上篇文章中的两个例子来重写，我们可以看到这一次没有在HTML标签控件里面去定义变量，而是由JS里面定义变量后再引用变量，注意代码运行的方式HTML->AngularJS->HTML中的AngularJS变量，这个顺序非常的重要，以后我们可能会用到这样的执行顺序。

语法提炼:

1.ng-app="FirstModule"：定义AngularJS语法模块，这个上篇文章说了，写了这句代码就能写AngularJS。

2.ng-controller="SecondControl"：定义控制器模块。

3.angular.module('FirstModule', []);AngularJS语法模块。

4.

firstModule.controller('SecondControl', function ($scope) {

$scope.persons = { firstName: 'John', lastName: 'Doe' }

});

</script>

查找控制器，$scope这个变量似乎为固定的，不能更改，通过变量可以声明和调用同一控制器下面的其他变量。

以上步奏完成后，变量就算完成了赋值，此时{{ }}内的变量才会输出。

若过程代码出错或者变量未付值那么会输出 {{ persons.lastName }}类的代码。

本次讲解资料:
http://download.csdn.net/detail/microsoftdesigner/9742249

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

标签：

相关文章推荐

新的分享

章节导航