首先笔者有一定的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. 【干货】Vue2.x 组件通信方式详解，这篇讲全了

    前言 vue是数据驱动视图更新的框架, 我们平时开发,都会把页面不同模块拆分成一个一个vue组件, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在v ...

  2. Vue3实现组件级基类的几种方法

    Vue3的组件有三种代码组织方式 纯Option API (不含setup) option API + setup 纯 setup (即composition API) 对于这三种形式,设置基类的方法 ...

  3. YOLO1论文中文版

    文章目录 YOLO1中文版 摘要 1. 引言 2. 统一检测 2.1 网络设计 2.2 训练 2.3 推断 2.4 YOLO的限制 3. 与其它检测系统的比较 4. 实验 4. 1 与其它实时系统的比 ...

  4. 浅谈如何使用 github.com/kardianos/service

    在实际开发过程中,有时候会遇到如何编写Go开机自启服务的需求,在linux中我们可以使用systemd来进行托管,windows下可以通过注册表来实现,mac下可以通过launchd来实现,上面的方式 ...

  5. 自动化部署(Gitlab)

    小程序可持续化自动部署 一.安装gitlab-runner 官方地址:https://docs.gitlab.com/runner/install/ windows安装如下: nodejs的环境变量一 ...

  6. 《 Istio 权威指南 》新著重磅发行！华为云云原生团队匠心力作

    摘要:由 Istio社区指导委员会成员和华为云云原生团队联合编著的云原生服务网格书籍< Istio 权威指南>重磅上市 本文分享自华为云社区<< Istio 权威指南 > ...

  7. 2023-03-05：ffmpeg推送本地视频至lal流媒体服务器（以RTMP为例），请用go语言编写。

    2023-03-05:ffmpeg推送本地视频至lal流媒体服务器(以RTMP为例),请用go语言编写. 答案2023-03-05: 使用 github.com/moonfdd/ffmpeg-go 库 ...

  8. 2023-01-01：remix-ide是浏览器的ide，官方已经提供地址，但是需要连接外网。如果是内网，需要自己在服务器里搭建remix-ide；另一种方式是用remix-ide的桌面版。这里只讨论

    2023-01-01:remix-ide是浏览器的ide,官方已经提供地址,但是需要连接外网.如果是内网,需要自己在服务器里搭建remix-ide:另一种方式是用remix-ide的桌面版.这里只讨论 ...

  9. 2022-12-07：删除重复的电子邮箱。删除重复数据后，id=3的数据被删除。请问sql语句如何写？ DROP TABLE IF EXISTS `person`； CREATE TABLE `per

    2022-12-07:删除重复的电子邮箱.删除重复数据后,id=3的数据被删除.请问sql语句如何写? DROP TABLE IF EXISTS `person`; CREATE TABLE `per ...

  10. 2020-11-15：手写代码：行有序、列也有序的二维数组中，找num，找到返回true，否则false？

    福哥答案2020-11-15: 此题来源于leetcode240和剑指 Offer(第 2 版)面试题4.1.线性查找.从二维数组的坐下角开始查找.如果当前元素等于目标值,则返回 true.如果当前元 ...