控制器的特性教学课件.pptx

对话 AngularJS的控制器代码如右图，通过图中的js代码和HTML页面上可以快速区分出数据（Model）、视图（View）、控制（Contrller）、3个区域，简称MVC。这样的代码结构会比较清晰，而且方便维护和扩展。 从MVC结构中，我们可以看出AngularJS具有很好的分离特性，下面我们具体来看一下。 var HomeController = function ($scope){ $scope.message = “秒秒学”; }; body ng-controller= HomeController h1{{message}}/h1 /body 视图 控制 数据 复杂对象：相比Date控制器，Quote和Chart控制器绑定的数据格式更加复杂，可以通过点“.”来访问更细节的数据：如stock.symbol， stock.price 。所以控制器可以使用复杂对象来保存数据。 body ng-app h1Hello AngularJS/h1 div ng-controller=DateController Current time is: {{date}} /div div ng-controller=QuoteController divStock:{{stock.symbol}}/div divPrice:{{stock.price}}/div div ng-controller=ChartController img ng-src={{char.Source}} alt={{chart.description}}/img /div /div /body 多个控制器：一个控制器只能控制一部分区域和数据内容，当项目比较复杂时就需要同时使用多个控制器，甚至一个页面用多个控制器来的展示页面上的多内容区域。如图这个页面同时使用了3个控制器：Date、Quote、Chart。分别绑定了时间,股票报价信息和图表数据到HTML页面。 控制器的嵌套：这里的Chart控制器被嵌套到Quote控制器中，这是控制器的高级用法，这种嵌套也是允许的。这部分内容，本课程不做讲解。 请按照颜色制作热点。 控制器的应用 项目介绍 项目介绍 首先打开上一节课我们完成的代码，刷新页面后，会出现“秒秒学”。 下一步 添加company变量 添加company变量 打开script.js文件,在HomeCongtroller函数内添加一个新变量“company”来记录更多数据。 下一步 添加属性 添加属性 为company对象添加3个属性：name、address和img，并给它们赋值，其中img的值是一张图片的url地址。 下一步 给$scope添加新属性 给$scope添加新属性 为了使HTML页面能访问新添加的数据，我们需要将变量company赋值给$scope对象，让它帮忙传递，所以这里给$scope添加了一个新属性“company”，值为我们新建的company变量。 下一步 HTML添加新节点 HTML添加新节点 数据建立完毕，我们开始构建HTML页面上的新节点，为绑定数据作准备。在h1节点下先建立一个div节点，然后再给它添加3个子div节点。 下一步 显示姓名 显示姓名 在第一个子div中使用绑定表达式{{}} 将$scope上属性所包含数据信息绑定到HTML页面，刷新下页面，新出现了“姓名：秒秒学”。 下一步 显示地址信息 显示地址信息 同样在第二个子div中添加绑定表达式，绑定$scope对象上company.address属性到HTML页面，刷新页面会出现相应的地址信息，说明获取控制器中的数据成功。 下一步 显示图像信息 显示图像信息 在第三个子div中，我们用绑定表达式设置图片的属性。将src属性设置为{{company.img}}；title属性设置为 {{}}。从HTML代码页面可以看出，引号中的属性值同样会被AngularJS的表达式替换。 出现图像 刷新页面会出现一张秒秒学的图片。若将移动鼠标到图片上还会出现标题“秒秒学”。 报错 刷新页面时，出现了错误我们需要进一步分析。 下一步 错误分析 错误分析 浏览器加载页面的流程是：先解析HTML，后异步运行js代码文件，最后根据js修改页面DOM节点。在这种情况下，浏览器在解析HTML时，发现“img src=”和绑定表达式，它会立即开始加载资源，并把”{{company.img}