AngularJS学习

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

AngularJS

什么是 AngularJS？

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。
AngularJS 把应用程序数据绑定到 HTML 元素。
AngularJS 可以克隆和重复 HTML 元素。
AngularJS 可以隐藏和显示 HTML 元素。
AngularJS 可以在 HTML 元素”背后”添加代码。
AngularJS 支持输入验证。

通过 script 标签添加到网页中：

AngularJS 指令

AngularJS 通过 ng-directives 扩展了 HTML。
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
ng-bind 指令把应用程序数据绑定到 HTML 视图。
ng-init 指令初始化 AngularJS 应用程序变量。
HTML5 允许扩展的（自制的）属性，以 data- 开头。
AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效
ng-repeat 指令会重复一个 HTML 元素

eg：

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

<div ng-app="" ng-init="firstName='John'">
    <p>姓名为 <span ng-bind="firstName"></span></p>
    <p>姓名为 <span data-ng-bind="firstName"></span></p>
</div>

<div ng-app="" ng-init="names=[
    {name:'Jani',country:'Norway'},
    {name:'Hege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}]">

    <p>循环对象：</p>
    <ul>
        <li ng-repeat="x    in names">
            {
  
  { x.name + ', ' + x.country }}
        </li>
    </ul>

</div>

创建自定义的指令

使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 – 分割, runoob-directive

eg:

<body ng-app="myApp">
    <runoob-directive></runoob-directive>

<script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
        return {
            template : "<h1>自定义指令!</h1>"
        };
    });
</script>

可以通过以下方式来调用指令：

元素名

<runoob-directive></runoob-directive>

属性

<div runoob-directive></div>

类名

<div class="runoob-directive"></div>

注释

<!-- 指令: runoob-directive -->

限制使用
eg:

var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
    return {
        restrict : "A",
        template : "<h1>自定义指令!</h1>"
    };
});

restrict 值可以是以下几种:

E 只限元素名使用
A 只限属性使用
C 只限类名使用
M 只限注释使用

AngularJS 表达式

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

AngularJS 应用

AngularJS 模块（Module）定义了 AngularJS 应用。
AngularJS 控制器（Controller）用于控制 AngularJS 应用。
ng-app指令定义了应用, ng-controller 定义了控制器。

eg：

    <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>

AngularJS 表达式与 JavaScript 表达式

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

AngularJS ng-model 指令

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

<div ng-app="myApp" ng-controller="myCtrl">
    <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>

双向绑定

在修改输入域的值时， AngularJS 属性的值也将修改：

<div ng-app="myApp" ng-controller="myCtrl">
    名字: <input ng-model="name">
    <h1>你输入了: {
    
    {name}}</h1>
</div>

AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。

控制器中的属性对应了视图上的属性：

<div ng-app="myApp" ng-controller="myCtrl">
    <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>

所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中。$ rootScope 可作用于整个应用中。

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-app="myApp" ng-controller="myCtrl">
        <h1>{
  
  {lastname}} 家族成员:</h1>

        <ul>
            <li ng-repeat="x in names">{
  
  {x}} {
  
  {lastname}}</li>
        </ul>

    </div>

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

    app.controller('myCtrl', function($scope, $rootScope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
        $rootScope.lastname = "Refsnes";
    });
</script>

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";
});

应用解析：

AngularJS 应用程序由 ng-app 定义。应用程序在
内运行。
ng-controller=”myCtrl” 属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl 函数是一个 JavaScript 函数。
AngularJS 使用$scope 对象来调用控制器。
在 AngularJS 中， $scope 是一个应用象(属于应用变量和函数)。
控制器的 $scope （相当于作用域、控制范围）用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName 和 lastName)。
ng-model 指令绑定输入域到控制器的属性（firstName 和 lastName）。

AngularJS 过滤器

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

AngularJS 过滤器可用于转换数据：

currency：格式化数字为货币格式。
filter：从数组项中选择一个子集。
lowercase：格式化字符串为小写。
orderBy：根据某个表达式排列数组。
uppercase：格式化字符串为大写。

eg:{
  
  { lastName | uppercase }}

