AngularJS教程：AngularJS入门

作者：Cpp五条 | 2024-06-10 00:08:45

踩

angularjs教程

AngularJS是用于构建单页应用程序（SPA）的流行JavaScript框架。

AngularJS提供了以下功能，使开发Web应用程序变得容易：

双向数据绑定
依赖注入
自定义HTML指令
使用$ http，$ resource，Restangular等轻松与REST Web服务集成
测试支持

还有很多…

尽管功能比上面列出的要多，但这些是非常常用的功能。

我不会解释什么是双向数据绑定，$ scope在这里如何工作，因为网上已经有大量材料。

作为Java开发人员，我将使用基于SpringBoot的RESTful后端服务。如果需要，可以使用JavaEE / JAX-RS来构建REST后端服务。另外，您可能喜欢使用NetBeans，因为它具有开箱即用的出色AngularJS自动完成支持。

因此，让我们开始编码AngularJS HelloWorld应用程序。

使用以下内容创建index.html并启动服务器，然后将浏览器指向http：// localhost：8080 / hello-angularjs / index.html


<html>
    <head>
        <title>Hello AngularJS</title>
        <meta charset="UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
    <body ng-app>
        <p>Enter Name: <input type="text" ng-model="myname"> </p>
        <p>Hello {{myname}}!!</p>
    </body>
</html>

现在开始输入输入文本，您的Hello {{myname}}将立即反映您在输入文本字段中输入的值。

好的，我们完成了“ HelloWorld”仪式并热身！

我们已经使用AngularJS CDN URL来加载AngularJS库。我们可以从https://angularjs.org/下载AngularJS并添加angular.min.js脚本。

但是我们将使用WebJars（ http://www.webjars.org/ ），它将提供流行的javascript库作为maven jar模块以及可传递依赖项。如果我们想使用Twitter Bootstrap，我们也应该包括jQuery。但是使用WebJars我只需要配置bootstrap jar依赖关系，它将为我拉出jquery依赖关系。

让我们通过选择File-> New-> Spring Starter Project创建一个SpringBoot项目，选择“ Web”和“ Data JPA”模块，然后选择Finish。

如果您不使用STS，则可以从http://start.spring.io/创建此入门模板，并以zip格式下载。

我们将使用Bootstrap和超赞JavaScript库来构建Web UI。让我们在pom.xml中将H2数据库，AngularJS，Bootstrap和超酷字体库配置为WebJar Maven依赖项。

由于它是一个SpringBoot jar类型的应用程序，因此我们会将所有html页面放在src / main / resources / public文件夹中，并将所有javascript，css，图像放在src / main / resources / static文件夹中。

现在，将AngularJS CDN引用修改为<script src =” webjars / angularjs / 1.2.19 / angular.js”> </ script> 。
让我们在我们的index.html中包含引导程序和超赞CSS / js。另外，我们将使用angular-route模块进行页面导航，因此我们还需要包含angular-route.js 。
让我们在src / main / resources / static / js文件夹中创建包含我们主要的angularjs模块配置的app.js文件。
还要在同一文件夹中创建controllers.js，services.js，filters.js，directives.js并将它们包含在index.html中 。

SpringBoot将提供src / main / resources / static文件夹中的静态内容。


<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>DashBoard</title>
  <link rel="stylesheet" href="webjars/bootstrap/3.2.0/css/bootstrap.css"/>
  <link rel="stylesheet" href="webjars/font-awesome/4.1.0/css/font-awesome.css"/>
  <link rel="stylesheet" href="css/styles.css"/>
 
</head>
<body ng-app>
        <p>Enter Name: <input type="text" ng-model="myname"> </p>
        <p>Hello {{myname}}!!</p>
	
	<script src="webjars/jquery/1.11.1/jquery.js"></script>
	<script src="webjars/bootstrap/3.2.0/js/bootstrap.js"></script>
	<script src="webjars/angularjs/1.2.19/angular.js"></script>
	<script src="webjars/angularjs/1.2.19/angular-route.js"></script>
	<script src="js/app.js"></script>
	<script src="js/controllers.js"></script>
	<script src="js/services.js"></script>
 
</body>
</html>

在Application.java文件中，添加以下RequestMapping以将上下文根映射到index.html 。


package com.sivalabs.app;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
 
@Configuration
@ComponentScan
@EnableAutoConfiguration
public class Application {
 
    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }
}
 
@Controller
class HomeController
{
    @RequestMapping("/")
    public String home() {
        return "index.html";
    }
}

现在，作为独立类运行此Application.java，然后转到http：// localhost：8080 / 。它应该与之前的工作方式相同。

现在我们已经准备好基本设置。让我们构建一个非常简单的Todo应用程序。

创建一个JPA实体Todo.java，其Spring Data JPA存储库接口和TodoController来执行读取/创建/删除操作。


package com.sivalabs.app.entities;
@Entity
public class Todo {
	@Id @GeneratedValue(strategy=GenerationType.AUTO)
	private Integer id;
	private String description;
	@Temporal(TemporalType.TIMESTAMP)
	private Date createdOn = new Date();
	
	//setters and getters
}
 
package com.sivalabs.app.repos;
public interface TodoRepository extends JpaRepository<Todo, Integer>{
}
 
package com.sivalabs.app.controllers;
 
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import com.sivalabs.app.entities.Todo;
import com.sivalabs.app.repos.TodoRepository;
 
@RestController
@RequestMapping("/todos")
public class TodoController {
 
    @Autowired
    private TodoRepository todoRepository;
 
    @RequestMapping(value="", method=RequestMethod.GET)
    public List<Todo> persons() {
        return todoRepository.findAll();
    }    
    @RequestMapping(value="", method=RequestMethod.POST)
    public Todo create(@RequestBody Todo todo) {
		return todoRepository.save(todo);
	}
    
    @RequestMapping(value="/{id}", method=RequestMethod.DELETE)
    public void delete(@PathVariable("id") Integer id) {
    	todoRepository.delete(id);
	}
}

创建DatabasePopulator来设置一些初始数据。


package com.sivalabs.app;
 
import java.util.Arrays;
import java.util.Date;
import javax.annotation.PostConstruct;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import com.sivalabs.app.entities.Todo;
import com.sivalabs.app.repos.TodoRepository;
 
@Component
public class DatabasePopulator 
{
	@Autowired
    private TodoRepository todoRepository;
	
