AngularJS笔记和使用感受

Posted by luoway on January 27, 2016

AngularJS project front-end demo

一个页面只能有一个ng-view,多个ng-include。

ng-view会随地址栏改变。
ng-include一般变化不反映在地址栏。
同一个标签只能绑定一个controller,多个则只保留第一个。

ng-class、ng-if

可以在html部分直接控制view层样式。使用其方法可以很好地分离View层。

不同controller下创建的$scope的作用域不同。

跨页面传值:

纯前端有url、localStorage、cookie等。
考虑后端可以将父页面传的值写入子页面。

json数据中的html使用angular写入页面不会被解析,解决方案:

通过指令 ng-bind-html来实现html的输出。ng-bind-html="content"
通过$sce服务来实现html的展示。

angular.module("list",[]).controller("BlogListCtrl", BlogListCtrl).filter(  
    'to_trusted', ['$sce', function ($sce) {  
        return function (text) {  
            return $sce.trustAsHtml(text);  
        }  
    }]  
)  

ng-bind-html="item.content|to_trusted"

使用到的angular服务

$scope: 双向绑定的全局作用域。
js: $scope.view = {};
html: view == {};

$timeout: 延迟执行。
$timeout(fn, [delay], [invokeApply]);

$sce: 解析HTML。

$location:获取地址栏内容。

$http: 提供Ajax或者JSONP的方法。

$filter:格式化用于展示给用户的数据。
过滤器filter:根据字符串匹配数组中的元素,可开启全字匹配。

$location:可以获取当前controller下当前页面的url。

$routeParams:获取并解析url route设置的参数名和值,是一个对象。

使用感受

angularJS作为一种MVVM语言,将View层的逻辑尽可能地写在HTML里,可以通过阅读其HTML代码大概了解哪部分使用了什么方法。

至于这些放在js代码里的方法,可以理解为Model,毕竟对View层暴露的是方法名及其参数。这些方法操作的更多的是model里的数据,因为操作数据比操作界面更直观、快捷。
与jQuery将DOM元素包装成jQuery对象不同,angular很少需要用angular.element()将对象包装起来,而是像上面说的那样,操作Model,通过数据的双向绑定直接更新View。

最妙的是,angular通过ng-styleng-class,结合数据绑定,将HTML扩展成了能够处理简单逻辑的View层,直接在HTML里写View层逻辑是非常棒的体验!

至于Controller,为什么感觉就是个函数作用域?
毕竟Controller的写法就是这样的:

angular.module('app', []).controller('appCtrl', ['$scope', function($scope){
    //逻辑代码
}])

然后就像前面说的“不同controller下创建的$scope的作用域不同”,就是函数作用域不同……
当然还有一点区别,就是注入了依赖的服务,就是传入了参数……

展望

angularJS的directive指令我还没用到,很多服务没有使用上,provider也没有了解。
作为一个初次使用angular写单页应用的新手,我仅用到了angularJS的MVC特性,使用少部分相当于API的服务。仅仅这些,就让我感受到了angularJS带来的便捷高效。
像逐个API学习jQuery那样,开发者也应该了解angularJS能提供的API,充分利用框架实现的高效率。

我还期待与angular知名度相当的React,体验React的HTML写在js里的编程方式。

有人说,前端小白不应该太过关注这些框架,要打好基础。
基础当然是首要的,而倦怠或者追求效率的时候,使用框架去感受作者想传递的编程模式,去学习并比较这样的编程逻辑,能够开阔眼界。
毕竟,用模块和方法组成的完整逻辑,其基础是封装良好的小块代码。在读完《JavaScript设计模式》后,我想是时候阅读一些流行库或框架的源码了。