前端开发框架
能将HTML分组成可重用的组件
2.2
AngularJS是WEB应用中的一种完整的解决方案。这意味着它不只是你的WEB应用中的一个小部分,而是一个完整的端对端的解决方案。这会让AngularJS在构建一个CRUD(增加 Create、查询Retrieve、更新Update、删除Delete)的应用时显得很轻松。AngularJS的一些出众之处如下:
2.5.4.4
ng-repeat–迭代
第三章
3.1
有了angularJS强大的web开发能力,为什么还需要me呢?angularJS通过声明式的标记语言,实现的是数据的双向绑定、数据填充,没有解决的是页面的组织功能,也就是页面之间的跳转和参数的传递。而me正是为了解决页面之间的跳转串联、参数的传递,让传统的页面跳转变成了div层隐藏或者显示。有几个好处:
上面的代码里既没有调用任何AngularJS的方法,也没有像用框架一样去编写某个具体逻辑,就是完成了上述功能。这个实现的背后是因为浏览器做了比以往生成静态页面更多的工作,让它能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程度,只需要关注数据和模板。
参数
param {Object} option -请求参数
property {String} method - post或者get
property {String} url -请求的http链接
property {Object} data - post请求时的参数,json格式
param {function} success -成功回调函数
2.5.4.3
ng-show–控制标签是否显示,值为false的时候,元素被隐藏
ng-hide–控制元素是否隐藏
ng-if–控制元素是否显示,跟ng-show的不同在于,ng-if=false的时候,元素被删除,而不是隐藏
ng-class–动态控制元素的className
ng-style–动态控制元素的样式
1.2
1.2.1
/commonlibs/angularjs/angular-1.3.8/angular.js
1.2.2
/commonlibs/custom/me/me-1.0.js
1.3
1.3.1
https:///nwjs/nw.js
第二章
2.1
AngularJS 是一个为动态WEB应用设计的结构框架。它能让你使用HTML作为模板语言,通过扩 展HTML的语法,让你能更清楚、简洁地构建你的应用组件。它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了。这些全都是通过浏览器端的Javascript实现,这也使得它能够完美地和任何服务器端技术结合。 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示 设计的声明式语言,但要构建WEB应用的话它就显得乏力了。
</div>
3.2.7
me.define("b", {
ctrl:function() {
//获取从a传来的参数
console.log(me.param());
},
back:function() {
//关闭页面b时,返回参数给a
me.hide("返回的参数");
}
});
3.3
3.3.1
说明
请求api数据
showType: 1,
param:"传到b页面的参数"
}).on("hide",function(hideParam) {
console.log(hideParam);
});
}
});
3.2.6
<divng-controller="b.ctrl">
<h1>这是b页面</h1>
<buttonng-click="back()">返回a页面</button>
AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用双大括号 {{}}语法进行数据绑定
使用DOM控制结构来实现迭代或者隐藏DOM片段
支持表单和表单的验证
能将逻辑代码关联到相关的DOM元素上
第一,用户体验提升,用户再也不用点击一个按钮之后,浏览器跳转之后的等待资源加载的时间。
第二,传统的页面跳转的方式,参数只能是字符串的形式(post或者get),从服务器转一圈之后,进行数据的交换,最后回到用户这里,显然这样的效率是很低下的,而现在打开一个新页面,直接可以将一个json对象传递到新的页面,甚至不需要经过服务器,在客户端本地就能完成,即使需要从服务器获取参数,也只需要发送一个ajax的请求,资源消耗非常低。
在html标签里面增加属性ng-app="angularApp",这样angularjs会自动接管你的应用
通过设置input的ng-model属性,AngularJS会自动对数据进行双向绑定(从$scope到页面控件),这样input里面的值发生改变之后,$scope里对于的变量的值也会发生改变 Nhomakorabea反之亦然。
<htmlxmlns:ng=""id="ng-app"ng-app="meApp">
<head>
<title>me测试页面</title>
<scriptsrc="js/jquery-2.0.2.min.js"></script>
<scriptsrc="js/angular1.3.8.min.js"></script>
value2 = parseFloat($scope.value2);
if(isNaN(value1) || isNaN(value2))return;
$scope.result = value1 + value2;
}
});
</script>
运行结果:
2.5.3
引用angular.js(v1.3.8)
});
</script>
</head>
<bodyng-controller="me.ctrl">
<divid="me_body"></div>
</body>
</html>
<script>me.run("meApp", []);</script>
3.2.4
<divng-controller="a.ctrl">
<scriptsrc="js/me-1.0.js"></script>
<scriptsrc="js-ctrl/a.js"></script>
<scriptsrc="js-ctrl/b.js"></script>
<script>
me.config({
container:"#me_body",
main:"tpl/a.html"//默认加载a.html
ng-mousedown–鼠标点下
ng-mouseup–鼠标抬起
2.5.4.2
ng-model–双向绑定,只对有value属性的标签有效,比如input、textarea
ng-value–单向复制,只对有value属性的标签有效,比如input、textarea
ng-bind–对有innerHTML属性的标签有效,比如div、span、p等
<h1>这是a页面</h1>
<buttonng-click="showB()">打开b页面</button>
</div>
3.2.5
me.define("a", {
ctrl:function() {
// a初始化函数
},
showB:function() {
me.show("tpl/b.html", {
构建一个CRUD应用可能用到的全部内容包括:数据绑定、基本模板标识符、表单验证、路由、组件重用、依赖注入
测试方面包括:单元测试、端对端测试、模拟和自动化测试框架。
2.3
Angular信奉的是,当组建视图(UI)同时又要写软件逻辑时,声明式的代码会比命令式的代码好得多。
将DOM操作和应用逻辑解耦是一种非常好的思路,它能大大改善代码的可调性
将 测试 和 开发 同等看待是一种非常非常好的思路,测试的难度在很大程度上取决于代码的结构
将客户端和服务器端解耦是一种特别好的做法,它能使两边并行开发,并且使两边代码都能实现重用
如果框架能够在整个开发流程里都引导着开发者:从设计UI,到编写业务逻辑,再到测试,那对开发者将是极大的帮助
2.4
AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样,这也会损失一部分灵活性。换句话说,并不是所有的应用都适合用AngularJS来做,AngularJS主要考虑的是构建CRUD应用。要了解什么适合用 AngularJS构建,就得了解什么不适合用AngularJS构建。 如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。像这种情况用一些更轻量、简单的技术如 jQuery 可能会更好。