使用angualarjs开发网站


最近一个月都是在改博客的风格,弄了很久才弄成现的这个样式,总体还是比较满意。然后是弄了一个新的图片网站,搭建在新浪SAE平台上。

还是先看看新的图片网站的效果,在这里可以看到

主要是用到了一个开源的html5响适应模版(Lens by HTML5 UP),在手机和平板上体验也是不错的。

模版中的图片路径固写在了index.html中,这不是我想要的效果,我希望可以把图片的一些信息写在js里面,然后用js来动态生产标签,这样可以方便的自己定义需要显示的图片。想起很久以前学习过angularjs这个google的js库有这样的功能,所以准备学习下,顺便试用下。

主要说一说其中用到的一些技术

图片云存储–七牛云存储

由于新浪SAE的代码空间只要100M,而我的图片都是相机拍摄的,单个图片6、7M左右,显然直接放到SAE空间不够。于是把图片全传到七牛云上去了,有1G的免费空间可以用。
而且七牛的图片API不错,用过才知道~~

使用Angularjs自动生成标签

由于网站是用python tornado web框架部署在新浪云上,而tornado的解释器与angularjs会有冲突。
1. 我们先把angularjs的解释器替换掉,这里替换成”[[“和”]]”

angular.module('fanglerApp', [], function($interpolateProvider){
    // use `[[` & `]]` for interpolate
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
})

这样我们就可以使用”[[“和”]]”来表示angularjs语法。

2. 使用angularjs命令

<article ng-repeat="picture in pictures" on-finish-render-filters>
	<a class="thumbnail" ng-href="[[picture.full]]" data-position="left center"><img ng-src="[[picture.thumbnail]]" alt="" /></a>
	<h2 ng-bind="picture.title"></h2>
	<p ng-bind="picture.body"></p>
</article>

上面ng-repeat命令生产标签,从pictures取数据

咋一看貌似没有什么问题,后来发现另外一个js有一段初始化语句会比angularjs执行的块,也就是说在ng-repeat还没执行完的时候,就改变了,导致h2和p标签不能显示正确的值。

3. 监听ng-repeat执行结束

要解决上面那个问题,我们要监听ng-repeat执行完,然后在执行其他js初始化语句。
我们用到下面的方法:

angular.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    };

上面重新定义了一个angular属性,在执行完后会发出一个ngRepeatFinished事件,我们监听这个事件:

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
  // 一些其他初始话脚本

});

我们在ng-repeat所在的标签中增加on-finish-render-filters这个属性就可以监听到事件了。

最后终于可以在js中配置这些数据,来让angularjs帮我自动生成。

$scope.pictures = [
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4517.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4517.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"牛肉面", body:"面还是不错滴"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4521.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4521.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"崂山外", body:"这是外景"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4524.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4524.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"背影", body:"美女的背景~~"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4527.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4527.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"上山路上", body:"那边风景才是最好的"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4534.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4534.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"艺术", body:"书法太好了"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4565.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4565.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"美景", body:"天气真正好"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4669.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4669.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"山上的水库", body:"隐藏在山间"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4674.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4674.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"海边", body:"下山看海来"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4675.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4675.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"海", body:"好想下去游泳去~"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4678.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4678.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"海边", body:"海边的风景~~"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4681.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4681.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"出口", body:"这是出口处的标志"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4692.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4692.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"海边", body:"海边玩沙子"},
	  {thumbnail:'http://7xllue.com1.z0.glb.clouddn.com/IMG_4778.JPG?imageView2/0/w/360/h/225', 
	  	full:"http://7xllue.com1.z0.glb.clouddn.com/IMG_4778.JPG?imageView2/2/w/1500/h/1000", 
	  	title:"企鹅", body:"看企鹅去了~"},
	]

发现做网站还真的比较麻烦的,最近只是偶尔心血来潮来弄一弄,等以后有机会了在来学习慢慢折腾~~