首先笔者有一定的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. CommunityToolkit.Mvvm8.1 消息通知(4)

    本系列文章导航 https://www.cnblogs.com/aierong/p/17300066.html https://github.com/aierong/WpfDemo (自我Demo地址 ...

  2. 人工智能AI图像风格迁移(StyleTransfer),基于双层ControlNet(Python3.10)

    图像风格迁移(Style Transfer)是一种计算机视觉技术,旨在将一幅图像的风格应用到另一幅图像上,从而生成一幅新图像,该新图像结合了两幅原始图像的特点,目的是达到一种风格化叠加的效果,本次我们 ...

  3. 快速上手Linux核心命令（四）：文件内容相关命令

    @ 目录 前言 cat 合并文件或查看文件内容 more 分页显示文件内容 less 分页显示文件内容 head 显示文件内容头部 tail 显示文件内容尾部 tailf 跟踪日志文件 diff 比较 ...

  4. JUC同步工具CountDownLatch

    CountDownLatch:允许一条或多条线程等待其它线程中的一组操作完成后再继续执行. 在探究CountDownLatch之前,我们知道Thread的join也有类似功能,先看thread的joi ...

  5. java镜子之反射篇

    文章目录 注解 内置注解 元注解 反射 类的初始化 类加载器 双亲委派机制 反射方法的使用 调用类的方法.成员变量.构造器等 总结 注解和反射是Java中非常重要的知识,一些优秀开源的框架都是大量运用 ...

  6. 【Python基础】 什么是函数

    函数是一段可重用的代码块,它接受输入参数并返回输出.函数在程序设计中具有很多优点,如: 代码重用:在程序中可以重复调用相同的代码块,使程序更加简洁.高效. 模块化设计:函数是模块化设计的基本单元,可以 ...

  7. SpringBoot定义优雅全局统一Restful API 响应框架四

    如果没有看前面几篇文章请先看前面几篇 SpringBoot定义优雅全局统一Restful API 响应框架 SpringBoot定义优雅全局统一Restful API 响应框架二 SpringBoot ...

  8. 2022-04-22：给你两个正整数数组 nums 和 target ，两个数组长度相等。 在一次操作中，你可以选择两个 不同 的下标 i 和 j ， 其中 0 ＜= i, j ＜ nums.leng

    2022-04-22:给你两个正整数数组 nums 和 target ,两个数组长度相等. 在一次操作中,你可以选择两个 不同 的下标 i 和 j , 其中 0 <= i, j < num ...

  9. 2022-07-29：一共有n个人，从左到右排列，依次编号0~n-1， h[i]是第i个人的身高， v[i]是第i个人的分数， 要求从左到右选出一个子序列，在这个子序列中的人，从左到右身高是不下降的。

    2022-07-29:一共有n个人,从左到右排列,依次编号0~n-1, h[i]是第i个人的身高, v[i]是第i个人的分数, 要求从左到右选出一个子序列,在这个子序列中的人,从左到右身高是不下降的. ...

  10. 2020-12-23：如何保证MQ的高可用？

    福哥答案2020-12-23: ActiveMQ:Master-Slave 部署方式主从热备,方式包括通过共享存储目录来实现(shared filesystem Master-Slave).通过共享数 ...