AngularJS 服务(Service)

在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS 应用中使用。
AngularJS 内建了30 多个服务。

$location 服务

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $location) {
    $scope.myUrl = $location.absUrl();
});

$http 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm").then(function (response) {
        $scope.myWelcome = response.data;
    });
});

$timeout 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
    $scope.myHeader = "Hello World!";
    $timeout(function () {
        $scope.myHeader = "How are you today?";
    }, 2000);
});

$interval 服务

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $interval) {
    $scope.theTime = new Date().toLocaleTimeString();
    $interval(function () {
        $scope.theTime = new Date().toLocaleTimeString();
    }, 1000);
});

创建自定义服务

app.service('hexafy', function() {
    this.myFunc = function (x) {
        return x.toString(16);
    }
});

app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
});

过滤器中，使用自定义服务

app.filter('myFormat',['hexify', function(hexify) {
    return function(x) {
        return hexify.myFunc(x);
    };
}]);

<ul>
    <li ng-repeat="x in counts">{
    
    {x | myFormat}}</li>
</ul>

AngularJS XMLHttpRequest

$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。

读取 JSON 文件

    <div ng-app="myApp" ng-controller="customersCtrl"> 
        <ul>
            <li ng-repeat="x in names">
                {
    
    { x.Name + ', ' + x.Country }}
            </li>
        </ul>

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('customersCtrl', function($scope, $http) {
            $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
            .success(function(response) {$scope.names = response.records;});
        });
    </script>

AngularJS Select(选择框)

AngularJS 可以使用数组或对象创建一个下拉列表选项。
– 使用 ng-options 创建选择框

        <div ng-app="myApp" ng-controller="myCtrl">
            <select ng-model="selectedName" ng-options="x for x in names">
            </select>

        </div>

        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.names = ["Google", "Runoob", "Taobao"];
            });
        </script>

AngularJS 表格

ng-repeat 指令可以完美的显示表格。

在表格中显示数据

<div ng-app="myApp" ng-controller="customersCtrl"> 
    <table>
        <tr ng-repeat="x in names">
            <td>{
    
    { x.Name }}</td>
            <td>{
    
    { x.Country }}</td>
        </tr>
    </table>

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
        $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php")
        .success(function (response) {$scope.names = response.records;});
    });
</script>

显示序号 ($index)

<table>
  <tr ng-repeat="x in names">
    <td>{
    
    { $index + 1 }}</td>
    <td>{
    
    { x.Name }}</td>
    <td>{
    
    { x.Country }}</td>
  </tr>
</table>

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled 指令
ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

<div ng-app="" ng-init="mySwitch=true">

    <p>
        <button ng-disabled="mySwitch">点我!</button>
    </p>

    <p>
        <input type="checkbox" ng-model="mySwitch">按钮
    </p>

    <p>
        {
    
    { mySwitch }}
    </p>

</div>

实例讲解：
ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。
ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容（value）。
如果 mySwitch 为true, 按钮将不可用:

    <p>
        <button disabled>点我！</button>
    </p>

如果 mySwitch 为false, 按钮则可用:

    <p>
        <button>点我!</button>
    </p>

ng-show 指令
ng-show 指令隐藏或显示一个 HTML 元素。

<div ng-app="">

    <p ng-show="true">我是可见的。</p>

    <p ng-show="false">我是不可见的。</p>

</div>

ng-hide 指令
ng-hide 指令用于隐藏或显示 HTML 元素。

<div ng-app="">

    <p ng-hide="true">我是不可见的。</p>

    <p ng-hide="false">我是可见的。</p>

</div>

AngularJS 事件

AngularJS 有自己的 HTML 事件指令。

ng-click 指令

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

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

</div>

AngularJS 模块

模块定义了一个应用程序。
模块是应用程序中不同部分的容器。
模块是应用控制器的容器。
控制器通常属于一个模块。

创建模块

可以通过 AngularJS 的 angular.module 函数来创建模块：

添加控制器

可以使用 ng-controller 指令来添加应用的控制器:

