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

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框架

时间: 2024-12-26 16:08:24

angularjs 学习笔记(二) ----- bootstrap框架的相关文章

Web前端学习笔记:Bootstrap框架

Bootstrap框架属于UI框架,这个和jQuery不太一样,其实准确的描述Bootstrap框架属于css框架而非javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果.此外,Bootstrap框架十分超前,在支持html5和css3的浏览器上表现特别好,而且对移动终端的浏览器支持也是相当优秀. 一个完整的Bootstrap框架包含如下四个部分: 脚手架(不知道官网为啥这么翻译):用于重置背景.链接样式.栅格系统等,并包含两个简单的布局结构.Bo

AngularJS 学习笔记二

AngularJS指令 指令 描述 讲解 ng_app 定义应用程序的根元素. 指令 ng_bind 绑定 HTML 元素到应用程序数据. 简介 ng_click 定义元素被单击时的行为. HTML 事件 ng_controller 为应用程序定义控制器对象. 控制器 ng_disabled 绑定应用程序数据到 HTML 的 disabled 属性. HTML DOM ng_init 为应用程序定义初始值. 指令 ng_model 绑定应用程序数据到 HTML 元素. 指令 ng_repeat

AngularJS学习笔记二

指令 1.restrict:指令声明四种表现形式:A(属性).C(类).E(元素).M(注释),使用“restrict”来进行配置. 2.template:指令中生成的字符串html模版 3.templateUrl:模版的地址 4.replace:将原指令所在标签替换为模版内容时,是否保存原指令html,为false时则将模版中内容插入原指令标签中. 5.transclude:将原指令中间的内容移动到template中有“ng-transclude”指令所属标签位置,为true时,覆盖模版中标签

AngularJS学习笔记(二) 表单验证案例(ng-repeat/filter)

这一节相对来说需要理解的东西不是太多,记住了那些api就行了. 还是一个案例(同样来自miaov),一个表单验证,先上代码,然后再对对应的内容进行解释. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> </head>

AngularJs学习笔记--directive

原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directives匹配HTML并执行.这允许directive注册行为或者转换DOM结构. Angular自带一组内置的directive,对于建立Web App有很大帮助.继续扩展的话,可以在HTML定义领域特定语言(domain specific language ,DSL). 一.在HTML中引用direc

hadoop 学习笔记:mapreduce框架详解

hadoop 学习笔记:mapreduce框架详解 开始聊mapreduce,mapreduce是hadoop的计算框架,我 学hadoop是从hive开始入手,再到hdfs,当我学习hdfs时候,就感觉到hdfs和mapreduce关系的紧密.这个可能是我做技术研究的 思路有关,我开始学习某一套技术总是想着这套技术到底能干什么,只有当我真正理解了这套技术解决了什么问题时候,我后续的学习就能逐步的加快,而学习 hdfs时候我就发现,要理解hadoop框架的意义,hdfs和mapreduce是密不

Android学习笔记二十九之SwipeRefreshLayout、RecyclerView和CardView

Android学习笔记二十九之SwipeRefreshLayout.RecyclerView和CardView 前面我们介绍了AlertDialog和几个常用的Dialog,ProgressDialog进度条提示框.DatePickerDialog日期选择对话框和TimePickerDialog时间选择对话框.这一节我们介绍几个新的API控件SwipeRefreshLayout.RecyclerView和CardView,这几个API控件都是google在Android5.0推出的.下面我们来学

Android学习笔记二

17. 在ContentProvider中定义的getType()方法是定义URI的内容类型. 18. SQLiteDatabase类中的insert/delete/update/query方法其实也挺好用的,我在EquipmentProvider类中做了实现 19. Android专门有个单元测试项目(Android Test Project),在这个项目中,可以新建一个继承AndroidTestCase类的具体测试类来单元测试某个功能.我新建了一个AndroidTestProject项目,在

黑马程序员-OC学习笔记之Foundation框架NSNumber、NSValue和NSDate

---------------------- IOS开发.Android培训.期待与您交流! ---------------------- 一.NSNumber 前几篇笔记中,小桥复习了Foundatio框架中的几个类,这三个是OC学习的尾声了. 小桥已经复习过OC数组类NSArray,也说过它只能存放OC的对象,对于基本的数据类型确无能为力,但是实际编程中经常要把基本的数据如int.float,结构体存放的OC数组中,怎么办?这里的NSNumber就有用了,它能够把基本数据类型包装成OC对象.