AngularJS初级开发笔记

自从了解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路由：

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