初探angularJS 一

来源：互联网发布：js添加class样式编辑：程序博客网时间：2024/06/05 11:57

初探angularJS 一
编者注：一直做java相关开发，返回头来看看，csdn里记录的反倒没多少关于java的。甚是汗颜。难道是我太不专注？
最近偶感互联网前端生机勃勃，会不会随着数据处理便捷（云平台+大数据）化，后端开发语言会逐渐没落。繁琐的业务逻辑被
强大的前端架构所处理，直接对接数据平台。
个人需要，最近接触了两天angularJS，如果有JS基础，这些基本语法很快能看完。这里写了个笔记和语法的代码实现。给自己
记录一下。

1 基础指令
     ng-app  指令告诉AngularJS，div 元素是 AngularJS 应用程序的"所有者"。
     ng-init       指令初始化应用程序数据。
     ng-model 指令用于绑定应用程序数据到 HTML 控制器(input,select, textarea)的值。
    <divng-app="" ng-init="firstName='John'">
    在输入框中尝试输入:
    姓名: <input type="text" ng-model="firstName">
    你输入的为: {{ firstName }}
2 no-repeat 指令
     1）带有对象
      <div data-ng-app=""data-ng-init="names=[{name:'Jani',country:'Norway'},
          {name:'Hege',country:'Sweden'},{name:'Kai',country:'Denmark'}]">
              循环对象:
             <ling-repeat="y in names">
             {{ y.name + ', ' + y.country }}
      2）带有数组
       ng-repeat 指令（带有数组）
     <div ng-app=""ng-init="names=['a1','a2','a3']">
       使用 ng-repeat 来循环数组
       <li data-ng-repeat="x in names">
        {{ x }}
3 自定义指令
         1）自定义指令
         <bodyng-app="myApp">
元素名调用指令：<runoob-directive></runoob-directive>
属性调用指令：<div runoob-directive></div>
类名调用指令：<div class="runoob-directive"></div>
<script>
var app = angular.module("myApp",[]); (module 方法的第一个参数为模块的名称，第二个参数为它的依赖模块列表。)
app.directive("runoobDirective",function() {
   return {
       template : "<h1>自定义指令!</h1>"
   };
});
</script>
</body>
         2）注释调用自定义指令
<body ng-app="myApp">

<script>
var app = angular.module("myApp",[]);
app.directive("runoobDirective",function() {
   return {
       restrict : "M",
       replace : true,
       template : "<h1>自定义指令!</h1>"
   };
});
</script>
注意：我们需要在该实例添加replace 属性，否则评论是不可见的。注意：你必须设置 restrict 的值为 "M" 才能通过注释来调用指令。
限制使用restrict 值可以是以下几种:
E 只限元素名使用A 只限属性使用C 只限类名使用M 只限注释使用restrict
默认值为 EA, 即可以通过元素名和属性名来调用指令。

4 表达式{{   }}
<div ng-app=""ng-init="quantity=1;price=5">
价格计算器数量: <input type="number"ng-model="quantity">
价格: <input type="number" ng-model="price">
总价: {{quantity * price}}
实例中的 {{ firstName }} 表达式是一个 AngularJS 数据绑定表达式。AngularJS 中的数据绑定，同步了 AngularJS 表达式与 AngularJS 数据。{{ firstName }} 是通过 ng-model="firstName" 进行同步。：

5 数据绑定ng-bind
与表达式具有类似作用
AngularJS 数字 <div ng-init="quantity=1;cost=5">
总价: {{ quantity * cost }}
使用ng-bind的相同实例<div ng-init="quantity=1;cost=5">
总价: <span ng-bind="quantity * cost"></span>

6 双向绑定
<h1>ng-model 指令</h1>
<div ng-app="myApp"ng-controller="myCtrl">
    名字: <inputng-model="name">双向绑定
    你输入了:{{name}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.name = "John Doe";
});
</script>
使用 ng-model 指令来绑定输入域的值到控制器的属性。

7 验证
ng-model指令可以为应用数据提供状态值(invalid, dirty, touched, error):
<form name="myForm">
   Email:
   <input type="email" name="myAddress"ng-model="text">
   <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>
<h1>应用状态：</h1>
<form name="myForm2"ng-init="myText = 'test@runoob.com'">
   Email:
<inputtype="email" name="myAddress" ng-model="myText"required>
Valid:     {{myForm2.myAddress.$valid}} (如果输入的值是合法的则为true)
Dirty:     {{myForm2.myAddress.$dirty}} (如果值改变则为 true)
Touched: {{myForm2.myAddress.$touched}} (如果通过触屏点击则为true)

8 CSS ng-invalid 合理性验证控制CSS颜色改变
<style>
input.ng-invalid {
   background-color: lightblue;
}
</style>

8 scope 域
控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称
<div ng-app="myApp"ng-controller="myCtrl">{{carname}}</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.carname = "Volvo";
});
</script>

9 控制器ng-controller="" ng-controller=" " 属性是一个AngularJS 指令。用于定义一个控制器
<div ng-app=""ng-controller="personController">

名： <input type="text"ng-model="person.firstName"><br>
姓： <input type="text"ng-model="person.lastName"><br>
<br>
姓名： {{person.fullName()}}
function personController($scope) {
   $scope.person = {
       firstName: "John",
       lastName: "Doe",
       fullName: function() {
           var x;
           x = $scope.person;
           return x.firstName + " " + x.lastName;
        }
   };
}

10 过滤器
<div ng-app="myApp"ng-controller="personCtrl">
<p>姓名为 {{firstName |uppercase }}</p>
<p>姓名为 {{ lastName |lowercase }}</p>
</div>

11 $scope.myUrl = $location.absUrl();
内建的 $location服务获取当前页面的 URL。

12 $interval 访问在指定的周期(以毫秒计)来调用函数或计算表达式
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$interval) {
$scope.theTime = new Date().toLocaleTimeString();
$interval(function () {
     $scope.theTime = new Date().toLocaleTimeString();
},1000);
});
</script>

13 自定义服务
<div ng-app="myApp"ng-controller="myCtrl">
255 的16进制是:
{{hex}}</div>
自定义服务，用于转换16进制数：var app = angular.module('myApp', []);
//我们创建了一个名为hexafy的访问，将一个数字转换为16进制数
app.service('hexafy', function() {
         this.myFunc= function (x) {
       return x.toString(16);
    }
});
//使用hexafy
app.controller('myCtrl', function($scope,hexafy) {
$scope.hex = hexafy.myFunc(255);
});

14 ng-options 和 ng-repeat
ng-options创建选择框<selectng-model="selectedName" ng-options="x for x in names">
</select>
ng-repeat创建选择框
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>

1 0