AngularJS初级开发笔记-CSDN博客

本文分享了作者从jQuery转向AngularJS的心得体会，并通过一个实际应用的重写过程，介绍了AngularJS的一些核心特性，如数据双向绑定和依赖注入，以及常用的指令和参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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