发表于: 2017-06-27 21:16:53

1 953


今天完成的事情:

今天主要学了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表达式,还有一些指令如何使用


返回列表 返回列表
评论

    分享到