首先笔者有一定的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. 两种路由模式的区别(hash模式,history模式)

    1. hash 带#号的,history不带#号2.hash模式用的hashChange监听路径的变化3.history用的是HTML5相关的API语法 使用pushState => 添加一条历 ...

  2. Azure DevOps（一）基于 Net6.0 的 WPF 程序如何进行持续集成、持续编译

    一,引言 我们是否正在为如何快速的编译.部署客户端应用程序而烦恼?这也是博主最近遇到的问题.目前博主所在公司主要做项目级的定制化开发,多以 C/S 架构的 WPF 程序为主,每次到了协助开发团队给实施 ...

  3. Django框架——手写web框架、wsgiref模块、动静态网页、jinja2模块、主流web框架、Django简介、基本使用、app概念、目录结构、三板斧

    web应用 '''通过浏览器访问的应用程序!!!''' 1.两种模式c/s b/s B/S:browser---------------->server 2.web应用程序的有点 2.1 只需要 ...

  4. Java方法的返回值及注意事项

    方法的返回值 为什么要有带返回值的方法呢? 调用处拿到方法的结果之后,才能根据结果进行下一步操作 带返回值方法的定义和调用: 如果在调用处,要根据方法的结果去编写另一段代码逻辑 为了在调用处拿到方法产 ...

  5. 为什么 Go for-range 的 value 值地址每次都一样？

    原文链接: 为什么 Go for-range 的 value 值地址每次都一样? 循环语句是一种常用的控制结构,在 Go 语言中,除了 for 关键字以外,还有一个 range 关键字,可以使用 fo ...

  6. TCP/IP网络模型

    在网络模型中有分为7层模型(OSI模型)和5层模型和TCP/IP模型 OSI模型将应用层和表示层作为独立的两层,而TCP/IP模型将它们合并为一个应用层. 两种对比来说,TCP/IP模型更符合实际开发 ...

  7. 2021-12-22：回文子串。 给你一个字符串 s ，请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。

    2021-12-22:回文子串. 给你一个字符串 s ,请你统计并返回这个字符串中 回文子串 的数目. 回文字符串 是正着读和倒过来读一样的字符串. 子字符串 是字符串中的由连续字符组成的一个序列. ...

  8. vue全家桶进阶之路6：Vue的安装以及js引入

    1.安装 注意:Vue 不支持 IE8 及以下版本 创建一个文件夹用于下载引入Vue D:\BaiduSyncdisk\vue2 按照最新版本的Vue npm install vue 创建完成后便可以 ...

  9. windows server 2012 2019启动 开机自动启动 项设置

    1.第一种方法:打开运行功能,运行shell:startup,打开管理员用户启动项目录.将想要设置成开机自启的程序快捷方式添加到其中即可,或者删除其中快捷方式即可取消开机自启.2.第二种方法:打开系统 ...

  10. 2023-05-17：一个正整数如果能被 a 或 b 整除，那么它是神奇的。 给定三个整数 n , a , b ，返回第 n 个神奇的数字。 因为答案可能很大，所以返回答案 对 10^9 + 7 取模

    2023-05-17:一个正整数如果能被 a 或 b 整除,那么它是神奇的. 给定三个整数 n , a , b ,返回第 n 个神奇的数字. 因为答案可能很大,所以返回答案 对 10^9 + 7 取模 ...