首先笔者有一定的vue基础，但是遇到了含有angular的应用，因此需要学习angular的应用，在学习过程中将自己的学习步骤给一一记录下来，因此假设读者也是具有html及js的基础，在此基础上可以跟着我快速学习并掌握angular的基本使用方法。

一、angular的基本介绍：

Angular是一个用于构建Web应用程序的JavaScript框架。它采用了MVC（Model-View-Controller）架构模式，并提供了许多工具和功能，用于开发可维护、可扩展和高效的前端应用程序。安装分为两种，一种是利用node.js框架，另一种是直接在html代码上插入script引用文件。安装由于网上相应介绍太多，不再追溯，咱们下面直接以问题解决的形式来进入正题。

二、经常看到的两句代码：let app = angular.module('myApp',[]); 和app.controller('mainCtr',function( $secope ){})，这两句的用途及区别和应用场景分别是什么？

第一句代码：let app = angular.module('myApp',[]); 这行代码创建了一个名为 "myApp" 的 AngularJS 模块，并将其赋值给变量 app。模块是 AngularJS 应用的容器，它用于组织代码和定义应用的不同组件，如控制器、服务、指令等。在这个例子中，'myApp' 是模块的名称，[] 是一个依赖数组，用于定义该模块所依赖的其他模块。如果没有依赖的话，可以传入一个空数组。

第二句代码：app.controller('mainCtr', function($scope) {}) 这行代码定义了一个名为 "mainCtr" 的控制器，并将其绑定到模块 app 上。控制器是 AngularJS 中的一种组件，它负责处理视图与模型之间的交互逻辑。在这个例子中，'mainCtr' 是控制器的名称，function($scope) {} 是控制器的构造函数。控制器的构造函数接收一个名为 $scope 的参数，它是一个 AngularJS 服务，用于在控制器和视图之间传递数据和状态。

这两句代码的区别和用途如下：

  1. angular.module('myApp', []) 用于创建一个 AngularJS 模块，并定义模块的名称和依赖关系。模块可用于组织应用的不同组件，并提供命名空间，以避免全局作用域中的命名冲突。模块还可以用于将应用拆分为多个模块，以实现模块化的开发和代码复用。
  2. app.controller('mainCtr', function($scope) {}) 用于在指定的模块上定义一个控制器。控制器负责处理视图的逻辑，并将模型数据绑定到视图上。通过在控制器的构造函数中注入 $scope 服务，可以在控制器中访问和操作视图的数据和状态。

这两句代码的应用场景如下：

  • 创建模块时，你可以在依赖数组中列出其他模块的名称，以便在当前模块中使用它们提供的功能。这样，你可以将应用拆分为多个模块，每个模块负责不同的功能区块。这种模块化的开发方式有助于代码的组织和维护。
  • 定义控制器时，你可以根据不同的视图或组件创建不同的控制器，每个控制器负责特定的功能。控制器中的逻辑可以与视图进行交互，处理用户输入、调用服务、更新数据等操作。通过控制器，你可以将应用的逻辑划分为更小的单元，并使其更易于理解和维护。

总结：创建模块是为了组织代码和定义应用的不同组件，而定义控制器是为了处理视图的逻辑和数据绑定。模块提供了命名空间和模块化开发的能力，而控制器负责处理视图的交互逻辑。这些概念和用法是 AngularJS 框架的核心特性，有助于构建结构清晰、可维护的应用程序。

当使用 Angular 框架进行开发时，模块和控制器是非常常见的概念。下面我将为你提供一个简单的例子来说明模块和控制器的作用和用法。

假设我们正在开发一个简单的任务列表应用，其中包含以下功能：

  • 显示任务列表
  • 添加新任务
  • 标记任务为已完成
  • 删除任务

首先，我们需要创建一个 Angular 模块来组织我们的应用。我们可以将其命名为 "TaskApp"，并将其定义为一个没有依赖的模块。在模块中，我们将定义任务列表的数据和功能。以下是模块的代码

// 创建一个名为 "TaskApp" 的模块

var app = angular.module('TaskApp', []);

// 定义一个控制器来处理任务列表

