AngularJS初级开发笔记
2015-12-06 22:36
645 查看
自从了解AngularJS这个前端框架, 就喜欢上它。 喜欢它的简洁高效, 就跟当初喜欢上Python一样。 使用Juery,需要和dom打交道, 有时候实现一个简单的全文搜索功能,需要写很多的js代码。 而使用AngularJS却不到10行代码。 太酷了!~
接触Angular有段时间。 但是一直没有实践。 周末的时候,专门把以前用Juery写的应用用AngularJS重写一遍 。
我的主页参考的文档是官方的入门文档:https://docs.angularjs.org/tutorial (官方入门文档是不错的入门资料,简单而且思路清晰,墙裂推荐!)
如果要深入AngularJS的话,有一本不错的书也可以看看: 《AngularJS权威指南》
下面大致记录一下自己的AngularJS学习笔记, 以后再慢慢完善。
两个重要概念:
数据双向绑定(Two-way Data Binding)
依赖注入(Dependency Injection)
六个常用指令(Directive):
ng-app
ng-controller
ng-model
ng-view
ng-repeat
ng-click
三个常用参数:
$scope
$http
$routeParams
模块定义:
myApp = angular.module("myApp", ["dependency1", "dependency2"])
myApp.config()
myApp.controller()
myApp.filter()
url路由:
简单全文搜索范例:
转载请注明来自作者: hackstoic
文章首发于: www.hackstoic.com
接触Angular有段时间。 但是一直没有实践。 周末的时候,专门把以前用Juery写的应用用AngularJS重写一遍 。
我的主页参考的文档是官方的入门文档:https://docs.angularjs.org/tutorial (官方入门文档是不错的入门资料,简单而且思路清晰,墙裂推荐!)
如果要深入AngularJS的话,有一本不错的书也可以看看: 《AngularJS权威指南》
下面大致记录一下自己的AngularJS学习笔记, 以后再慢慢完善。
两个重要概念:
数据双向绑定(Two-way Data Binding)
依赖注入(Dependency Injection)
六个常用指令(Directive):
ng-app
ng-controller
ng-model
ng-view
ng-repeat
ng-click
三个常用参数:
$scope
$http
$routeParams
模块定义:
myApp = angular.module("myApp", ["dependency1", "dependency2"])
myApp.config()
myApp.controller()
myApp.filter()
url路由:
myApp.config(['$routeProvider', function($routeProvider){ $routeProvider. when('/', { templateUrl: 'partials/current.html', controller: "AttackListCtrl" }). when('/history/:periodTime', { templateUrl: 'partials/history.html', controller: "AttackHistoryCtrl" }). otherwise({ redirectTo: "/" }); } ]);
简单全文搜索范例:
<div> Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="start_time">Start Time</option> <option value="zone_ip">Zone IP</option> <option value="duration">Duration</option> </select> </div> <tr ng-repeat="attack in logs | filter: query | orderBy: orderProp"> <td>{{attack.zone_ip}}</td> <td>{{attack.circuit}}</td> <td>{{attack.attack_type}}</td> <td>{{attack.attack_status}}</td> <td>{{attack.start_time}}</td> <td>{{attack.end_time}}</td> <td>{{attack.duration}}</td> </tr>
转载请注明来自作者: hackstoic
文章首发于: www.hackstoic.com
相关文章推荐
- AngularJS基础教程之简单介绍
- angularJS 中$attrs方法使用指南
- 简述AngularJS相关的一些编程思想
- AngularJS的一些基本样式初窥
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- angularJS与bootstrap结合实现动态加载弹出提示内容
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
- 举例讲解AngularJS中的模块
- 使用AngularJS处理单选框和复选框的简单方法
- AngularJS+Node.js实现在线聊天室
- AngularJS的内置过滤器详解
- 详解AngularJS中自定义指令的使用
- 使用Raygun来自动追踪AngularJS中的异常
- angularJS结合canvas画图例子
- 教你用AngularJS框架一行JS代码实现控件验证效果