Angularjs简介（一）

2017-04-17 本文已影响286人 nicocoi

原因：2016年11月17日星期四由于工作需要，总结Angularjs与JAVA EE 开发过程中遇到的问题与解决办法，并进行记录。
说明：本记录中有许多软件需要前置依赖环境，譬如Netbeans之Java，Angularjs之Node包管理器，请查看《Linux配置安装记录》。
我的博客：http://minichao.me

简介

Angularjs简介

Angularjs是谷歌开发的，开源的功能完善的JavaScript 模型-视图-控制器（MVC--model-view-controllers）框架，Angularjs，jQuery和Twitter Bootstrap是完美组合，仅用这三个工具就能迅速开发出REST web服务为后端的HTML5 JavaScript前端应用。

Angularjs MVC

Angularjs MVC 应用图解，作图工具：Processon，支持团队在线跨平台作图。

单页应用

下述代码就是一个单页应用index.htm入口页面的代码，所有的动态内容都会插入<div ng-view> </div> 标签中。用户单击应用中的链接后，标签中现有的内容会被删除，插入新的动态内容。用户无需等待新页面刷新，新内容会动态显示出来，与加载新HTML页面相比，用时更少。

<!-- SPA/index.html -->
<!DOCTYPE html>
<html lang="en" ng-app="helloWorldApp">

<head>
    <title>AngularJS Hello World</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/libs/angular.min.js"></script>
    <script src="js/libs/angular-route.min.js"></script>
    <script src="js/libs/angular-resource.min.js"></script>
    <script src="js/libs/angular-cookies.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
</head>

<body>
    <div ng-view></div>
</body>

</html>

引导应用

初次启动时应用加载Angularjs，页面加载库时会触发加载引导过程。解析器分析index.html。寻找ng-app标签，<html lang="en" ng-app="helloWorldApp">，这一句代码会触发js文件中如下的代码。这就是应用的接入口。在这一js文件中定义了名为helloWorldApp的应用（可以随意命名，这里保持一致是为了方便辨识），module里的是接入口，var后面的是应用名称。

/* app.js excerpt */
`use strict`;
/* App Module */
var helloWorldApp = angular.module('helloWorldApp', [
    'ngRoute',
    'helloWorldControllers'
]);

依赖注入

依赖注入（Dependency Injection,DI）是一种设计模式，目的是在配置应用时定义应用的依赖。初次启动应用时，Angularjs会使用依赖注入的模式加载模块的依赖。引导应用中我们为helloWorldApp应用定义了两个所需的依赖，这两个依赖在定义模块时通过一个数组参数指定，第一个依赖是Angualrjs的ngRoute路由模块。第二个则是自行定义的控制器，这里只需知道启动应用时需加载控制器，控制器会在后面提到。

Angularjs路由

下述代码摘自app.js，定义了两个路由，/与/show。显而易见，当链接地址为xxx/时，会进入MainCtrl控制的main.html页面，而当点击xxx/show对应的内容时，会显示show.html页面内容

/* app.js excerpt */
helloWorldApp.config(['$routeProvider', '$locationProvider',
    function($routeProvider, $locationProvider) {
        $routeProvider.
        when('/', {
            templateUrl: 'partials/mail.html',
            controller: 'MainCtrl'
        });
        when('/show', {
            templateUrl: 'partials/show.html',
            controller: 'ShowCtrl'
        });
    }
]);

Netbeans Create Demo

Netbeans

在官网进行下载 Netbeans，选择带有GlassFish的版本。对下载的文件进行安装

chmod +x netbeans-8.1-linux.sh
./netbeans-8.1-linux.sh

Alt text1

安装完成后，打开安装glassfish的文件夹。替换/glassfish/modules/中的文件org.eclipse.persistence.moxy.jar，文件在公司资料网中有提供。

Server : RESTful Web Services

新建项目Maven：Web Application

Alt text2
Name and Location根据自己需要选择.
server选择Netbeans自带的4.1.1版本，Java EE 7 Web.

Alt text3
之后会弹出正在下载一些依赖文件，时间取决于网络

Alt text4
右键新建的项目，对其新建RESTful Web Services from Database，选择sample样例数据库，并将数据库中表单全部添加，即Add all.

Alt text5
之后不用更改，一路next。
如下图，在config文件中看到app的路径为webresources

Alt text6
下图中，我们选取customer为演示样例，修改其路径为customers

Alt text7
将工程的run路径修改为/webresources/customers，如下图

Alt text8
再对工程新建一个Cross-Origin文件如下

Alt text9
Alt text10
这时选中该Server工程，点击Run（绿色三角），会弹出类似如下的效果：

Alt text11
说明：出现XML格式文件即可，不必对照此图内的信息。

Client Html/Angularjs

新建HTML工程如下，记得添加Angular seed

Alt text12
Alt text13
进入HTML工程所在文件夹安装依赖包

Alt text14
这里全选

Alt text15
建立完成后，发现项目并不可用，点击运行会提示无法加载Angualrjs，这是因为并没有在本地下载所需的依赖库文件，而已经建立了bower.json，内记录这所需的文件和版本号，只需进入该目录运行bower install即可
运行，可以发现Angular控制着版本号（v0.1），已经可以工作，环境搭建完毕

Alt text