添加指令

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

        var app = angular.module("myApp", []); 
        app.controller("myCtrl", function($scope) {
            $scope.firstName = "John";
            $scope.lastName = "Doe";
        });
        app.directive("runoobDirective", function() {
            return {
                template : "我在指令构造器中创建!"
            };
        });

    </script>

AngularJS 输入验证

<!DOCTYPE html><html>
<script src="http://ajax.proxy.ustclug.org/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

    <h2>Validation Example</h2>

    <form  ng-app="myApp"  ng-controller="validateCtrl"
        name="myForm" novalidate>

        <p>用户名:<br>
            <input type="text" name="user" ng-model="user" required>
            <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
            </span>
        </p>

        <p>邮箱:<br>
            <input type="email" name="email" ng-model="email" required>
            <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
                <span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
                <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
            </span>
        </p>

        <p>
            <input type="submit"
                ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
                myForm.email.$dirty && myForm.email.$invalid">
        </p>

    </form>

<script>
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function($scope) {
        $scope.user = 'John Doe';
        $scope.email = 'john.doe@gmail.com';
    });
</script>

</body>

HTML 表单属性 novalidate 用于禁用浏览器默认的验证。

$dirty：表单有填写记录
$valid：字段内容合法的
$invalid：字段内容是非法的
$pristine：表单没有填写记录

AngularJS API

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

AngularJS Bootstrap

AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

添加：标签中

<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

AngularJS 包含

使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:

<body>

    <div class="container">
      <div ng-include="'myUsers_List.htm'"></div>
      <div ng-include="'myUsers_Form.htm'"></div>
    </div>

</body>

步骤 1: 创建 HTML 列表

<h3>Users</h3>

<table class="table table-striped">
  <thead><tr>
    <th>Edit</th>
    <th>First Name</th>
    <th>Last Name</th>
  </tr></thead>
  <tbody><tr ng-repeat="user in users">
    <td>
      <button class="btn" ng-click="editUser(user.id)">
        <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Edit
      </button>
    </td>
    <td>{
    
    { user.fName }}</td>
    <td>{
    
    { user.lName }}</td>
  </tr></tbody>
</table>

步骤 2: 创建 HTML 表单

<button class="btn btn-success" ng-click="editUser('new')">
  <span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>

<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>

<form class="form-horizontal">
<div class="form-group">
  <label class="col-sm-2 control-label">First Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
  </div>
</div> 
<div class="form-group">
  <label class="col-sm-2 control-label">Last Name:</label>
  <div class="col-sm-10">
    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Password:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw1" placeholder="Password">
  </div>
</div>
<div class="form-group">
  <label class="col-sm-2 control-label">Repeat:</label>
  <div class="col-sm-10">
    <input type="password" ng-model="passw2" placeholder="Repeat Password">
  </div>
</div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
  <span class="glyphicon glyphicon-save"></span> Save Changes
</button>

步骤 3: 创建控制器

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id:2, fName:'Kim',lName:"Pim" },
{id:3, fName:'Sal',lName:"Smith" },
{id:4, fName:'Jack',lName:"Jones" },
{id:5, fName:'John',lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false; 
$scope.editUser = function(id) {
  if (id == 'new') {
    $scope.edit = true;
    $scope.incomplete = true;
    $scope.fName = '';
    $scope.lName = '';
    } else {
    $scope.edit = false;
    $scope.fName = $scope.users[id-1].fName;
    $scope.lName = $scope.users[id-1].lName; 
  }
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function() {$scope.test();});

$scope.test = function() {
  if ($scope.passw1 !== $scope.passw2) {
    $scope.error = true;
    } else {
    $scope.error = false;
  }
  $scope.incomplete = false;
  if ($scope.edit && (!$scope.fName.length ||
    !$scope.lName.length ||
    !$scope.passw1.length || !$scope.passw2.length)) {
    $scope.incomplete = true;
  }
};
})

步骤 4: 创建主页

<!DOCTYPE html>
<html>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.proxy.ustclug.org/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 

<body   ng-app="myApp" ng-controller="userCtrl">

<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>

<script src= "myUsers.js"></script>

</body>

</html>

AngularJS 动画

AngularJS 提供了动画效果，可以配合 CSS 使用。

