【Angular】Angular基础(1)

冉高寒
2023-12-01

Angular基础

ng-app 指令定义一个 AngularJS 应用程序,一个HTML文档只出现一次,<div> 元素是 AngularJS 应用程序 的"所有者"。

ng-model 指令把元素值(比如输入域的值)绑定到应用程序。

ng-bind 指令把应用程序数据绑定到 HTML 视图。

ng-init 指令初始化 AngularJS 应用程序变量。

ng-repeat 指令用在一个对象数组上。

可使用的CDN:

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

 

1.最简单的绑定。

1 <div ng-app="">
2      <p>名字 : <input type="text" ng-model="name"></p>
3      <h1>Hello {{name}}</h1>
4 </div>

 

2.创建自定义的指令:

使用 .directive 函数来添加自定义的指令

 1 <body ng-app="myApp">
 2 
 3 <runoob-directive></runoob-directive>
 4 
 5 <script>
 6 var app = angular.module("myApp", []);
 7 app.directive("runoobDirective", function() {
 8     return {
 9         template : "<h1>自定义指令!</h1>"
10     };
11 });
12 </script>

 

3.使用ng-init进行初始化。

1 <div ng-app="" ng-init="firstName='John';lastName='Doe'">
2  
3 <p>姓名: {{ firstName + " " + lastName }}</p>
4  
5 </div>

 

4.使用controller进行初始值绑定。

 1 <div ng-app="myApp" ng-controller="myCtrl">
 2 
 3 名: <input type="text" ng-model="firstName"><br>
 4 姓: <input type="text" ng-model="lastName"><br>
 5 <br>
 6 姓名: {{firstName + " " + lastName}}
 7 
 8 </div>
 9 
10 <script>
11 var app = angular.module('myApp', []);
12 app.controller('myCtrl', function($scope) {
13     $scope.firstName= "John";
14     $scope.lastName= "Doe";
15 });
16 </script>

5.使用Object.name对对象属性值进行提取。

1 <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
2  
3 <p>姓为 <span ng-bind="person.lastName"></span></p>
4  
5 </div>

6.使用Array[index]对数组下标值进行提取。

1 <div ng-app="" ng-init="points=[1,15,19,2,40]">
2  
3 <p>第三个值为 {{ points[2] }}</p>
4  
5 </div>

7.数据的绑定。

 1 <div ng-app="" ng-init="quantity=1;price=5">
 2  
 3 <h2>价格计算器</h2>
 4  
 5 数量: <input type="number"    ng-model="quantity">
 6 价格: <input type="number" ng-model="price">
 7  
 8 <p><b>总价:</b> {{ quantity * price }}</p>
 9  
10 </div>

8.ng-repeat重复数组元素。

1 <div ng-app="" ng-init="names=['Jani','Hege','Kai']">
2   <p>使用 ng-repeat 来循环数组</p>
3   <ul>
4     <li ng-repeat="x in names">
5       {{ x }}
6     </li>
7   </ul>
8 </div>

9.ng-repeat重复对象中元素。

 1 <div ng-app="" ng-init="names=[
 2 {name:'Jani',country:'Norway'},
 3 {name:'Hege',country:'Sweden'},
 4 {name:'Kai',country:'Denmark'}]">
 5  
 6 <p>循环对象:</p>
 7 <ul>
 8   <li ng-repeat="x    in names">
 9     {{ x.name + ', ' + x.country }}
10   </li>
11 </ul>
12  
13 </div>

10.验证邮箱的合法性。

1 <form ng-app="" name="myForm">
2     Email:
3     <input type="email" name="myAddress" ng-model="text">
4     <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
5 </form>

11.编辑邮箱地址,判断状态的改变。

 1 <form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'">
 2 
 3 Email:
 4 <input type="email" name="myAddress" ng-model="myText" required>
 5 <p>编辑邮箱地址,查看状态的改变。</p>
 6 <h1>状态</h1>
 7 <p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p>
 8 <p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
 9 <p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>
10 
11 </form>

12.ng-model基于状态提供css。(表单状态:ng-empty,ng-not-empty,ng-touched,ng-untouched,ng-valid,ng-invalid,ng-dirty,ng-pending,ng-pristine)

 1 <style>
 2 input.ng-invalid {
 3     background-color: lightblue;
 4 }
 5 </style>
 6     
 7 <form ng-app="" name="myForm">
 8     输入你的名字:
 9     <input name="myName" ng-model="myText" required>
10 </form>

13.gn-click修改视图,改变模型和控制器。

 1 <div ng-app="myApp" ng-controller="myCtrl">
 2     <input ng-model="name">
 3     <h1>{{greeting}}</h1>
 4     <button ng-click='sayHello()'>点我</button>    
 5 </div>
 6 
 7 <script>
 8 var app = angular.module('myApp', []);
 9 app.controller('myCtrl', function($scope) {
10     $scope.name = "Runoob";
11     $scope.sayHello = function() {
12         $scope.greeting = 'Hello ' + $scope.name + '!';
13     };
14 });
15 </script>

14.根作用域。

 1 <div ng-app="myApp" ng-controller="myCtrl">
 2 
 3 <h1>{{lastname}} 家族成员:</h1>
 4 
 5 <ul>
 6     <li ng-repeat="x in names">{{x}} {{lastname}}</li>
 7 </ul>
 8 
 9 </div>
10 
11 <script>
12 var app = angular.module('myApp', []);
13 
14 app.controller('myCtrl', function($scope, $rootScope) {
15     $scope.names = ["Emil", "Tobias", "Linus"];
16     $rootScope.lastname = "Refsnes";
17 });
18 </script>

 

转载于:https://www.cnblogs.com/carsonwuu/p/7563480.html

 类似资料: