AngularJS 学习笔记 （三）

最新推荐文章于 2022-12-09 16:14:24 发布
最新推荐文章于 2022-12-09 16:14:24 发布
阅读量421 收藏
点赞数
分类专栏： AngularJS 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aprildove/article/details/50484811
版权

angularjs MVC  $scope作用域 AngularJS模块的run方法，以及依赖注入中代码压缩问题


1、AngularJS MVC

model：数据模型层
view：视图层，负责展示
controller：业务逻辑和控制逻辑

优点：代码模块化 代码逻辑比较清晰、可移植性高、后期维护方便，代码复用，代码模块越来越大的时候，切分职责是大势所趋。
缺点：运行效率稍低一些


2、AngularJS $scope作用域
 
$scope多控制器单独作用域

<!doctype html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>无标题文档</title>
  <script type="text/javascript" src="angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
        {{name}}
        </div>
    <div ng-controller="secondController">
        {{name}}
        </div>
   </div>
   <script type="text/javascript">
      var app=angular.module("myApp",[]);
      app.controller('firstController',function($scope){
        $scope.name='zhangsan';   
     });
      app.controller('secondController',function($scope){
         $scope.name='lisi';
    })
  </script>
  </body>
</html>


2  $rootScope服务
  
<!doctype html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>无标题文档</title>
  <script type="text/javascript" src="angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
        姓名：{{name}}
        年龄：{{age}}
        </div>
    <div ng-controller="secondController">
        姓名：{{name}}
        年龄：{{age}}
        </div>
   </div>
   <script type="text/javascript">
      var app=angular.module("myApp",[]);
      app.controller('firstController',function($scope, $rootScope){
        $scope.name='zhangsan';   
        $rootScope.age='30';
     });
      app.controller('secondController',function($scope){
         $scope.name='lisi';
    })
  </script>
  </body>
</html>


控制器继承


<!doctype html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>无标题文档</title>
  <script type="text/javascript" src="angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
        {{name}}
        {{age}}
        {{sex}}
        </div>
    <div ng-controller="secondController">
        {{name}}
        {{age}}
        {{sex}}
        </div>
   </div>
   <script type="text/javascript">
      var app=angular.module("myApp",[]);
      app.controller('firstController',function($scope){
        $scope.name='zhangsan';   
        $scope.age='40';
     });
      app.controller('secondController',function($scope){
         $scope.name='lisi';
         $scope.sex='男';
    })
  </script>
  </body>
</html>

