介绍
Angular.js 是一个流行的前端 JavaScript 框架，用于构建复杂的单页应用程序。它由 Google 开发和维护，并可以通过 npm 包进行安装和使用。
本文将介绍如何在项目中使用 Angular.js npm 包。
安装
首先，您需要确保已在项目中安装了 Node.js 和 npm。然后，使用以下命令安装 Angular.js：
npm install angular
基本用法
要在项目中使用 Angular.js，需要将其添加到 HTML 文件中。可以使用以下代码将其添加到 <head> 标签中：
<script src="node_modules/angular/angular.min.js"></script>
接下来，在您的应用程序中创建一个模块。通常，您会将其添加到一个名为 app.js 的文件中：
var app = angular.module('myApp', []);在这个例子中，我们创建了一个名为 myApp 的模块。
现在，您可以在 HTML 中使用自定义指令、控制器和服务等功能。例如，在 index.html 文件中添加以下代码：
<div ng-app="myApp" ng-controller="myCtrl">
{{ message }}
</div>然后在 app.js 文件中添加以下代码：
app.controller('myCtrl', function($scope) {
$scope.message = "Hello World!";
});这将在页面上显示输出 “Hello World!”。
指令
Angular.js 中的指令用于扩展 HTML 标记，以便增加应用程序功能。以下是一些常见的指令：
ng-app：定义 Angular.js 应用程序的根元素。ng-controller：定义控制器。ng-model：将表单元素绑定到属性或变量。ng-repeat：循环遍历数组或对象，并为每个项目创建一个副本。
例如，以下代码演示了如何使用 ng-repeat 指令来显示列表：
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>然后在控制器中添加以下代码：
app.controller('myCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Orange'];
});这将在页面上显示一个包含三个项目的列表。
控制器
控制器用于管理应用程序的状态和行为。它们通常会包含一些属性和方法，以便与视图交互。例如，在以下代码中，我们创建了一个名为 myCtrl 的控制器，并将其附加到 ng-controller 指令：
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.getFullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});然后在 HTML 中添加以下代码：
<div ng-app="myApp" ng-controller="myCtrl"> <input type="text" ng-model="firstName"><br> <input type="text" ng-model="lastName"><br> <button ng-click="getFullName()">Get Full Name</button> </div>
这将在页面上显示两个输入字段和一个按钮。当用户按下按钮时，会调用 $scope.getFullName() 方法，该方法将获取输入字段的值，并将它们组合成一个完整的名称。
服务
服务是用于封装业务逻辑和共享数据的对象。您可以使用 Angular.js 内置的服务，例如 $http 和 $timeout，也可以创建自定义服务。
以下是一个自定义服务的示例：
app.service('myService', function() {
this.sayHello = function(name) {
return "Hello " + name + "!";
};
});在控制器中，您可以使用以下代码来调用该服务：
app.controller('myCtrl', function($scope,
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/32179) ，转载请注明来源
[https://www.javascriptcn.com/post/32179](https://www.javascriptcn.com/post/32179)