	@PostConstruct
	void init()
	{
		try {			
			Todo t1 = new Todo(null, "Task 1", new Date());
			Todo t2 = new Todo(null, "Task 2", new Date());
			Todo t3 = new Todo(null, "Task 3", new Date());
			this.todoRepository.save(Arrays.asList(t1,t2,t3));
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

现在，我们的后端RESTful Web服务可以在以下URL中使用。
GET – http：// localhost：8080 / todos ，获取Todos列表
POST – http：// localhost：8080 / todos用于创建新的Todo 删除 – http：// localhost：8080 / todos / 1删除Todo（id：1）

让我们创建我们的主要angularjs模块“ myApp ”，并在app.js文件中配置我们的应用程序路由。


var myApp = angular.module('myApp',['ngRoute']);
 
myApp.config(['$routeProvider','$locationProvider',
        function($routeProvider, $locationProvider) {
          $routeProvider
          	.when('/home', {
              templateUrl: 'templates/home.html',
              controller: 'TodoController'
          	})
            .otherwise({
            	redirectTo: 'home'
            });
          
}]);

现在，将index.html更新为使用页面末尾的myApp模块连接，并用于加载当前路由模板。


<!doctype html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8"/>
  <title>DashBoard</title>
  <link rel="stylesheet" href="webjars/bootstrap/3.2.0/css/bootstrap.css"/>
  <link rel="stylesheet" href="webjars/font-awesome/4.1.0/css/font-awesome.css"/>
  <link rel="stylesheet" href="css/styles.css"/>	
 
</head>
<body>
    
    <div class="container">    
          <div ng-view></div>
    </div>
 
	<script src="webjars/jquery/1.11.1/jquery.js"></script>
	<script src="webjars/bootstrap/3.2.0/js/bootstrap.js"></script>
	<script src="webjars/angularjs/1.2.19/angular.js"></script>
	<script src="webjars/angularjs/1.2.19/angular-route.js"></script>
	
	<script src="js/app.js"></script>
	<script src="js/controllers.js"></script>
	<script src="js/services.js"></script>
	
</body>
</html>

在src / main / resources / public / templates文件夹中创建home.html模板。


<div class="col-md-8 col-md-offset-2">
 
<form class="form-horizontal" role="form">
  	<div class="form-group form-group-md">
  		<div class="col-md-10">
			<input type="text" class="form-control" ng-model="newTodo.description"> 
		</div>
		<button class="btn btn-primary" ng-click="addTodo(newTodo)">Add</button>
	</div>
</form>
 
 
<table class="table table-striped table-bordered table-hover">
	<thead>
		<tr>
			<th width="70%">Item</th>
			<th>Date</th>
			<th>Delete</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="todo in todos">
			<td>{{todo.description}}</td>
			<td>{{todo.createdOn | date}}</td>
			<td><button class="btn btn-danger" ng-click="deleteTodo(todo)">Delete</button></td>
		</tr>
	</tbody>
</table>
<br/>
</div>

这是一个非常简单的html页面，带有一些引导程序样式，我们正在使用一些angularjs功能。

我们使用ng-repeat指令遍历Todo JSON对象数组，使用ng-click指令将回调函数绑定到按钮单击。

为了调用REST服务，我们将使用angularjs内置的$ http服务。 $ http服务驻留在angular-route.js中 ，请不要忘记将其包含在index.html中 。


$http.verb('URI')
.success(success_callback_function(data, status, headers, config){
 //use data
 })
.error(error_callback_function(data, status, headers, config) {
   alert('Error loading data');
});

例如：进行GET / todos REST调用：


$http.get('todos')
.success(function(data, status, headers, config) {
 //use data
 })
.error(function(data, status, headers, config) {
   alert('Error loading data');
});

在controllers.js文件中创建TodoController。在TodoController中，我们将创建函数来加载/创建/删除Todos。


angular.module('myApp')
.controller('TodoController', [ '$scope', '$http', function ($scope, $http) {
	
	$scope.newTodo = {};
	
	$scope.loadTodos = function(){
		$http.get('todos')
		.success(function(data, status, headers, config) {
			$scope.todos = data;
		 })
		.error(function(data, status, headers, config) {
		      alert('Error loading Todos');
		});
	};
	
	$scope.addTodo = function(){
		$http.post('todos',$scope.newTodo)
		.success(function(data, status, headers, config) {
			$scope.newTodo = {};
			$scope.loadTodos();
		 })
		.error(function(data, status, headers, config) {
		      alert('Error saving Todo');
		});
	};
	
	$scope.deleteTodo = function(todo){
		$http.delete('todos/'+todo.id)
		.success(function(data, status, headers, config) {
			$scope.loadTodos();
		 })
		.error(function(data, status, headers, config) {
		      alert('Error deleting Todo');
		});
	};
	
	$scope.loadTodos();
}]);

现在将浏览器指向http：// localhost：8080 / 。您应该看到待办事项列表和新待办事项条目表单以及每个待办事项的删除选项。

到目前为止，我们已经开始使用AngularJS基本功能。
在下一篇文章中，我将解释使用多个路由，多个控制器和服务。敬请关注！

翻译自: https://www.javacodegeeks.com/2014/09/angularjs-tutorial-getting-started-with-angularjs.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/696345