party_bid是我的第一个用AngularJS开发的web应用。
1,用yeoman创建工程。yeoman的安装已写在linux系统配置中,这里就不再多写。
mkdir my-project //创建工程文件夹
cd my-project
yo webapp
npm install -g generator-angular
yo angular
项目搭建好之后,用RubyMine打开项目,便开始了我的party_bid项目。
2,model,view,controller模型。在AngularJS中,视图(view)指的是浏览器加载和渲染之后,并且在AngularJS根据模板、控制器、模型信息修改之后的DOM。与view关系紧密的是控制器。在AngularJS中,控制器是一个Javascript函数(类型/类),用来增强除了根作用域以外的作用域实例的。当你或者AngularJS本身通过scope.$new来
创建一个新的子作用域对象时,有一个选项能让你将它当做参数传递给控制器。这能使AngularjS将控制器和这个作用域联系起来,增强作用域的行为。model模型,负责后台数据的处理,表示应用中的整个数据模型。
3,css样式表。初步开发web应用,可以先用bootstrap的样式模板。到官网http://www.bootcss.com/下载css文件和js文件,然后在index.html文件中引用js文件:
<script src="../bootstrap.js"></script>
然后在引用css文件即可。如:
<link rel="stylesheet" href="../bootstrap.css" />
4,运行、调试web程序:在终端中进入项目根目录,输入:
grunt serve
查看效果。
5,页面跳转:用AngularJS的路由route。例如:我需要从一个页面点击一个按钮跳转到login页面,在controller.js里的click事件函数里写
$location.path('/login');//将url设为login结尾
在route.js写
.when('/login',//判断url是不是以login结尾
{
templateUrl:"./login.html",//指当前文件夹下的login.html文件
controller:'login_controller'//指定控制器
})
6,url传参:用$routeParams实现。例如:要在login.html页面将name参数传到main.html页面。在login的控制器path后加上参数。如
$location.path('/main/'+name);
在路由中rout.js:
.when('/main/:name',
{
templateUrl:"./main.html",
controller:'main_controller'
})
接收参数,在main页面controller.js加上$routeParams
.controller('main_controller', function ($scope, $location,$routeParams
$scope.activity_name=$routeParams.name;//接收值
7,数据存储:localSorage
var activity_list= JSON.parse(localStorage['activity_list'] || '[]');//在localStroage中取出数据,后面的‘[]’判断activity_list是否有值,如果没有就将'[]'赋值给activity_list
activity_list.unshift(name);//将name写入activity_list数组的最前,unshift()方法与pusu()相反
localStorage['activity_list']=JSON.stringify(activity_list);//写入localstorage。
8, 双向绑定 和$scope。
$scope是一个把view(一个DOM元素)连结到controller上的对象。
{{}}表达式:是类似Javascript的代码片段,通常在绑定中用到,写在双大括号中如
{{表达式}}。
例:
js
$scope.warn="活动名称有重复,请重新输入!"//绑定在页面显示警告
html
{{warn}}//在页面通过{{}}表达式显示warn
9,ng-repeat遍历数组:
<li ng-repeat="list in lists">
<p>{{list}}</p>
</li>
10,按钮不可用和不显示属性:ng-disabled,ng-show
<button ng-disabled="!name">button</button>
11,css样式问题,每次修改css后或者grunt serve 页面样式便会出问题。通过看gruntfile,把Gruntfile里的四个'autoprefixer'注释掉就可以了
// 'autoprefixer',