«

»

浅析AngularJS中的$interpolate

快抢沙发

interpolate

$interpolate服务是一个可以接受三个参数的函数,其中第一个参数是必需的。
使用方法:

  • text(字符串):一个包含字符插值标记的字符串。
  • mustHaveExpression(布尔型):如果将这个参数设为true,当传入的字符串中不含有表达式时返回null,而不是我们期望的interpolation function。
  • trustedContext(字符串):AngularJS会对已经进行过字符串插值操作的字符串通过$sec.getTrusted()方法进行严格的上下文转义。

返回值:函数,用来在特定的上下文中运算表达式。
假设我们在群发邮件的时候,邮件内容一样,只是收件人’to’不同,或者想让不同的发件人’from’也不同,这里我们可以将邮件内容’emailBody’写成模板,将to和from写成“变量”:
emailBody = ‘Hello {{ to }}, Best wishes from {{from}}’
要在字符串模板中做插值操作,需要在你的对象中注入$interpolate服务。在下面的例子中,我们将会将它注入到一个控制器中

    var app =angular.module("myApp",[]);
    app.controller('MyController', function($scope, $interpolate) {
      $scope.to = 'ari@fullstack.io';
      $scope.from = '123456@qq.com';
      $scope.emailBody = 'Hello {{ to }},\nBest wishes from {{from}}';

      //Set up a watch
      $scope.$watch('to', function(body) {
        console.log(body);
        if (body) {
          var template = $interpolate($scope.emailBody,true);
          $scope.previewText =  template({to: $scope.to,from:$scope.from});
        }
      });
    });

上面的template就是$interpolate服务返回回来的函数,在这个函数里面只能传递一个参数,里面的{to: $scope.to,from:$scope.from}意思很明显,多个需要替换的上下文就用逗号隔开

<div ng-controller="MyController">
    <input ng-model="to" type="email" >
    <textarea ng-model="emailBody"></textarea>
    <pre>{{previewText}}</pre>
</div>

运行结果如下;
interpolate

如果需要在文本中使用不同于{{ }}的符号来标识表达式的开始和结束,可以在$inter polateProvider中配置。

  • 用startSymbol()方法可以修改标识开始的符号。这个方法接受一个参数。
    value(字符型) :开始符号的值。
  • 用endSymbol()方法可以修改标识结束的符号。这个方法也接受一个参数。
    value(字符型) : 结束符号的值。

如果要修改这两个符号的设置,需要在创建新模块时将$interpolateProvider注入进去。下面我们来创建一个服务:

    app.config(['$interpolateProvider',function($interpolateProvider){
      $interpolateProvider.startSymbol('__') ;
      $interpolateProvider.endSymbol('__') ;
    }]);
    app.factory('EmailParser',['$interpolate',function($interpolate){
      //处理解析的服务
      return {
        parse : function(text,context){
          var template = $interpolate(text) ;
          return template(context) ;
        }
      }
    }]) ;
   app.controller('MyController', ['$scope', 'EmailParser',function($scope, EmailParser) {
      $scope.to = 'ari@fullstack.io';
      $scope.from = '123456@qq.com';
      $scope.emailBody = 'Hello __ to __,\nBest wishes from __from__';
      // 设置监听
      $scope.$watch('emailBody', function(body) {
          if (body) {
              $scope.previewText = EmailParser.parse(body, {to: $scope.to, from:$scope.from});
          }
      });
    }]);

由于我们将表达式开始和结束的符号都设置成了__,因此需要将HTML修改成用这个符号取代{{ }}的版本,效果如图所示。

<div id="emailEditor">
    <input ng-model="to" type="email" />
    <textarea ng-model="emailBody"></textarea>
</div>
<div id="emailPreview">
    <pre>__ previewText __</pre>
</div>
2016.08.31
H
阅读全文...

自用Angularjs开发环境搭建(国内通用)

快抢沙发

1、搭建VPS
本人用的是搬瓦工的$9.99/y套装,可以用软件putty或者官网kiwivm控制台的里面的Root Shell Interactive连接主机,
console

2、搭建shadowsocks环境
按照如下步骤:

wget --no-check-certificate https://raw.githubusercontent.com/teddysun/shadowsocks_install/master/shadowsocks.sh
chmod +x shadowsocks.sh
./shadowsocks.sh 2>&1 | tee shadowsocks.log

安装完成后会出现
Congratulations, shadowsocks install completed!
Your Server IP:your_server_ip
Your Server Port:8989
Your Password:your_password
Your Local IP:127.0.0.1
Your Local Port:1080
Your Encryption Method:aes-256-cfb

Welcome to visit:http://teddysun.com/342.html
Enjoy it!

操作shadowsocks的相关指令:
启动:/etc/init.d/shadowsocks start
停止:/etc/init.d/shadowsocks stop
重启:/etc/init.d/shadowsocks restart
状态:/etc/init.d/shadowsocks status
shadowsocks的配置文件路径为:/etc/shadowsocks.json
配置单用户
{
“server”:”your_server_ip”,
“server_port”:8989,
“local_address”:”127.0.0.1″,
“local_port”:1080,
“password”:”yourpassword”,
“timeout”:300,
“method”:”aes-256-cfb”,
“fast_open”: false
}
配置多用户
{
“server”:”your_server_ip”,
“server_port”:8989,
“local_address”:”127.0.0.1″,
“local_port”:1080,
“port_password”:{
“8989”:”password0″,
“9001”:”password1″,
“9002”:”password2″,
“9003”:”password3″,
“9004”:”password4″
},
“timeout”:300,
“method”:”aes-256-cfb”,
“fast_open”: false
}
卸载shadowsocks方法
./shadowsocks.sh uninstall
其它说明:默认配置服务器端口:8989客户端端口:1080,密码:自己设定(如不设定,默认为teddysun.com),多用户配置后需要重启shadowsocks服务。

3、PC端使用shadowsocks
填写上面的服务器IP、端口、密码等信息
shadowsocks

4、安装Chrome
先设置IE代理供IE,360类浏览器使用。然后进入官网下载
为了避免因为网络不好无法安装在线安装chrome,建议平时所以还是准备个离线版保险,ChromeStandaloneSetup64.exe

5、下载chrome翻QIANG插件
Proxy SwitchySharp或者Proxy SwitchyOmega,设置相关翻的规则

6、安装Sublime Text2
可以无限免费用
设置sublime右键菜单:
打开注册表,开始–运行(win+r)–regedit
在HKEY_CLASSES_ROOT–*–Shell下面新建项命名为“EditWithSublime”
再右侧新建字符串,命名为Icon,值为”sublime的路径,0″,我的就是“D:\Sublime Text 2\sublime_text.exe,0”,如图所示:
regedit
在EditWithSublime的下面新建项command,在默认值中输入”sublime的路径 %1″,我的就是“D:\Sublime Text 2\sublime_text.exe %1”,如图所示:
regedit2
这时立马可以看到效果了,不用重启。

7、安装Nodejs
官网下载

8、安装设置nodejs环境
安装至d:\nodejs,如果我希望将以上两个文件夹放在NodeJS的主目录下,便在NodeJs下建立“node_global”及“node_cache”两个文件夹。我们就在cmd中键入两行命令:
“npm config set prefix “D:\nodejs\node_global” 和 “npm config set cache “D:\nodejs\node_cache”

9、安装cnpm
nodejs自带npm,可以用npm -v来查看其版本。
鉴于国内网络环境,你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
npm install -g cnpm –registry=https://registry.npm.taobao.org

2016.08.14
H
阅读全文...
  • sitemap_baidu