Angular JS 基础-优快云博客

本文介绍AngularJS的基本语法，包括指令、表达式、模型、作用域、控制器等核心概念，并讲解如何利用AngularJS进行数据绑定、创建动态Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular JS基本语法

1.angular JS简介
   1.ng-app 指令定义一个 AngularJS 应用程序。ng-app 指令告诉 AngularJS，<div> 元素是 AngularJS 应用程序的"所有者"。
   2.ng-model 指令把元素值（比如输入域的值）绑定到应用程序。ng-model 指令把输入域的值绑定到应用程序变量 name。
   3.ng-bind 指令把应用程序数据绑定到 HTML 视图。ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。

2.angular JS 表达式
   AngularJS 表达式写在双大括号内：{{ expression }}。
   AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。
   AngularJS 将在表达式书写的位置"输出"数据。
   AngularJS 表达式很像 JavaScript 表达式：它们可以包含文字、运算符和变量。实例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}

   AngularJS 表达式与 JavaScript 表达式：
   类似于 JavaScript 表达式，AngularJS 表达式可以包含字母，操作符，变量。
   与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 中。
   与 JavaScript 表达式不同，AngularJS 表达式不支持条件判断，循环及异常。
   与 JavaScript 表达式不同，AngularJS 表达式支持过滤器。

3.angular JS指令
   1.ng-init 指令初始化应用程序数据。
   2.ng-repeat 指令会重复一个 HTML 元素
       <ul>
           <li ng-repeat="x in names">
            {{ x.name + ', ' + x.country }}</li>
       </ul>
   3.通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:
       var app = angular.module("myApp", []);
       app.directive("runoobDirective", function() {
        return {
        restrict : "A",
       template : "<h1>自定义指令!</h1>"
           };
       });
   restrict 值可以是以下几种: E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用
   restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。

4.angular JS模型
   1.使用 ng-model 指令来绑定输入域的值到控制器的属性。
       <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>
   2.双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改
   3.提示信息会在 ng-show 属性返回 true 的情况下显示。ng-show="myForm.myAddress.$error.email"
   4.ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error)
       Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。
       Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。
       Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。
       ng-pristine:布尔值属性，表示用户是否修改了表单。如果为ture，表示没有修改过；false表示修改过

5.angular JS Scope（作用域）
   Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
   Scope 是一个对象，有可用的方法和属性。
   Scope 可应用在视图和控制器上。
   AngularJS 创建控制器时，可以将 $scope 对象当作一个参数传递
   scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。
       $scope.sayHello = function() {
           $scope.greeting = 'Hello ' + $scope.name + '!';
        };

6.angular JS控制器
   1.ng-controller 指令定义了应用程序控制器。控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数创建。
   2.AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。
       ng-controller="myCtrl" 属性是一个 AngularJS 指令。用于定义一个控制器。
       myCtrl 函数是一个 JavaScript 函数。
       AngularJS 使用$scope 对象来调用控制器。
       在 AngularJS 中， $scope 是一个应用对象(属于应用变量和函数)。
       控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
   3.model 中可以有多个 controller

7.angular JS 过滤器
   1.uppercase 过滤器将字符串格式化为大写 <p>姓名为 {{ lastName | uppercase }}</p>
   2.lowercase 过滤器将字符串格式化为小写 <p>姓名为 {{ lastName | lowercase }}</p>
   3.currency 过滤器将数字格式化为货币格式 <p>总价 = {{ (quantity * price) | currency }}</p>
   4.orderBy 过滤器根据表达式排列数组
       <ul>
        <li ng-repeat="x in names | orderBy:'country'">
       {{ x.name + ', ' + x.country }}
       </li>
       </ul>
   5.filter 过滤器从数组中选择一个子集
       <p><input type="text" ng-model="test"></p>
       <ul>
       <li ng-repeat="x in names | filter:test | orderBy:'country'">
       {{ (x.name | uppercase) + ', ' + x.country }}
       </li>
       </ul>

8.angularJS 服务(Service)
   1.$location 服务，它可以返回当前页面的 URL 地址 $scope.myUrl = $location.absUrl();
   2.$http 是 AngularJS 应用中最常用的服务。服务向服务器发送请求，应用响应服务器传送过来的数据
       app.controller('myCtrl', function($scope, $http) {
           $http.get("welcome.htm").then(function (response) {
            $scope.myWelcome = response.data;
            });
       });
   3.AngularJS $timeout 服务对应了 JS window.setTimeout 函数 --$timeout 访问在规定的毫秒数后执行指定函数。
   4.AngularJS $interval 服务对应了 JS window.setInterval 函数。
       app.controller('myCtrl', function($scope, $interval) {
           $scope.theTime = new Date().toLocaleTimeString();
            $interval(function () {
            $scope.theTime = new Date().toLocaleTimeString();
           }, 1000);
       });

