首页 > 其他分享 >十分钟学会angular

十分钟学会angular

时间:2023-07-16 16:44:13浏览次数:47  
标签:控制器 学会 视图 十分钟 模块 scope app angular

首先笔者有一定的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 指令来绑定点击事件,并调用控制器中对应的函数。

三、待续

标签:控制器,学会,视图,十分钟,模块,scope,app,angular
From: https://www.cnblogs.com/eminer/p/17558080.html

相关文章

  • Angular Component Class 里的成员什么时候应该用 readonly 修饰
    在Angular中,Component类是用来定义组件的基本结构和行为的。在Component类中,成员的修饰符起着控制访问权限和可变性的作用。readonly关键字是一种修饰符,用于声明只读成员,即一旦初始化后就不能再修改其值。使用readonly关键字对成员进行修饰可以带来以下几个好处:防止误......
  • Angular 应用里产品列表行项目点击后跳转到产品明细页面的实现
    需求如标题所示,下面是详细步骤介绍。首先,你需要确保你的环境中已经安装了AngularCLI。如果没有,可以通过以下命令安装:npminstall-g@angular/cli然后你可以创建一个新的Angular项目:ngnewproduct-appcdproduct-app创建一个名为product的组件来显示产品列表:nggenerat......
  • Angular Schematics 实战 - 项目根目录新建一个文件
    AngularSchematics是一个由Angular团队提供的工作流工具,用于在Angular应用程序中自动化开发过程。Schematics可以创建一个新的Angular应用,生成简单或复杂的代码片段,或者修改现有代码以添加新功能或行为。它提供了一个可扩展的方法,允许开发者以一种可维护的方式定制或扩展......
  • 遇到问题一定要学会看日志
    如果你生病了到医院,医生首先会问你哪里不舒服,然后通过你的描述来确认病情,如果还无法确认就得让你去验血或者拍片。最后根据结果来进一步确认你到底有什么病。这个道理大家都明白,其实作为一个运维人,服务器在我们眼里就是我们的病人,而我们就是给它看病的医生。如何确认病情?我们自然......
  • 学会这5个关键要素,成为原型图制作的专家!
    在当今的软件开发和用户体验设计中,原型图扮演着至关重要的角色。它是将想法转化为可视化概念的关键步骤,旨在帮助设计师、开发人员和企业更好地理解和验证产品的功能、交互和用户流程。本文将深入探讨制作原型图的五个关键要素,以帮助你在设计过程中更加高效和专业。 在介绍制作......
  • 关于 Angular 应用的多语言设置问题
    考虑下面这段代码:importlocaleDefrom'@angular/common/locales/de';importlocaleJafrom'@angular/common/locales/ja';importlocaleZhfrom'@angular/common/locales/zh';这段代码从@angular/common/locales包中导入了三个不同的语言环境(locale):德语(local......
  • 一文学会TextureID渲染到Surface
    最近遇到一个需求,要求将一个GL_TEXTURE_2D类型的纹理ID写入到ImageReader生成的Surface中。其实这个需求与我之前写过的一篇文章一文学会MediaCodeC与OpenGL录制mp4视频需求比较接近,只需要对该案例源码进行一些改造即可。在正式介绍实现之前,需先明确:什么是android.view.Su......
  • 【项目实战】十分钟学习完 Spring Boot 拦截器
    ......
  • 学会使用 Postman 环境变量,让接口测试更加高效
    在 Postman 中,用Environments来管理环境变量。我们在开发的过程中,往往会用到多个环境:开发环境,测试环境,UAT环境,生产环境等。我们要调用不同环境的API时,只需切换Postman的Environment即可。下面,我们来具体说下Postman环境变量的使用方法。知识扩展:Postman环境设置介绍......
  • 5分钟学会img标签加载图片404错误解决方案
      在开发中,使用<imgsrc="/img/yys.png"/>加载图片时,会有404错误,也就是图片未找到问题。  现将解决办法 总结如下:  当图片未找到或者404时,就会触发<img/>标签的 onerror属性显示其中的图片。1、直接拼写路径方式:<imgsrc="img/yys.png"onerror="javascript......