发表于: 2017-06-02 22:49:18
1 1232
接昨天进度继续学习AngularJS 教程,Scope(作用域)、控制器、过滤器、服务、路由等等。
控制器 控制 AngularJS 应用程序的数据。
AngularJS 控制器是常规的 JavaScript 对象。
AngularJS 过滤器
过滤器可以使用一个管道字符(|)添加到表达式和指令中。
AngularJS 过滤器可用于转换数据:
过滤器 描述
currency 格式化数字为货币格式。
filter 从数组项中选择一个子集。
lowercase 格式化字符串为小写。
orderBy 根据某个表达式排列数组。
uppercase 格式化字符串为大写。
AngularJS 服务(Service)
在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。
$location.absUrl():返回当前页面的 URL 地址
AngularJS $timeout 服务对应了 JS window.setTimeout 函数。//自定义时间结束后执行
AngularJS $interval 服务对应了 JS window.setInterval 函数。//规定循环执行时间
创建自定义服务
你可以创建自定义的访问,链接到你的模块中:
创建名为hexafy 的访问:
app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); }});
要使用自定义的访问,需要在定义过滤器的时候独立添加:
app.controller('myCtrl', function($scope, hexafy) { $scope.hex = hexafy.myFunc(255);});
AngularJS ngRoute
任务重点,详细写一下,路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA)。
通常URL形式为 http://w3cschool.cn/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如:
http://w3cschool.cn/#/first
http://w3cschool.cn/#/second
http://w3cschool.cn/#/third
当点击以上的任意一个链接时,向服务端请的地址都是一样的 (http://w3cschool.cn/)。 因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由 就通过 # + 标记 帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。
路由设置对象
AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。
路由配置对象语法规则如下:
$routeProvider.when(url, {
template: string, templateUrl: string, controller: string, function 或 array, controllerAs: string, redirectTo: string, function, resolve: object<key, function>
});
参数说明:
template:如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:
如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:
$routeProvider.when('/computers', { templateUrl: 'views/computers.html',});
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。(
Html中代码中直接插入<script type="text/ng-template" id="embedded.about.html">。。。</script>结构)
controller: function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
controllerAs: string类型,为controller指定别名。
redirectTo: 重定向的地址。
resolve: 指定当前controller所依赖的其他模块。
收获:基本AngularJS的常用的关键字、属性及应用都看了,当然不可能就熟练掌握,只能说有个大概的了解,知道一些用法,在任务中能够慢慢对照进行应用。
困难:无。
计划:明天开始任务6。
评论