发表于: 2017-06-27 21:16:53
1 954
今天完成的事情:
今天主要学了angular的相关知识,
1.AngularJS 应用程序被控制器控制;ng-controller 指令定义了应用程序控制器;
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建
2.ng-controller从实际中去理解的话,它主要的作用还是将数据与展示进行分离,
使得大量的代码或者数据放到controller中,$scope是angular和UI之间的桥梁,
有一些变量的值可以放到$scope中来定义,然后html和js都可以使用
3.demo实例
<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
如图我们需要在js中先创建一个模块,然后定义一个controller,在controller中通过
$scope来进行变量的定义,定义好了之后,html中就可以直接使用了,需要注意的是
一个页面可以有多个module,一个module中还可以有多个controller,所以在html
中使用controller的时候,一定要标注controller的名字,这样才能使用在特定controller
中定义的变量
4.angular表达式,angular表达式写在双大括号内{{expression}},可以将数据绑定到HTML中,
ng-bind指令与双大括号的效果是一样的
明天的计划:继续angular的学习,开始写JS6页面
遇到的问题:angular框架果然有点绕,一下子接触这个体系有点懵,只能快速适应这些,消除陌生感
收获:了解了angular表达式,还有一些指令如何使用
评论