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'; });
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)局部刷新,将请求页面填充到布局模板中。