ngularjs简单介绍和特点

首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每个模块都有自己的scope, service, directive, 各个模块之间也可以进行通信, 但是整体结构上是比较清晰的, 就是说其代码组织是模块化的, angular的view可能仅仅是一个框架, , 对view的dom操作或者时间监听都是在directive中实现的, 而且一般情况下很少直接去写dom操作代码, 只要你监听model, model发生变化后view也会发生变化, 就是双向绑定机制, angularjs适用于单页面开发

在angularJS中，一个模板就是一个HTML文件。但是HTML的内容扩展了，包含了很多帮助你映射model到view的内容。

HTML模板将会被浏览器解析到DOM中。DOM然后成为AngularJS编译器的输入。AngularJS将会遍历DOM模板来生成一些指导，即，directive（指令）。所有的指令都负责针对view来设置数据绑定。

auguarJS并不把模板当做String来操作。输入angularJS的是DOM而非string。数据绑定是DOM变化，不是字符串的连接或者innerHTML变化。使用DOM作为输入，而不是字符串，是AngularJS区别于其它的框架的最大原因。使用DOM允许你扩展指令词汇并且可以创建你自己的指令，甚至开发可重用的组件。angular占用的内存较小, 可以兼容主流的浏览器, 他拥有内置的依赖注入的子系统, 可以帮助开发人员更容易开发, 理解和测试和应用, DI允许你请求你的依赖，而不是自己找寻它们。比如，我们需要一个东西，DI负责找创建并且提供给我们。那么AngularJS可以做到。指令可以用来创建自定义的标签。它们可以用来装饰元素或者操作DOM属性。

**vuejs简单介绍特点 **

官网: http://cn.vuejs.org/

vue是一个渐进式的框架, 是一个轻量级的框架, 也不算是一个框架, 他核心只关注图层, 是一个构建数据驱动的web界面,易于上手, 还便于于第三方库或与既有项目整合,也能够为复杂的单页应用程序提供驱动

1. vue的核心

是一个允许采用简洁的模板语法来声明式的将数据渲染进dom

先创建一个后缀名为.html的文件

代码如下:

html: <div id="app"></div>

js里面的