AngularJS 使用动画需要引入 angular-animate.min.js 库。

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需在应用中使用模型 ngAnimate：
```
<body ng-app="ngAnimate">
```

动画是通过改变 HTML 元素产生的动态变化效果。

<body ng-app="ngAnimate">

    隐藏 DIV: <input type="checkbox" ng-model="myCheck">

    <div ng-hide="myCheck"></div>

</body>

ngAnimate 做了什么?

ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
    ng-show
    ng-hide
    ng-class
    ng-view
    ng-include
    ng-repeat
    ng-if
    ng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：
ng-animate
ng-hide-animate
ng-hide-add (如果元素将被隐藏)
ng-hide-remove (如果元素将显示)
ng-hide-add-active (如果元素将隐藏)
ng-hide-remove-active (如果元素将显示)

使用 CSS 动画
使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果

<style>
    div {
        transition: all linear 0.5s;
        background-color: lightblue;
        height: 100px;
    }
    .ng-hide {
        height: 0;
    }
</style>

–

<style>
    @keyframes myChange {
        from {
            height: 100px;
        } to {
            height: 0;
        }
    }
    div {
        height: 100px;
        background-color: lightblue;
    }
    div.ng-hide {
        animation: 0.5s myChange;
    }
</style>

AngularJS 依赖注入

什么是依赖注入

依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。
该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许客户端了解客户端如何使用该系统找到依赖

AngularJS 提供很好的依赖注入机制。以下5个核心组件用来作为依赖注入：

value
factory
service
provider
constant

value

Value 是一个简单的 javascript 对象，用于向控制器传递值（配置阶段）：

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 value 对象 "defaultInput" 并传递数据
mainApp.value("defaultInput", 5);
...

// 将 "defaultInput" 注入到控制器
mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
   $scope.number = defaultInput;
   $scope.result = CalcService.square($scope.number);

   $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
   }
});

factory

factory 是一个函数用于返回值。在 service 和 controller 需要时创建。
通常我们使用 factory 函数来计算或返回值。

// 定义一个模块
var mainApp = angular.module("mainApp", []);

// 创建 factory "MathService" 用于两数的乘积 provides a method multiply to return multiplication of two numbers
mainApp.factory('MathService', function() {
   var factory = {};

   factory.multiply = function(a, b) {
      return a * b
   }
   return factory;
}); 

// 在 service 中注入 factory "MathService"
mainApp.service('CalcService', function(MathService){
   this.square = function(a) {
      return MathService.multiply(a,a);
   }
});
...

provider

AngularJS 中通过 provider 创建一个 service、factory等(配置阶段)。
Provider 中提供了一个 factory 方法 get()，它用于返回 value/service/factory。

// 定义一个模块
var mainApp = angular.module("mainApp", []);
...

// 使用 provider 创建 service 定义一个方法用于计算两数乘积
mainApp.config(function($provide) {
   $provide.provider('MathService', function() {
      this.$get = function() {
         var factory = {};  

         factory.multiply = function(a, b) {
            return a * b; 
         }
         return factory;
      };
   });
});

constant

constant(常量)用来在配置阶段传递数值，注意这个常量在配置阶段是不可用的。

mainApp.constant("configParam", "constant value");

实例

    <html>   
       <head>
          <meta charset="utf-8">
          <title>AngularJS  依赖注入</title>
       </head>

       <body>
          <h2>AngularJS 简单应用</h2>

          <div ng-app = "mainApp" ng-controller = "CalcController">
             <p>输入一个数字: <input type = "number" ng-model = "number" /></p>
             <button ng-click = "square()">X<sup>2</sup></button>
             <p>结果: {
  
  {result}}</p>
          </div>

          <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

          <script>
             var mainApp = angular.module("mainApp", []);

             mainApp.config(function($provide) {
                $provide.provider('MathService', function() {
                   this.$get = function() {
                      var factory = {};

                      factory.multiply = function(a, b) {
                         return a * b;
                      }
                      return factory;
                   };
                });
             });

             mainApp.value("defaultInput", 5);

             mainApp.factory('MathService', function() {
                var factory = {};

                factory.multiply = function(a, b) {
                   return a * b;
                }
                return factory;
             });

             mainApp.service('CalcService', function(MathService){
                this.square = function(a) {
                   return MathService.multiply(a,a);
                }
             });

             mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
                $scope.number = defaultInput;
                $scope.result = CalcService.square($scope.number);

                $scope.square = function() {
                   $scope.result = CalcService.square($scope.number);
                }
             });

          </script>

       </body>
    </html>

