码迷,mamicode.com
首页 > Web开发 > 详细

angularjs 学习笔记(二) ----- bootstrap框架

时间:2014-06-20 23:12:05      阅读:333      评论:0      收藏:0      [点我收藏+]

标签:style   class   color   使用   文件   数据   

1、  下载新的jquery-1.11.1文件。

2、  下载新的bootstrap文件。

3、  选择流式布局的模板填充入index.html文件。

4、  将top、foot转为nginclude文件

nginclude必须使用$scope对象,因此需要设置一个全局的mainctrl来将字符串或全局变量注入$cope中。

$rootScope.global =global;

直接将全局变量global赋值给$rootScope,并且之后的子$Scope会获得继承,静态定义与ctrl分开。

5、  将静态的menu转换为数据调用模式

1、  尝试将global注入router,获得成功,constant可以定义router的内容

.config([‘$routeProvider‘,‘global‘, function($routeProvider,global) {

$routeProvider.when(‘/view1‘, {templateUrl: global.RouterMap.view2, controller: ‘MyCtrl1‘});

$routeProvider.when(‘/view2‘, {templateUrl: global.RouterMap.view1, controller: ‘MyCtrl2‘});

$routeProvider.otherwise({redirectTo: ‘/view1‘});

}]);

之后尝试将global从constant转为value,发生错误,router不能通过动态读取后设定路由,menu数据仅用来显示,不涉及路由选择。

 

2、  在后端建立menu.asp文件,并在其中生成3*5的导航结构

3、  试验修改数据读取模块

增加参数项$resource(“path/:url”, {url:"@url"},action)

调用方法. action ({url: testUrl},function(result){})

实际使用时仍然将路径设置在service中

Service若带参数,需以调用方法修改内部变量

4、  栏目设置active标志

在$scope中设置当前标志位,并与数据中标识进行对比

ng-class="{‘active‘:menusubitem.id==ActiveItem}"

ng-repeat为自循环,直接添加在想要循环的对象上,不需要在外面设置容器。

路由中不带返回函数,需要在调用的ctrl中设置标识。

6、  调用bootstrap的轮播(Carousel)组件

1、  复制Carousel代码和图片

2、  Carousel的调用方式为href,这与angular的route会发生冲突,修改bootstrap.js中的相应部分,添加data-href的匹配模式,并将调用方式改为data-href。

3、  Carousel的原始结构包含了图片本身和控制按键,将其优化为标准的angurla的directive

4、  在directive中用template来装载Carousel,其中carousel-inner图片部分作为HTML输出部分,并赋予directive名app-carousel,并使用transclude属性调用。

5、  在template中的carousel-indicators为图片数字显示,为需要修改的部分,这部分使用ng-repeat来循环,所调用的内容需要使用link中对scope进行设置,而不能直接用scope参数设置。

6、  通过jQuery的$(element).find(".item").size()获得图片数量

7、  为第一张图片赋予激活状态,$(element).find(".item:first").addClass("active");

8、  为图片添加数据后发现,无法通过directive来调用ng-repeat的数据,应该是因为异步读取尚未完成,而先构建了组件,因此弃用transclude,将数据读取部分也转移到directive内部完成。(发现了数据交互的方式,因此进行了修改,这部分作废)

9、  数据交互需要用到scope,之后在link中使用$watch来绑定数据

scope : {isize:"=itemSize"},

scope.$watch(‘isize‘, function(n, o) {

  if (typeof(scope.isize) != "undefined") {

   }

});

其中需要判断是否已被绑定。 

10、  整理成压缩文件angularjs-0.1-20140618-bootstrap.zip。

angularjs 学习笔记(二) ----- bootstrap框架,布布扣,bubuko.com

angularjs 学习笔记(二) ----- bootstrap框架

标签:style   class   color   使用   文件   数据   

原文地址:http://www.cnblogs.com/aaronjin/p/3795827.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!