<span style="font-size:12px;">party_bid是一个用于创建竞价活动的web app。即众所周知的拍卖,但是规则会有不同。这里所应用的前端框架是Google开发的AngularJS轻量级,因该说是轻轻量级的小巧精致的JS框架。当然所有的框架其实都是为了方便开发,避免重复工作,方便代码重用,减少各个模块之间的耦合度等等。一般的框架都比较烦,AngularJS是一种真正的不束缚开发者且简单易懂的框架。项目由Yoman生成,结合Rubymine IDE,日常代码提交等由Git管理,并且注册一个Trello帐号管理开发需求和进度。当然大前提是你已经搭配了Linux开发环境。如果有什么问题,请移步博客:<a target=_blank href="http://blog.csdn.net/u014675477/article/details/37938215" target="_blank">点击打开链接</a></span>
接下来会探讨一些开发中常见的小问题,请大家轻柔对待,不要对出现的低能问题暴躁抽打。
AngularJS的一些基本知识:
1. 路由配置与添加JS文件至index.html
2. $scope的运用
3. ng-xx的运用
4. URL传递参数
5. 其他
接下来的讨论的问题也会分类到这些知识中。
1. 路由配置与添加JS文件至index.html
AngularJS的域变量(其实是对象)都会有一个$符号。function()里面会有一个参数$routeProvider ,是路由所需服务。ActivityMasterApp是整个AgularJS的应用名称,与index.html里面ng-app所引用的一样。
路由配置像这样子:
<span style="font-size:12px;"><span style="font-size:10px;">'use strict';
angular
.module('ActivityMasterApp',[
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainController'
})
<span style="white-space:pre"> </span> //当然还有其他页面
.otherwise({
redirectTo: '/'
});
</span></span>
这里刚刚写的时候最好参照着人家的写,否则会在细节上出问题。注意when的一个参数,字符串第一个元素不要忘了是分隔符'/',其实这个代表的是根。路由配置十分简单,几分钟就能搞定。
主要是在index.html里面,route.js这个文件应该放在其他js之前,也就是说,route.js调用的controller要放在route.js后面,否则按序加载时会找不到其他的js文件。当然每次都应该要记得新建一个js都立即添加到index.html。这里我也出现过很多此问题。否则可能会出现XX is not a function 的错误。
2.$scope绑定的数据能在html和js间传递
主要使用的有$scope.var = var_value; $scope.fn = function(params1,params2){//specific realizaion};
这样的话,定义的变量或函数即可在页面上使用,如
<span style="font-size:12px;">$scope.back_to_activities_list = function () {
$location.path('/activities_list');
};</span>
页面上即可使用:
<span style="font-size:12px;"><span style="font-size:10px;"><button class="btn btn-primary header-left"
ng-click="<span style="color:#ff0000;">back_to_activities_list()</span>"
ng-show="!is_list_null">
返回
</button></span></span>
变量的使用同理
3.ng-xx在controller和其对应的html之间数据是双向绑定的
也就是说,只要一个地方更新了数据,另一个使用的地方就会即时更新。
主要使用的有ng-model,ng-click,ng-disabled,ng-switch,ng-show,ng-repeat等。
ng-model一般将文本输入绑定到一个变量上,这个变量的数据即文本数据,最重要的一点是:如果文本输入有任何变动,可以立刻通过读取这个变量来获得。意思是:文本内容会随时被检测。如下:
<span style="font-size:12px;"><input class="well input-size" ng-model="activity_name"/></span>
其他的同理操作。数据双向绑定是十分方便的。
4.URL传递参数也是十分简单的
1.路由配置时这样写:
<span style="font-size:12px;">.when('/activities_list/:activityId',{
templateUrl: 'views/activities_list.html',
controller: 'ActivitiesListController'
})</span>
注意到/:activityId了吧,这里就是传递的参数,也就是通过一个页面跳转到另一个页面时带过去的一个你需要的值,当然后面可以跟很多参数。
然后在另一个页面对应的js文件里,给function添加一个$routeParams服务,即:
<span style="font-size:12px;">app.controller('ActivitiesListController',function($scope,$routeParams,$location){</span>
然后activityId会被绑定到$routeParams上,使用时:
<span style="font-size:12px;"> $scope.activityId = $routeParams.activityId;</span>
这样你就可以使用前一个页面带过来的参数了。当然,你使用时只需要提取$routeParams.activityId即可。
5.双大括号{{}}
双打括号用在html中时,AngularJS会对其中的表达式进行运算,如果里面是函数,同理会执行这个函数。
如上文的input的ng-model绑定了activity_name这个变量,那么在p标签中间这样写:
<span style="font-size:12px;"><p class="p-left">{{activity_name}}</p></span>
就会实时显示您输入的文字;
还有喔,这个我感觉是神器:
当你在某种条件下才调用一个css 时,可以通过ng-switch,但是也可以更简单:
<span style="font-size:12px;">class="well clearfix btn-primary {{set_yellow(activity)}}"</span>
这里的set_yellow会根据情况返回一个字符串,这样的话,这里的class就可以动态加载了。set_yellow函数很简单:
<span style="font-size:12px;">$scope.set_yellow = function(activity){
if( $scope.active_activity == activity )
{
return 'yellow-list';
}
else
{
return ' ';
}
};</span>
说起来其实这是一种构造字符串的方法,还有其他的技巧。比如你在传递参数的时候都是写的'/create_activity'之类的,如果你要传递一个变量呢,这个时候不能直接将你的变量名放在字符串中,否则会被解析会普通的字符,应该是
<span style="font-size:12px;">$location.path('/create_activity/'+$scope.activityId);</span>
顺便说一下,ng-model=''XX''这里的引号是必须的,虽然不用引号也能加载正确,但是写法是不符合原则的。
总之,第一章非常简单,相信大家都会有所收获。