依赖注入中代码压缩的问题
 
 
<!doctype html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>无标题文档</title>
  <script type="text/javascript" src="angular.min.js"></script>
  </head>
  <body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
        {{name}}
        {{age}}
        {{sex}}
        </div>
    <div ng-controller="secondController">
        {{name}}
        {{age}}
        {{sex}}
        </div>
   </div>
   <script type="text/javascript">
      var app=angular.module("myApp",[]);
      app.controller('firstController',['$scope',function($scope){
        $scope.name='zhangsan';   
        $scope.age='40';
     });
      app.controller('secondController',['$scope',function($scope){
         $scope.name='lisi';
         $scope.sex='男';
    })
  </script>
  </body>
</html>

4 AngularJS模块的run方法
 run方法初始化全局的数据，只对全局作用域起作用 如$rootScope

<script type="text/javascript">
   var m1=angular.module('myApp',[]);
   m1.run(['$rootScope',function($rootScope){
     $rootScope.name='hello'
   }]);
  console.log(m1);
 </script>




aprildove
关注
专栏目录
AngularJS学习笔记
08-26
### AngularJS学习笔记知识点解析 #### 一、AngularJS简介 AngularJS是由Google推出的一款JavaScript库，虽然在本文档中作者将其称为“工具”，但实际上它更接近于一个完整的前端开发框架。AngularJS的设计理念...
JS AngularJS 学习笔记
03-26
AngularJS中的MVC架构将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。模型存储应用的数据，视图负责展示这些数据，而控制器处理用户交互，更新模型并反映到视图上。这种分层结构...
Angularjs学习笔记
瓜皮伦的博客
12-09 310
​ 先引入表单的一些内置依赖import {//构造函数里注入FormBuilder constructor(private fb : FormBuilder) {} //错误提醒数据 formErrors = {//在组件类的初始化函数里对表单中的元素的校验进行定义，并调用表单的valueChanges方法，检测表单的输入的变化 ngOnInit() : void {if(!
AngularJS学习笔记三 作用域
muxin_hgk的博客
02-13 195
 1.  AngularJS作用域      AngularJS作用域本质上就是一个普通的JavaScript对象，和普通的JavaScript对象一样，都可以在作用域中增加属性或者方法，不同的是我们不需要手动去构建作用域对象。    AngularJS程序中作用域的主要功能是存放模型数据，在控制器中，我们可以修改作用域中的模型数据或者在作用域中增加新的模型数据，然后在视图中通过AngularJS...
angularjs学习笔记三——AngularJS与MVC模式
FUNCO_小风
05-29 1612
本文主要解决一下几个问题： 一、 什么是MVC 二、 MVC优点缺点 三、 AngularJS的MVC是怎样的 四、 来个简单的示例
angularjs学习笔记
二枫的代码小窝
07-21 679
angularJS笔记
angularJs 学习笔记
dengqian9787的博客
06-06 129
ng-app="" 定义了angularJS的使用范围 eg: ng-model="变量" 定义变量名 eg: ng-init 指令初始化AngularJs应用程序变量 eg: ng-bind 指令把变量绑定到某个段落的innerHTML eg: ng-repeat 指令会重复一个html元素 eg: 依次输出names数组中的值 ng-disable...
AngularJs 基础学习笔记
子灬丶逾
02-17 475
目录AngularJsAngularJs的模块AngularJs表达式AngularJs双向绑定AngularJs初始化指令AngularJs控制器循环数组AngularJs循环对象数组AngularJs内置对象总结 AngularJs AngularJS 是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。 AngularJS 是以一个 JavaScript 文件形式...
angularjs学习笔记三——directive
weixin_30622181的博客
10-08 90
AngularJS 通过被称为指令的新属性来扩展 HTML。 正如你所看到的，AngularJS 指令是以ng作为前缀的 HTML 属性。 HTML5 允许扩展的（自制的）属性，以data-开头。 AngularJS 属性以ng-开头，但是您可以使用data-ng-来让网页对 HTML5 有效。 以下列举了一些指令，并不一定常用，但是都有用！ 有些指令...
angularJS学习笔记
qq_35603868的博客
08-08 208
今天开始学习angularJS
angularjs私人学习笔记
奕辰杰的博客
09-07 329
俗话说“好记性不如烂笔头”，编程的海洋如此的浩大，养成做笔记的习惯是成功的一步！ 此笔记主要是angularjs1.6.2版本的笔记，并且笔记都是博主自己一字一字编写和记录，有错误的地方欢迎大家指正。 一、基础知识： 1、angularjs  是一个 JavaScript 框架。它可通过 标签添加到 HTML 页面。angularjs 通过 指令 扩展了 H
angularjs学习笔记之完整的项目结构
11-24
【AngularJS 学习笔记之完整的项目结构】 在学习AngularJS的过程中，理解并构建一个完整的项目结构至关重要。项目结构清晰，能帮助开发者更好地组织代码，提高开发效率和维护性。以下是一个典型的AngularJS项目结构...
win64 CC2022.zip
09-21
SmartTools InDesign插件
深度学习课程的课程设计-------基于ResNet优化模型的阿尔茨海默症的识别.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
机械设计课程设计说明书_带式输送机传送装置_西北工业大学.doc
最新发布
09-21
机械设计课程设计说明书_带式输送机传送装置_西北工业大学.doc
风格化欧洲城镇建筑场景模型：Modular European Town v1.1
09-21
使用 “模块化欧洲小镇” 包来改变你的游戏世界！这个套装提供了你设计一个充满活力的低多边形城市所需的一切。 套装包括： 模块化建筑：各种结构可创造多样化的建筑设计。 自然元素：树木、灌木丛和植物，以增加你的小镇的绿色景观。 基础设施：道路、人行道、边界和墙壁，以构建一个逼真的布局。 不同的道具：很多物品，如消防栓、路灯、咖啡馆桌椅、垃圾桶、长椅等等。 所有模型都采用低多边形美学制作，确保出色的性能和独特的视觉风格。这个套装非常适合所有平台上的游戏：移动设备、桌面电脑和虚拟现实。它易于使用且高度可定制，让你轻松构建自己独特的欧洲风格小镇。用 “模块化欧洲小镇” 将你的愿景变为现实！（解释说明：“lowpoly” 即低多边形，是一种在游戏和数字艺术中常用的风格，以较少的多边形数量来呈现模型，通常具有简洁的外观和较好的性能表现。
机械工艺课程设计 挂轮架轴自由锻工艺设计(全套图纸).doc
09-21
机械工艺课程设计 挂轮架轴自由锻工艺设计(全套图纸).doc
nvm-window v1.1.12
09-21
nvm-window v1.1.12
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值