8.angularJS Http服务
   1.$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
   使用格式：
   // 简单的 GET 请求，可以改为 POST
       $http({
            method: 'GET',
           url: '/someUrl'
           }).then(function successCallback(response) {
       // 请求成功执行代码
           }, function errorCallback(response) {
       // 请求失败执行代码
       });
   2.POST 与 GET 简写方法格式：
   $http.get('/someUrl', config).then(successCallback, errorCallback);
   $http.post('/someUrl', data, config).then(successCallback, errorCallback);
   3.实例
   基本方法：
       app.controller('siteCtrl', function($scope, $http) {
        $http({
           method: 'GET',
            url: 'https://www.runoob.com/try/angularjs/data/sites.php'
           }).then(function successCallback(response) {
            $scope.names = response.data.sites;
            }, function errorCallback(response) {
            // 请求失败执行代码
            });
       });
   简单方法：
       app.controller('siteCtrl', function($scope, $http) {
       $http.get("http://www.runoob.com/try/angularjs/data/sites.php")
            .then(function (response) {$scope.names = response.data.sites;});
       });

9.angular select（选择框）
   1.使用ng-option来创建选择框
       <select ng-init="selectedName = names[0]" ng-model="selectedName" ng-options="x for x in names">
       </select>
       ng-init 设置默认选中值。
   2.使用ng-repeat来创建下拉列表
       <select>
       <option ng-repeat="x in names">{{x}}</option>
       </select>
   3.使用 ng-options 的选项是一个对象， ng-repeat 是一个字符串。

10.angularJS 表格
   1.ng-repeat 指令可以完美的显示表格。
       <table>
           <tr ng-repeat="x in names">
               <td>{{ x.Name }}</td>
               <td>{{ x.Country }}</td>
            </tr>
       </table>
   2.显示序号 ($index) 表格显示序号可以在 <td> 中添加 $index:

11.angularJS SQL
http://www.runoob.com/angularjs/angularjs-sql.html

12.angularJS HTML DOM元素显示与隐藏
   1.ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。
   2.ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。
       ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容（value）。
       如果 mySwitch 为true, 按钮将不可用:
   3.ng-show 指令隐藏或显示一个 HTML 元素。
   4.ng-hide 指令用于隐藏或显示 HTML 元素。

13.angularJS 事件
1.ng-click 指令定义了 AngularJS 点击事件。

14.angularJS 模块
   1.通过 AngularJS 的 angular.module 函数来创建模块
       var app = angular.module("myApp", []); "myApp" 参数对应执行应用的 HTML 元素。
   2.使用 ng-controller 指令来添加应用的控制器
       <div ng-app="myApp" ng-controller="myCtrl">
       var app = angular.module("myApp", []);
       app.controller("myCtrl", function($scope) {
           $scope.firstName = "John";
           $scope.lastName = "Doe";
           });

15.angularJS 表单
   1.复选框操作
       <div ng-app="">
       <form>
           选中复选框，显示标题:
           <input type="checkbox" ng-model="myVar">
       </form>
           <h1 ng-show="myVar">My Header</h1>
       </div>
   2.单选框操作
       <form>
           选择一个选项:
           <input type="radio" ng-model="myVar" value="dogs">Dogs
           <input type="radio" ng-model="myVar" value="tuts">Tutorials
           <input type="radio" ng-model="myVar" value="cars">Cars
       </form>
       <div ng-switch="myVar">
           <div ng-switch-when="dogs">
            <h1>Dogs</h1>
            <p>Welcome to a world of dogs.</p>
            </div>
           <div ng-switch-when="tuts">
            <h1>Tutorials</h1>
            <p>Learn from examples.</p>
            </div>
           <div ng-switch-when="cars">
            <h1>Cars</h1>
            <p>Read about cars.</p>
            </div>
           </div>
   3.下拉菜单和单选框操作类似

16.angular JS 输入验证
http://www.runoob.com/angularjs/angularjs-validation.html

17.angular JS API 判定数据
   API   描述
   angular.lowercase()   转换字符串为小写
   angular.uppercase()   转换字符串为大写
   angular.isString()   判断给定的对象是否为字符串，如果是返回 true。
   angular.isNumber()   判断给定的对象是否为数字，如果是返回 true。

18.angular JS bootstrap
http://www.runoob.com/angularjs/angularjs-bootstrap.html

19.angular JS 动画
   1.AngularJS 提供了动画效果，可以配合 CSS 使用。
       AngularJS 使用动画需要引入 angular-animate.min.js 库。
   2. transition: all linear 0.5s; css过渡

20.angular JS
1.实例： http://www.runoob.com/angularjs/angularjs-examples.html
2.参考手册： http://www.runoob.com/angularjs/angularjs-reference.html