正文

新手必看！Angular JS入门教程全攻略，从基础到实战案例详解

/0 浏览量
0508

在当今的前端开发领域，Angular JS 是一个备受瞩目的框架。它由 Google 开发，旨在简化动态 web 应用的开发过程。对于新手来说，Angular JS 可能显得有些复杂，但不用担心，本教程将带你从基础开始，逐步深入，直至实战案例的详解。

第一部分：Angular JS 基础知识

1.1 什么是 Angular JS？

Angular JS 是一个开源的前端 JavaScript 框架，它通过双向数据绑定和依赖注入等机制，极大地简化了前端开发。

1.2 安装 Angular JS

首先，你需要下载 Angular JS 的库文件。你可以从 Angular 官网（https://angularjs.org/）下载最新版本的 Angular JS。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

1.3 Angular JS 模块和控制器

Angular JS 应用由模块（Module）和控制器（Controller）组成。模块用于组织代码，而控制器用于处理数据。

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.name = "Angular JS";
});

1.4 数据绑定

Angular JS 提供了双向数据绑定功能，这意味着当数据发生变化时，视图会自动更新，反之亦然。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myController">
  <p>{{name}}</p>
  <input type="text" ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.name = "World";
});
</script>

</body>
</html>

第二部分：进阶知识

2.1 指令（Directives）

指令是 Angular JS 中的一种特殊函数，它们可以扩展 HTML 语法。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="x in names">
    {{ x.name }}
  </div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.names = [{name:"John"}, {name:"Jane"}, {name:"Doe"}];
});
</script>

</body>
</html>

2.2 服务（Services）

服务是 Angular JS 中的全局函数，它们可以在控制器和其他服务中使用。

app.service('myService', function() {
  this.hello = function() {
    return "Hello";
  };
});

app.controller('myController', function($scope, myService) {
  $scope.message = myService.hello();
});

第三部分：实战案例详解

3.1 实战案例：待办事项列表

在这个案例中，我们将创建一个简单的待办事项列表，用户可以添加、删除和标记待办事项为完成。

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myController">
  <h2>待办事项列表</h2>
  <ul>
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done">{{ todo.text }}
      <button ng-click="remove(todo)">删除</button>
    </li>
  </ul>
  <h3>完成的待办事项</h3>
  <ul>
    <li ng-repeat="todo in todos | filter: {done: true}">
      {{ todo.text }}
    </li>
  </ul>
  <h3>未完成的待办事项</h3>
  <ul>
    <li ng-repeat="todo in todos | filter: {done: false}">
      {{ todo.text }}
    </li>
  </ul>
  <h3>添加待办事项</h3>
  <input type="text" ng-model="newTodo.text" placeholder="添加待办事项">
  <button ng-click="add()">添加</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.todos = [];
  $scope.add = function() {
    if ($scope.newTodo.text) {
      $scope.todos.push({text: $scope.newTodo.text, done: false});
      $scope.newTodo.text = '';
    }
  };
  $scope.remove = function(todo) {
    var index = $scope.todos.indexOf(todo);
    if (index !== -1) {
      $scope.todos.splice(index, 1);
    }
  };
});
</script>

</body>
</html>

通过以上教程，你应该对 Angular JS 有了一个基本的了解。记住，实践是学习的关键，多尝试，多实践，你会越来越熟练。祝你学习愉快！

-- 展开阅读全文 --