app.controller('TaskController', function($scope) {

  // 初始化任务列表

  $scope.tasks = [

    { name: 'Buy groceries', completed: false },

    { name: 'Do laundry', completed: true },

    { name: 'Clean the house', completed: false }

  ];

  // 添加新任务

  $scope.addTask = function(newTask) {

    $scope.tasks.push({ name: newTask, completed: false });

    $scope.newTask = ''; // 清空输入框

  };

  // 标记任务为已完成

  $scope.completeTask = function(task) {

    task.completed = true;

  };

  // 删除任务

  $scope.deleteTask = function(task) {

    var index = $scope.tasks.indexOf(task);

    $scope.tasks.splice(index, 1);

  };

});

在上面的代码中，我们创建了一个名为 "TaskApp" 的模块，并将其赋值给变量 app。然后，我们定义了一个名为 "TaskController" 的控制器，并将其绑定到模块 app 上。

控制器的构造函数中注入了 $scope 服务，它用于在控制器和视图之间共享数据和状态。我们将任务列表存储在 $scope.tasks 中，并初始化了一些示例任务。

控制器还定义了一些功能：

  • addTask 函数用于添加新任务到任务列表中。
  • completeTask 函数用于将任务标记为已完成。
  • deleteTask 函数用于删除任务。

现在，我们可以在 HTML 中使用这个模块和控制器来构建任务列表应用的视图。以下是一个简单的 HTML 示例：

<!DOCTYPE html>

<html ng-app="TaskApp">

<head>

  <title>Task List App</title>

  <script src="angular.js"></script>

  <script src="app.js"></script>

</head>

<body>

  <div ng-controller="TaskController">

    <h1>Task List</h1>

    <ul>

      <li ng-repeat="task in tasks">

        <input type="checkbox" ng-model="task.completed">

        <span ng-class="{ 'completed': task.completed }">{{ task.name }}</span>

        <button ng-click="completeTask(task)">Complete</button>

        <button ng-click="deleteTask(task)">Delete</button>

      </li>

    </ul>

    <form ng-submit="addTask(newTask)">

      <input type="text" ng-model="newTask" placeholder="New Task" required>

      <button type="submit">Add</button>

    </form>

  </div>

</body>

</html>

在上面的示例中，我们在 <html> 标签中使用了 ng-app="TaskApp" 来指定我们的应用使用 "TaskApp" 模块。然后，在包含任务列表的 <div> 元素上使用了 ng-controller="TaskController" 来指定使用 "TaskController" 控制器。

在控制器的作用下，我们使用了 Angular 的指令来循环遍历任务列表，并在页面上显示任务的名称、复选框、完成和删除按钮。我们还使用了 ng-click 指令来绑定点击事件，并调用控制器中对应的函数。

三、待续

