首先笔者有一定的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. MySQL（一）Linux下MySQL的安装

    Linux下MySQL的安装 1 MySQL的安装 1.1 Linux系统以及工具的准备 这里使用两台CentOS7虚拟机,一台安装8.0版本,另一台克隆的虚拟机安装5.7版本 克隆的虚拟机需要进行配 ...

  2. CRC（Cyclic Redundancy Check）

    CRC(循环冗余校验) [参考资料] https://en.wikipedia.org/wiki/Cyclic_redundancy_check https://wiki.segger.com/CRC ...

  3. java项目 宿舍管理系统 (源码+数据库文件+1w字论文+ppt)

    java项目 宿舍管理系统 (源码+数据库文件+1w字论文+ppt)技术框架:java+springboot+vue+mysql后端框架: Spring Boot.Spring MVC.MyBatis ...

  4. RTSP Server(LIVE555)源码分析(二)-服务器创建

    一. 设置RTSP服务器配置 步骤1.5:rtspServer_Init--->BasicTaskScheduler::createNew()时序图如下: 1)步骤1.54,BasicTaskS ...

  5. Python_14 接口测试报告

    一.查缺补漏 1. 测试用例要复制到pycharm执行的项目中,才能显示 2. 函数用下划线,类用大驼峰 3. pycharm一行显示(不换行): File -> settings-> E ...

  6. InnoSetup打包 添加.NET环境安装

    这是封装出来的针对.NET环境安装的精简流程 根据流程新建一个配置文件 教程都是很简单的,可以参考<InnoSetup 客户端程序打包教程> 添加.NET安装基本的函数及辅助方法 在[Se ...

  7. taro-ui Calendar 修改星期开始时间为星期一（中国格式）

    官网Calendar文档:http://taro-ui.jd.com/#/docs/calendar 日历虽然兼容性很高,小程序也能使用,但扩展性并不高,如果需要更强的样式/自定义,需要复制部分源码到 ...

  8. Django笔记三十四之分页操作

    本文首发于公众号:Hunter后端 原文链接:Django笔记三十四之分页操作 这一篇笔记介绍一下如何在 Django 使用分页. Django 自带一个分页的模块: from django.core ...

  9. KMP字符串匹配问题

    KMP算法 本文参考资料:https://www.zhihu.com/question/21923021 KMP算法是一种字符串匹配算法,可以在 \(O(n+m)\) 的时间复杂度内实现两个字符串的匹 ...

  10. ACID和CAP特性

    文章目录 ACID和CAP理论 ACID CAP ACID和CAP理论 ACID **atomicity(原子性):**所有的事务要么都成功要么都失败, **consistency(一致性):**执行 ...