AngularJS 路由

AngularJS 路由允许我们通过不同的 URL 访问不同的内容。
通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。
通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记实现，例如
```
http://runoob.com/#/first
http://runoob.com/#/second
http://runoob.com/#/third
```
当我们点击以上的任意一个链接时，向服务端请的地址都是一样的 (http://runoob.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。所以我们就需要在客户端实现 # 号后面内容的功能实现。 AngularJS 路由就通过 # + 标记帮助我们区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

这里写图片描述

<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS 路由实例 - 菜鸟教程</title>
</head>
<body ng-app='routingDemoApp'>

    <h2>AngularJS 路由应用</h2>
    <ul>
        <li><a href="#/">首页</a></li>
        <li><a href="#/computers">电脑</a></li>
        <li><a href="#/printers">打印机</a></li>
        <li><a href="#/blabla">其他</a></li>
    </ul>

    <div ng-view></div>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
    <script>
        angular.module('routingDemoApp',['ngRoute'])
        .config(['$routeProvider', function($routeProvider){
            $routeProvider
            .when('/',{template:'这是首页页面'})
            .when('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{template:'这是打印机页面'})
            .otherwise({redirectTo:'/'});
        }]);
    </script>


</body>
</html>

实例解析：

1、载入了实现路由的 js 文件：angular-route.js。
2、包含了 ngRoute 模块作为主应用模块的依赖模块。
```
    angular.module('routingDemoApp',['ngRoute'])
```
3、使用 ngView 指令。

该 div 内的 HTML 内容会根据路由的变化而变化。
配置 $routeProvider，AngularJS $routeProvider 用来定义路由规则。

    module.config(['$routeProvider', function($routeProvider){
        $routeProvider
            .when('/',{template:'这是首页页面'})
            .when('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{template:'这是打印机页面'})
            .otherwise({redirectTo:'/'});
    }]);

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI，我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由，函数包含两个参数:
第一个参数是 URL 或者 URL 正则规则。
第二个参数是路由配置对象。

路由设置对象

AngularJS 路由也可以通过不同的模板来实现。
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则，第二个参数为路由配置对象。
路由配置对象语法规则如下：

$routeProvider.when(url, {
            template: string,
            templateUrl: string,
            controller: string, function 或 array,
            controllerAs: string,
            redirectTo: string, function,
            resolve: object<key, function>
});

参数说明：

template:
如果我们只需要在 ng-view 中插入简单的 HTML 内容，则使用该参数：
```
.when('/computers',{template:'这是电脑分类页面'})
```
templateUrl:
如果我们只需要在 ng-view 中插入 HTML 模板文件，则使用该参数：
```
$routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});
```
以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
controller:
function、string或数组类型，在当前模板上执行的controller函数，生成新的scope。
controllerAs:
string类型，为controller指定别名。
redirectTo:
重定向的地址。

resolve:
指定当前controller所依赖的其他模块。

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
    angular.module('ngRouteExample', ['ngRoute'])
    .controller('HomeController', function ($scope) { $scope.$route = $route;})
    .controller('AboutController', function ($scope) { $scope.$route = $route;})
    .config(function ($routeProvider) {
        $routeProvider.
        when('/home', {
            templateUrl: 'embedded.home.html',
            controller: 'HomeController'
        }).
        when('/about', {
            templateUrl: 'embedded.about.html',
            controller: 'AboutController'
        }).
        otherwise({
            redirectTo: '/home'
        });
    });
</script>


</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>

    <div ng-view="">
    </div>
  </div>
</body>
</html>

参考手册

AngularJS 指令

ng-app：定义应用程序的根元素。
ng-bind：绑定 HTML 元素到应用程序数据
ng-bind-html：绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
ng-bind-template：规定要使用模板替换的文本内容
ng-blur：规定 blur 事件的行为
ng-change ：规定在内容改变时要执行的表达式
ng-checked：规定元素是否被选中
ng-class：指定 HTML 元素使用的 CSS 类
ng-class-even：类似 ng-class，但只在偶数行起作用
ng-class-odd：类似 ng-class，但只在奇数行起作用
ng-click：定义元素被点击时的行为
ng-cloak：在应用正要加载时防止其闪烁
ng-controller：定义应用的控制器对象
ng-copy：规定拷贝事件的行为
ng-csp：修改内容的安全策略
ng-cut：规定剪切事件的行为
ng-dblclick：规定双击事件的行为
ng-disabled：规定一个元素是否被禁用
ng-focus：规定聚焦事件的行为
ng-form：指定 HTML 表单继承控制器表单
ng-hide：隐藏或显示 HTML 元素
ng-href：为 the a 元素指定链接
ng-if：如果条件为 false 移除 HTML 元素
ng-include：在应用中包含 HTML 文件
ng-init：定义应用的初始化值
ng-jq：定义应用必须使用到的库，如：jQuery
ng-keypress：规定按下按键事件的行为
ng-keyup：规定松开按键事件的行为
ng-list：将文本转换为列表 (数组)
ng-model：绑定 HTML 控制器的值到应用数据
ng-model-options：规定如何更新模型
ng-mousedown：规定按下鼠标按键时的行为
ng-mouseenter：规定鼠标指针穿过元素时的行为
ng-mouseleave：规定鼠标指针离开元素时的行为
ng-mousemove：规定鼠标指针在指定的元素中移动时的行为
ng-mouseover：规定鼠标指针位于元素上方时的行为
ng-mouseup：规定当在元素上松开鼠标按钮时的行为
ng-non-bindable：规定元素或子元素不能绑定数据
ng-open：指定元素的 open 属性
ng-options：在 select 列表中指定 options
ng-paste：规定粘贴事件的行为
ng-pluralize：根据本地化规则显示信息
ng-readonly：指定元素的 readonly 属性
ng-repeat：定义集合中每项数据的模板
ng-selected：指定元素的 selected 属性
ng-show：显示或隐藏 HTML 元素
ng-src：指定元素的 src 属性
ng-srcset：指定元素的 srcset 属性
ng-style：指定元素的 style 属性
ng-submit：规定 onsubmit 事件发生时执行的表达式
ng-switch：规定显示或隐藏子元素的条件
ng-transclude：规定填充的目标位置
ng-value：规定 input 元素的值

AngularJS 事件

ng-click
ng-dbl-click
ng-mousedown
ng-mouseenter
ng-mouseleave
ng-mousemove
ng-keydown
ng-keyup
ng-keypress
ng-change

AngularJS 验证属性

$dirty
$invalid
$error

AngularJS 全局 API

转换
- angular.lowercase()：将字符串转换为小写
- angular.uppercase()：将字符串转换为大写
- angular.copy()：数组或对象深度拷贝
- angular.forEach()：对象或数组的迭代函数
比较
- angular.isArray()：如果引用的是数组返回 true
- angular.isDate()：如果引用的是日期返回 true
- angular.isDefined()：如果引用的已定义返回 true
- angular.isElement()：如果引用的是 DOM 元素返回 true
- angular.isFunction()：如果引用的是函数返回 true
- angular.isNumber()：如果引用的是数字返回 true
- angular.isObject()：如果引用的是对象返回 true
- angular.isString()：如果引用的是字符串返回 true
- angular.isUndefined()：如果引用的未定义返回 true
- angular.equals()：如果两个对象相等返回 true
JSON
- angular.fromJSON()：反序列化 JSON 字符串
- angular.toJSON()：序列化 JSON 字符串
基础
- angular.bootstrap()：手动启动 AngularJS
- angular.element()：包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。
- angular.module()：创建，注册或检索 AngularJS 模块

参考：http://www.runoob.com/angularjs/angularjs-tutorial.html

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/164207.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...