十分钟学会angular的更多相关文章

  1. PHP学习过程_Symfony_(3)_整理_十分钟学会Symfony

    这篇文章主要介绍了Symfony学习十分钟入门教程,详细介绍了Symfony的安装配置,项目初始化,建立Bundle,设计实体,添加约束,增删改查等基本操作技巧,需要的朋友可以参考下 (此文章已被多人 ...

  2. 十分钟学会 tmux

    tmux 是一款终端复用命令行工具,一般用于 Terminal 的窗口管理.在 macOS 下,使用 iTerm2 能应付绝大多数窗口管理的需求. 如上图所示,iTerm2 能新建多个标签页(快捷键 ...

  3. 快速入门：十分钟学会Python

    初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...

  4. Python十分钟学会

    初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...

  5. 快速入门：十分钟学会Python（转）

    初试牛刀 假设你希望学习Python这门语言,却苦于找不到一个简短而全面的入门教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手册(Cheat ...

  6. 高速入门：十分钟学会Python

    初试牛刀 如果你希望学习Python这门语言.却苦于找不到一个简短而全面的新手教程.那么本教程将花费十分钟的时间带你走入Python的大门.本文的内容介于教程(Toturial)和速查手冊(Cheat ...

  7. 十分钟学会Markdown基本语法

    文章目录 Markdown 语法 一.标题 这是一级标题 这是二级标题 这是三级标题 这是四级标题 这是五级标题 这是六级标题 二.字体 三.引用 四.分割线 五.图片 六.超链接 七.列表 八.表格 ...

  8. 零基础十分钟学会用git在coding.net上传(pull)和push

    ---恢复内容开始--- 对于入门者来说,特别是刚刚接触计算机的人来说,模仿是最快的学习方式了,先能够会使用(对于初学者来说,这种使用新事物的感觉很能爽的)至于原理,以后再说.下面先让初学者快速的学会 ...

  9. 十分钟学会mysql数据库操作

    Part1:写在最前 MySQL安装的方式有三种: ①rpm包安装 ②二进制包安装 ③源码安装 这里我们推荐二进制包安装,无论从安装速度还是用于生产库安装环境来说,都是没问题的.现在生产库一般采用My ...

  10. 十分钟学会写shell脚本

    大家好!我是handsomecui,下面我为大家讲解一下shell脚本的写法,讲的不好的地方,欢迎大家留言拍砖. 1.在linux下会写shell脚本是非常重要的,下面我参照例子给大家展示几个脚本,顺 ...

随机推荐

  1. 【Vue项目】商品汇前台（一）组件拆分+请求封装

    写在最前面 之前学完vue基础之后,一直想做一下前端的项目,但是自己写了一点前后端分离的项目发现自己前端写的是真的乱,所以趁着假期的空闲做一下尚硅谷商品汇的前后台项目,争取这周写完前台,然后这个月再写 ...

  2. 【迭代器设计模式详解】C/Java/JS/Go/Python/TS不同语言实现

    简介 迭代器模式(Iterator Pattern),是一种结构型设计模式.给数据对象构建一套按顺序访问集合对象元素的方式,而不需要知道数据对象的底层表示. 迭代器模式是与集合共存的,我们只要实现一个 ...

  3. Azure DevOps（二）Azure Pipeline 集成 SonarQube 维护代码质量和安全性

    一,引言 对于今天所分析的 SonarQube,首先我们得了解什么是 SonarQube ? SonarQube 又能帮我们做什么?我们是否在项目开发的过程中遇到人为 Review 代码审核规范?带着 ...

  4. [Pytorch框架] 5.1 kaggle介绍

    文章目录 5.1 kaggle介绍 5.1.1 Kaggle 平台简介 比赛介绍 5.1.2 Kaggle板块介绍 Data Rules Team Kernels Discussion Leaderb ...

  5. 关于ObservableCollection的更新与不更新分析

    因为最近在WPF项目中,遇到ObservableCollection这个属性的频繁使用,一个一个坑跳过来,今天看到这个贴子 玩转INotifyPropertyChanged和ObservableCol ...

  6. Pwn系列之Protostar靶场 Stack1题解

    (gdb) disasse main Dump of assembler code for function main: 0x08048464 <main+0>: push ebp 0x0 ...

  7. KaiOS 2.5.X 使用 WebIDE 安装以及调试第三方应用程序

    本教程将展示使用 Waterfox Classic 安装为 KaiOS 2.5.x 设计的应用,同时我们也非常推荐使用它来进行安装和调试应用. 本教程本身不会对手机产生任何损害,但请注意,你必须信任你 ...

  8. wsl下的python环境管理

    开头 之前一直都在用python解释器和virtualenv来管理python的虚拟环境,但是被老大吐槽不好用之后,换了一种新的管理方式,那就是 pyenv + pyenv-virtualenv的使用 ...

  9. Django4全栈进阶之路14 项目实战（用户管理）：base.html基础模板设计

    在 Django 中,我们可以使用模板继承来避免代码的重复.模板继承是指我们可以在一个模板中定义一些公共的 HTML 代码,然后在其他模板中继承这个基础模板,并根据需要添加或覆盖一些内容. 通常情况下 ...

  10. Spring Cloud开发实践(五): Consul - 服务注册的另一个选择

    目录 Spring Cloud开发实践(一): 简介和根模块 Spring Cloud开发实践(二): Eureka服务和接口定义 Spring Cloud开发实践(三): 接口实现和下游调用 Spr ...