var app=new Vue({
 
　　　　　　　　　　　　　　　　　　el: '#app',
　　　　　　　　　　　　　　　　　　data: {
　　　　　　　　　　　　　　　　　　　　msg: 'Hello Vue!'
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　})

在浏览器窗口上出现的内容:　Hello Vue

数据和ＤＯＭ已经绑定在一起, 验证是否是响应式的, 修改控制台里面app.msg, 你就会看到上面渲染是列子也更新了

出来文本插值, 还可以用绑定DOM 元素属性

<div id="app-2">
　　　　　　　　　<span v-bind:title="message">
　　　　　　　　　　　查看此处动态绑定提示信息！
　　　　　　　　　</span>
　　　　　　　</div>

js代码:

var app2=new Vue({
　　　　　　　　　　el: '#app-2',
　　　　　　　　　　data: {
　　　　　　　　　　　　message: '页面加载于 ' + new Date()
　　　　　　　　　　}
　　　　　　　　})

2. vue指令

指令带有前缀v-, 以表示他们是Vue提供的特殊属性, 他们会在渲染的DOM上应用特殊的响应式行为

v-bind: v-bind : str="msg" 将这个元素的节点的str属性和vue实例对象的msg属性保持一致

v-if=布尔值 条件渲染指令, 根据其后表达式的布尔值进行判断是否渲染该元素, v-if只会渲染他身后表达式为true的元素

v-show=布尔值 和v-if类似,只是会渲染他身后表达式为false的元素, 而且会给这样的元素添加css的代码, style="display:none"

v-else 必须v-if/v-show指令后, 不然就不会起作用, 如果v-if/v-show的指令表达式为true, 则else就不显示, 如果v-if/v-show指令的表达式为false, 则else元素会显示在页面上

v-for 类似于js的遍历, 用法为 v-for="(item,index) in imgs" :key="index", items是数组, item为数组中的数组元素, index是索引号, key是为了更高效的查找到指定元素

v-on 用于监听指定元素的DOM事件 v-on:click="greet"

3. vue的双向数据绑定

vueJS是使用ES5提供的Object.defineProperty()方法, 监控对数据的操作, 从而可以自动触发数据, 并且, 由于是在不同的数据上触发同步, 可以精确的将变更发送给绑定的视图, 而不是对所有的数据都执行一次检测

vue和angular中, 都是通过在html中添加指令的方式, 将视图元素与数据的绑定关系进行声明

<from id="app">
　　　　　<input type="test" v-model="name">
　　　</from>

以上的html代码表示该input元素与name数据进行绑定, 在js代码总可以这样进行初始化

var vm=new Vue({
　　　　　　　　　　el: "#app",
　　　　　　　　　　data:{
　　　　　　　　　　　　name: "请输入你的名字"
　　　　　　　　　　}
　　　　　　　　})

代码执行正确后, 页面上input元素对应的位置会显示上面的代码给出的初始值 "请输入你的名字", 由于双向绑定数据已经建立, 因此, 在vm.name="小米", 则input也会更新为小明, 在页面input上输入小明, 则vm.name获取的值为小明

4. vue的插件化

插件通常会为vue添加全局功能, 插件的范围没有限制

添加全局的方法或者属性 vue-element 这个我并不是很懂

添加全局资源 指令/过滤器/ 过渡

添加vue实例的办法, 将他们添加到vue-prototype上实现

引入一个库, 来提供自己的api, 同时提供上面的一个或者多个功能, 如 vue-router

import vueRouter from ''vue-router'; //使用webpack的单文件组件打包的方式 会调用vue.component来注册全局组件或者vue.components注册局部组件如果是后者，每个单文件组件中都不需要引入 vue,

因为单文件组件经 webpack 打包后，生成的模块只是一个组件选项对象，被其他组件或 Vue 实例注册时使用语法糖，只需要 字面量对象的 组件选项对象就可以了。

使用插件:

vue.use(vueRouter); /通过全局方法Vue.use()使用插件, 会阻止注册相同插件多次, 只会注册一次该插件

angular和jquery的区别

angular中是尽量避免操作DOM, angular是基于数据驱动, 适合做数据操作比较繁琐的项目,angular适用于单页面开发,是一个比较完善的mvvm框架, 包含模板和双向数据绑定, 路由, 模块化, 服务, 过滤器, 依赖注入等所有功能,但是angular验证功能比较薄弱, 需要写很多模板标签, 而且ngview只能有一个, 不能嵌套多个视图,angular的兼容性比较好, jquery是基于操作DOM, 适用于操作DOM比较多的项目, jquery是一个库, 比较大,兼容大部分浏览器, 有丰富的插件, 可拓展性强, jquery不能向后兼容, 使用插件时,可能会有冲突,

angular和vue的差别

一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的getter和setter来实现, 而angular是有自己实现一套模板编译规则,vue比angular更轻量, 性能上更高效, 比angular更容易上手, 学习成本低, vue需要一个el对象进行实例化, 而angular是整个html页面下的,单页面应用, 而vue可以有过个vue实例

最后

以下是总结出来最全前端框架视频，包含： javascript/vue/react/angualrde/express/koa/webpack 等学习资料。

【领取方式】

关注头条 前端全栈架构丶第一时间获取最新前端资讯学习

手机用户可私信关键词 【前端】即可获取全栈工程师路线和学习资料！

天这篇文章将会向你介绍如何使用Java EE 7和Angular JS来构建一个非常简单的应用。在此之前，先给大家讲一个故事。

我必须承认，我从来都不是一个Javascript的超级粉丝，但我始终记得我第一使用它的情景。我不太记得确切的年份，不过大概是90年代的中期。我的一个页面里有3个frame（是的，frame！记得这个东西吗？那个时候非常流行的），而我想做的是在点击了第3个frame上的一个链接时，能够重新加载前两个frame。那个时候，Javascript是用来在页面上做一些花哨的东西的。不是所有的浏览器都支持，有些浏览器甚至需要你手动打开。时至今日，这个情景已经有了显著变化，Javascript成为一门全栈的开发语言。你甚至可以仅仅用Javascript就能开发出一个完整的应用。但对于我来说，有时我还是会回想到90年代的情形，很难给予Javascript足够的信任，所以这是我为了更好的了解Javascript所做出的尝试。

为什么用Java EE 7？

好吧，我喜欢Java，并且新的Java EE版本非常好用，配合Wildfly或Glassfish使得它简洁而且运行快速。Java EE7的规范可以满足你所有需求，是Java编程中的标准。

为什么用Angular JS？

这里我大概是追随了Angular JS的热潮。因为我在Javascript方面没有太多的经验，不太了解各类的JS库，所以这里只是采纳了一些朋友的建议。而且我也注意到了在最近一次Devoxx大会上对于Angular得到了广泛的接纳，关于Angular的演讲的每一个房间都爆满。所以我想用它尝试一下，也给我自己一个认识的机会。

关于应用

这个应用是一个简单的包含分页的列表，以及一个REST服务用于提供列表中的数据。每当我开始一个新的企业级应用的时候，这通常是我们开始编码时所做的第一件事：创建一张表，存入一些数据，然后列出一些随机数据，所以我认为这个应用是非常合适的。

配置

• Java EE 7
• Angular JS
• ng-grid
• UI Bootstrap
• Wildfly

代码（终于到代码部分了！）

后端-Java EE 7

从后端开始，让我们定义一个简单的Entity类（为了简洁省略了部分代码）：

Persion.java

@Entity

public class Person {

@Id

private Long id;

private String name;

private String description;

}

如果你不是很熟悉Java EE的JPA规范，这里就稍作解释。这段代码使用了@Entity注解，从而使一个对象类连接到数据库中同名的表，并产生映射关系，注解@Id用于定义表中的主键。

接下来是persistence.xml文件：

persistence.xml

<?xml version="1.0" encoding="UTF-8"?>

<persistence version="2.1"

xmlns="http://xmlns.jcp.org/xml/ns/persistence"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/persistence http://xmlns.jcp.org/xml/ns/persistence/persistence_2_1.xsd">

<persistence-unit name="myPU" transaction-type="JTA">

<properties>

<property name="javax.persistence.schema-generation.database.action" value="drop-and-create"/>

<property name="javax.persistence.schema-generation.create-source" value="script"/>

<property name="javax.persistence.schema-generation.drop-source" value="script"/>

<property name="javax.persistence.schema-generation.create-script-source" value="sql/create.sql"/>

<property name="javax.persistence.schema-generation.drop-script-source" value="sql/drop.sql"/>

<property name="javax.persistence.sql-load-script-source" value="sql/load.sql"/>

</properties>

</persistence-unit>

</persistence>

这里有我最喜欢的Java EE 7中的两个特性：现在，你可以使用javax.persistence.schema-generation.*属性来标准化的调用sql。并且，如果你不提供一个数据源的话，它就会绑定到一个默认的数据源。所以在这个例子中，它将会使用内部的Wildfly H2的数据源。

最后，为了提供列表数据，我们需要查询数据库并以REST服务的形式暴露出来：

PersonResource.java

@Stateless

@ApplicationPath("/resources")

@Path("persons")

public class PersonResource extends Application {

@PersistenceContext

private EntityManager entityManager;

private Integer countPersons() {

Query query=entityManager.createQuery("SELECT COUNT(p.id) FROM Person p");

return ((Long) query.getSingleResult()).intValue();

}

@SuppressWarnings("unchecked")

private List<Person> findPersons(int startPosition, int maxResults, String sortFields, String sortDirections) {

Query query=entityManager.createQuery("SELECT p FROM Person p ORDER BY " + sortFields + " " + sortDirections);

query.setFirstResult(startPosition);

query.setMaxResults(maxResults);

return query.getResultList();

}

public PaginatedListWrapper<Person> findPersons(PaginatedListWrapper<Person> wrapper) {

wrapper.setTotalResults(countPersons());

int start=(wrapper.getCurrentPage() - 1) * wrapper.getPageSize();

wrapper.setList(findPersons(start,

wrapper.getPageSize(),

wrapper.getSortFields(),

wrapper.getSortDirections()));

return wrapper;

}

@GET

@Produces(MediaType.APPLICATION_JSON)

public PaginatedListWrapper<Person> listPersons(@DefaultValue("1")

@QueryParam("page")

Integer page,

@DefaultValue("id")

@QueryParam("sortFields")

String sortFields,

@DefaultValue("asc")

@QueryParam("sortDirections")

String sortDirections) {

PaginatedListWrapper<Person> paginatedListWrapper=new PaginatedListWrapper<>();

paginatedListWrapper.setCurrentPage(page);

paginatedListWrapper.setSortFields(sortFields);

paginatedListWrapper.setSortDirections(sortDirections);

paginatedListWrapper.setPageSize(5);

return findPersons(paginatedListWrapper);

}

}

这里的代码非常像普通的Java POJP，但是使用了Java EE的注解来增强行为。@ApplicationPath("/resources")和@Path("persons")会通过yourdomain/resources/personsurl来暴露REST服务，@GET标志了这个逻辑通过http的GET方法调用，@Produces(MediaType.APPLICATION_JSON)把REST响应格式化为JSON格式。仅仅用少量注解就能完成这些操作是很酷的。

为了更容易的获得分页列表所需的数据，我还创建了下面这个包装类：

PaginatedListWrapper.java

public class PaginatedListWrapper<T> {

private Integer currentPage;

private Integer pageSize;

private Integer totalResults;

private String sortFields;

private String sortDirections;

private List<T> list;

}

现在，后端的事情我们已经完成了。

UI-Angular JS

我们使用Angular JS来展示数据。Angular遵循了MVC模式，通过添加一些自定义的标签属性来绑定数据和Javascript中出现的变量，从而扩展了传统的HTML。那么， 让我们来看看我们的html页面：

index.html

<!DOCTYPE html>

<!-- Declares the root element that allows behaviour to be modified through Angular custom HTML tags. -->

<html ng-app="persons">

<head>

<title></title>

<script src="lib/angular.min.js"></script>

<script src="lib/jquery-1.9.1.js"></script>

<script src="lib/ui-bootstrap-0.10.0.min.js"></script>

<script src="lib/ng-grid.min.js"></script>

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

<link rel="stylesheet" type="text/css" href="lib/bootstrap.min.css"/>

<link rel="stylesheet" type="text/css" href="lib/ng-grid.min.css"/>

<link rel="stylesheet" type="text/css" href="css/style.css"/>

</head>

<body>

<div class="grid">

<!-- Specify a JavaScript controller script that binds Javascript variables to the HTML.-->

<div ng-controller="personsList">

<!-- Binds the grid component to be displayed. -->

<div class="gridStyle" ng-grid="gridOptions"></div>

<!-- Bind the pagination component to be displayed. -->

<pagination direction-links="true" boundary-links="true"

total-items="persons.totalResults" page="persons.currentPage" items-per-page="persons.pageSize"

on-select-page="refreshGrid(page)">

</pagination>

</div>

</div>

</body>

</html>

除了Javascript和CSS声明之外，这里只有很少的代码。让人印象深刻的是，Angular还拥有非常广泛的即插即用的组件，所以，我使用了ng-grid来展示数据，用UI Bootstrap提供分页功能。ng-grid其实同样包含了分页的组件，但是我更喜欢UI Bootstrap提供的组件。

这里还缺少了一个文件——一个js文件来是实现功能：

persion.js

var app=angular.module('persons', ['ngGrid', 'ui.bootstrap']);

// Create a controller with name personsList to bind to the html page.

app.controller('personsList', function ($scope, $http) {

// Makes the REST request to get the data to populate the grid.

$scope.refreshGrid=function (page) {

$http({

url: 'resources/persons',

method: 'GET',

params: {

page: page,

sortFields: $scope.sortInfo.fields[0],

sortDirections: $scope.sortInfo.directions[0]

}

}).success(function (data) {

$scope.persons=data;

});

};

// Do something when the grid is sorted.

// The grid throws the ngGridEventSorted that gets picked up here and assigns the sortInfo to the scope.

// This will allow to watch the sortInfo in the scope for changed and refresh the grid.

$scope.$on('ngGridEventSorted', function (event, sortInfo) {

$scope.sortInfo=sortInfo;

});

// Watch the sortInfo variable. If changes are detected than we need to refresh the grid.

// This also works for the first page access, since we assign the initial sorting in the initialize section.

$scope.$watch('sortInfo', function () {

$scope.refreshGrid($scope.persons.currentPage);

}, true);

// Initialize required information: sorting, the first page to show and the grid options.

$scope.sortInfo={fields: ['id'], directions: ['asc']};

$scope.persons={currentPage : 1};

$scope.gridOptions={

data: 'persons.list',

useExternalSorting: true,

sortInfo: $scope.sortInfo

};

});

这个Javascript代码非常简洁，整体性很好。请注意每部分是如何加入到应用的控制器中的，这让你能够分开关注业务逻辑的多个部分。为了实现所需的功能，我们仅仅需要添加少量的方法，包括通过调用REST服务来刷新列表，以及监控表格中的数据来刷新视图。这是最终的结果：

下一步

这个系列的下一篇文章中，我打算：

• 实现拦截
• 实现详细视图
• 实现下一个/上一个浏览导航
• 在云上部署
• 管理Javascript依赖

资源

你可以从我的github库中clone一个完整的拷贝，然后部署到Wildfly上，关于如何部署，也可以在上面找到指导，同样，它也应该能在Glassfish上运行。Java EE – Angular JS Source

更新

同时，我还根据管理Javascript依赖一文来更新了我的源码，请通过 release 1.0来下载源码，同样可以clone这个repo，并使用git checkout 1.0命令来下载release 1.0版本的源码。

希望你喜欢这篇文章，如果你有任何评论或意见请告诉我。

个基础课程将介绍知名的Google前端开发框架AngularJS的基础使用，包括：基本概述，数据绑定，指令，表达式，控制器，过滤器等基础内容

课程内容：

AngularJS核心功能

数据绑定：自动同步视图和模式组件的数据

作用域：这些对象参考模式。作为控制器和视图的纽带

控制器：这些JS方法绑定到指定的作用域中

服务：AngularJS带有一些内建的服务，例如，$http来处理XMLHttpRequests.　这些都是Singleton对象，只需要实例化一次

过滤器：这些用来处理数组的子集并且返回新的数组

指令集: 指令集是DOM元素的标示（例如，元素，属性，CSS等等）。这些指令集可以用来定义自定义的HTML标签，生成新的自定义的组件。AngularJS定义了一些内建的指令集（ngBind, ngModal等等）

模板：这些组件用来帮助将数据生成页面视图。一个页面可以有一个或者多人模板。

路由: 用来切换不同视图的机制。

Model ViewWhatever：MVC是一个用来将程序分割为不同部分的设计模式，每一个有自己独立的功能。AngularJS实现的并非是传统意义上的MVC架构，而是类似MVVM(Model-View-ViewModel)，AngularJS团队戏称为MVW(Model ViewWhatever)

深度链接：允许你编码状态到URL中，这样可以方便的收藏地址。程序可以从URL中恢复保存时的状态

依赖注入：AngularJS内建的依赖注入子系统，帮助开发人员更容易的创建开发，测试和理解代码和结构

若需观看相关课程，请猛力点击下面“相关链接”地址