Angular学习笔记(一)

Angular学习笔记(一)

1. Angular简介

AngularJS 是一个 JavaScript 框架。它可通过 script标签添加到 HTML 页面。
在线引用链接:
`<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>`
各个版本下载:[点我下载](https://github.com/angular/angular.js/releases)

2. AngualrJS表达式

AngularJS 表达式写在双大括号内:{{ expression }},它们可以包含文字、运算符和变量。
<div ng-app="" ng-init="a=1;b=10;firstName='John';lastName='Doe'">
     <p>{{ 5 + 5 }}</p>  //输出10
     <p>{{ a*b }}</p>	//输出10
     <p>姓名: {{ firstName + " " + lastName }}</p>
</div>

3. AngularJS指令

Angular指令带有ng-前缀。
ng-app初始化一个 AngularJS 应用程序;
ng-init 指令初始化应用程序数据;
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
<div ng-app="" ng-init="firstName='John'">
 
     <p>在输入框中尝试输入:</p>
     <p>姓名:<input type="text" ng-model="firstName"></p>
     <p>你输入的为: {{ firstName }}</p>
 
</div>

ng-repeat 指令会重复一个 HTML 元素,可以用来循环数组。

<div ng-app="" ng-init="items=['Jani','Hege','Kai']">
  <p>使用 ng-repeat 来循环数组</p>
  <ul>
    <li ng-repeat="x in items">
      {{ x }}
    </li>
  </ul>
</div>

4. AngualarJS模型

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name = "John Doe";
});
</script>
ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

5. AngularJS作用域

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带,是一个对象,有可用的方法和属性。
<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>

</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
    $scope.carname = "Volvo";
});
</script>

当在控制器中添加 $scope 对象时,视图 (HTML) 可以获取了这些属性。

6. AngularJS 控制器

AngularJS 应用程序被控制器控制。
ng-controller 指令定义了应用程序控制器。
控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
<div ng-app="myApp" ng-controller="myCtrl">: <input type="text" ng-model="firstName"><br>: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

******控制器方法*******

<div ng-app="myApp" ng-controller="personCtrl">: <input type="text" ng-model="firstName"><br>: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
});
</script>

## ```7. AngularJS 事件

 - 使用ng-click进行点击事件绑定,ng-click="方法“;
 - ng-hide="true" 隐藏HTML 元素;
 - ng-show="true" 显示HTML元素。

	

```javascript
<div ng-app="" ng-controller="myCtrl">

<button ng-click="count = count + 1">点我!</button>

<p>{{ count }}</p>

</div>

8. AngularJS 模块

  • 模块定义了一个应用程序。

  • 模块是应用程序中不同部分的容器。

  • 模块是应用控制器的容器。

  • 控制器通常属于一个模块。

创建模块

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>
已标记关键词 清除标记
相关推荐
<p> <strong><span style="font-size:16px;color:#003399;">会用Python分析金融数据 or 金融行业会用Python</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">职场竞争力更高</span></strong> </p> <p> <br /> </p> <p> <img src="https://img-bss.csdnimg.cn/202012231042221925.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;color:#003399;">Python金融数据分析入门到实战</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">Get√金融行业数据分析必备技能</span></strong> </p> <p> <img src="https://img-bss.csdnimg.cn/202012231042438069.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;color:#003399;">以股票量化交易为应用场景</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">完成技术指标实现的全过程</span></strong> </p> <p> <br /> </p> <p> <span style="font-size:14px;">课程选取股票量化交易为应用场景,由股票数据的获取、技术指标的实现,逐步进阶到策略的设计</span><span style="font-size:14px;">和回测,由浅入深、由技术到思维地为同学们讲解Python金融数据分析在股票量化交易中的应用</span><span style="font-size:14px;">。</span> </p> <p> <br /> </p> <p> <span style="font-size:14px;"><br /> </span> </p> <p> <img src="https://img-bss.csdnimg.cn/202012231043183686.png" alt="" /> </p> <p> <br /> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;color:#003399;">以Python为编程语言</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">解锁3大主流数据分析工具</span></strong> </p> <p> <br /> </p> <p> <span style="font-size:14px;">Python做金融具有先天优势,课程提取了Python数据分析工具NumPy、Pandas及可视化工具</span><span style="font-size:14px;">Matplotlib的关键点详细讲解,帮助同学掌握数据分析的关键技能。</span> </p> <p> <img src="https://img-bss.csdnimg.cn/202012231043472858.png" alt="" /> </p> <p> <strong><span style="font-size:16px;color:#003399;"><br /> </span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;">2大购课福利</span></strong> </p> <p> <strong><span style="font-size:16px;color:#003399;"><br /> </span></strong> </p> <p> <img src="https://img-bss.csdnimg.cn/202012300628195864.png" alt="" /> </p>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页