发表于: 2017-05-19 23:27:11

1 1083


一、今天完成的事情

1.解决昨天懒加载不能加载js文件的问题,是没写controller

2.完善静态页面的样式。

3.获取列表页接口数据,学习如何通过ng-repeat等方法将数据渲染到页面上

4.学习controller的使用。

二、明天计划的事情

完成任务7,开始任务8

三、遇到的问题

如何使用Angularcontroller

控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。

当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可。下面的例子展示了控制器初始化:

function my Controller($scope){

 $scope.msg="hello,world!";

}

上面这个创建控制器的方法会污染全局命名空间,更合理的办法是创建一个模块,然后在模块中创建控制器,如下:

var myApp=angular.module("myApp",[]);

myApp.controller("myController",function($scope){

 $scope.msg="hello,world!";

})

用内置指令ng-click可以将按钮、链接等其他任何DOM元素同点击事件进行绑定。ng-click指令将浏览器中的mouseup事件,同设置在DOM元素上的事件处理程序绑定在一起(例如,当浏览器在某个DOM元素上触发了点击事件,函数就会被调用)。和前面的例子类似,绑定看起来是这样的:

<div ng-controller="FirstController">

<h4>The simplest adding machine ever</h4>

<button ng-click="add(1)">Add</button>

<a ng-click="subtract(1)" class="button alert">Subtract</a>

<h4>Current count: {{ counter }}</h4>

</div>

按钮和链接都被绑定在了内部$scope的一个操作上,当点击任何一个元素时AngularJS都会调用相应的方法。注意,当设置调用哪个函数时,会同时用括号传递一个参数(add(1)

app.controller('FirstController', function($scope) {

$scope.counter = 0;

$scope.add = function(amount) { $scope.counter += amount; };

$scope.subtract = function(amount) { $scope.counter -= amount; };

});

Angularjs与其他框架的最大区别在于,控制器并不适合来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作,它只是视图和$scope之间的桥梁。

四、收获

1.熟悉controller的使用。

2.学习ng-repeat将数据渲染到页面上。



返回列表 返回列表
评论

    分享到