party bid第一张卡小结 -

voc__tor

浏览: 3305 次

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

party bid第一张卡小结

博客分类：

项目总结

1 . 第一步要搭建项目的环境，使用的是yeoman工具，可以快速生成所需框架的工程文件（我用的是angularjs框架），项目调试也很方便，具体安装和使用可以参照它的官网yeoman.io。我在linux下安装yeoman时，出现来错误，原因是之前安装的nodejs使用了sudo指令，现在需要改变错误提示路径下的文件的属主或者属组，使用chown指令。

2. 为了使用haml，需要配置在工程里配置grunt-haml插件。

a. 在工程文件根目录启动终端

npm install grunt-haml

在该工程里安装grunt-haml插件。

b.配置Gruntfile.js文件

首先，在module.exports=function(grunt){}里添加grunt.loadNpmTasks('grunt-haml');

之后，在watch{}里添加

haml: {
        files: ['<%= yeoman.app %>/views/*'],
        tasks: ['haml']
        },

最后，需要添加的代码的作用是指定哪些文件需要执行haml的转化，在 grunt.initConfig({})里添加

haml:{
            create_activity: {
                src: 'app/views/create_activity.haml',
                dest: 'app/views/create_activity.html'
            },
            activity_list: {
                src: 'app/views/activity_list.haml',
                dest: 'app/views/activity_list.html'
      },

配置好就可以使用haml了，之前比较熟悉html标签，但是现在需要用haml，感觉很不习惯，觉得很麻烦，觉得多此一举，调试就是html文件，问什么还要写haml之后，再转成html文件。不过用着用着，就发现haml很简洁，而且转成的html文件也很工整。

3. angularjs工作原理

解释anguarjs工作原理需要一小段代码

hello.html文件

<html ng-app="myApp">
  <head>
    <script src="angular.js"></script>
    <script src="world.js"></script>
  </head>
  <body ng-controller="MyCtrl">
    <p>hello {{name}}!</p>
  </body> 
</html>

world.js文件

angular.module('myApp')
    .controller('MyCtrl',function ($scope) {
        $scope.name='world';
    });

当我们去访问这个html时，浏览器依次执行：

1).加载html，解析成DOM树；

2).加载anguar.js脚本；

3).angular寻找ng-app指令，根据这个指令确定angular的作用范围；

4).创建ng-app作用范围内的$injector(注入器)，并获取$controller和$scope；

5).调用该controller，并给name赋值；

6).替换表达式{{name}}，html页面显示hello world!

4.angularjs路由原理

上面通过一段代码，描述了单个页面如何在angular下加载的。下面介绍angular如何在多个页面之间跳转，加载。

在angular下实现多视图，需要配置路由。路由通过$routeProvider来声明，它是$route服务的提供者。该服务使得controller，view与当前浏览器的URL可以轻易集成。上图说明下路由在angular模块中位置。

还是用一段代码讲解路由。

angular
    .module('partyBidApp', [])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'views/htmls/create_activity.html',
                controller: 'CreateActivityCtrl'
            })
            .when('/activitylist', {
                templateUrl: 'views/htmls/activity_list.html',
                controller: 'ActivityListCtrl'
            })
            .when('/apply/:activity_name', {
                templateUrl: 'views/htmls/activity_start.html',
                controller: 'ActivityStartCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    });

依赖注入（DI）是angular核心特性，当partybidApp模块创建的时候，$injector同时生成,当需要$route服务时，$injector获取$routeProvider将路由信息注入到$route服务中，实例化一个$route服务，服务于用户的页面请求。

回到代码中，在布局模板index.html中<div ng-view></div>的作用是使用ng-view将“碎片”视图拼接起来，也就是将请求的页面填充到index.html有ng-view的div里。

$routeProvider提供了两种方法处理路由：when和otherwise。方法when接收两个参数，第一个参数是string类型，设置$location.path()，是匹配当前URL的模板。第二个参数配置对象。controller属性的值可以是字符串也可以是方法，设置该页面的控制器。templateUrl属性的值是html文件的相对路径，anguar会通过XHR（ajax）来获取该html文件，并渲染到那个ng-view处。$routeProvider还可以处理url里传递参数，需要在参数前加冒号，上面的例子就是将activity_name作为key存到了$routeProvider。

整个路由处理过程如下：

1)创建partybidApp模块，生成$injector；

2)$injector将$routeProvider注入到$route服务中；

3)用户请求页面，根据路由信息匹配当前URL；

4)局部刷新，将请求页面填充到布局模板中。