ionic项目简介以及Angularjs 基础

最新推荐文章于 2024-07-24 21:11:51 发布

前端栈开发

最新推荐文章于 2024-07-24 21:11:51 发布

阅读量423

点赞数

文章标签： html5 web app

本文链接：https://blog.csdn.net/phj_88/article/details/51350431

版权

第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基

础（初步认识了解 Angularjs）

学习要点：

1. html5 框架+Crosswalk 打包 app

2. 什么是 angularjs

3. Angularjs 之前问什么要学 ionic

4. 开发工具介绍以及 Hello Angular

5. Angularjs 中常用名词也就是所说的常用指令

6. Angularjs 表达式

7. AngularJS 控制器

8. AngularJS $http 请求数据

9. AngularJS 过滤器

10. AngularJS 模块

主讲：（树根）

合作网站：www.phonegap100.com (PhoneGap 中文网)

合作网站：www.itying.com(IT 营)

1. html5 框架+Crosswalk 打包 app

2. 什么是 Angularjs

AngularJS 最初由 Misko Hevery 和 Adam Abrons 于 2009 年开发，后来成为了

Google 公司的项目。AngularJS 弥补了 HTML 在构建应用方面的不足，其通过使用标识符（directives）结构，来扩展 Web 应用中的 HTML 词汇，使开发者可以使用 HTML 来声明动态内容，从而使得 Web 开发和测试工作变得更加容易。

Misko Hevery

Angularjs 版本简介

https://github.com/angular/angular.js/releases/

AngularJS 功能：

AngularJS 是专门为应用程序设计的 HTML。

AngularJS 使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易。

1 AngularJS 把应用程序数据绑定到 HTML 元素。

2 AngularJS 可以克隆和重复 HTML 元素。

3 AngularJS 可以隐藏和显示 HTML 元素。

4 AngularJS 可以在 HTML 元素"背后"添加代码。

5 AngularJS 支持输入验证

Angularjs 号称下一代 web 应用主要特性如下：

1.MVC

2.模块化与依赖注入

3.双向数据绑定

4.指令与 UI 控件

3. 学 Angularjs 之前问什么要学 ionic

1. AngularJs integrate-整合了 AngularJs

2. Url routing，use AngularUI Router

url 路由使用 AngularUI Router，可以指定不同的路由，方便开发和集成

3 . AngularJS Extensions & Directives 扩展了 AngularJS 指令

ion-tab, ion-content, ion-nav-view, ion-header

$ionicPopup,$ionicLoading, $ionicModal…

4. Hello Angular

Angularjs 资源：

http://Angularjs.org官方网站正常打不开但是打不开大家都懂的

http://www.angularjs.cn/

http://docs.angularjs.cn/api

http://www.ngnice.com/

https://github.com/angular

Angularjs 下载：

http://www.bootcdn.cn/angular.js/

通过 nodejs 下载：npm install angular

为了使用 Angular，所有应用都必须首先做两件事情

1. 下载加载 angular.js 库

2. 使用 ng-app 指令告诉 angular 应该管理 DOM 中的哪一些部分

<!DOCTYPE html> <html>

<head>

<body>

<div ng-app=""> <p>在输入框中尝试输入：</p>

</div>

</body>

</html>

5. Angularjs 中常用名词也就是所说的常用指令

HTML5 允许扩展的（自制的）属性，以 data- 开头。

AngularJS 属性以 ng- 开头，但是您可以使用 data-ng- 来让网页对 HTML5 有效

俗话说下面的指令可以在开头加上 data- 例如 ng_app 等同于 data _ng_app

指令		描述		讲解
指令		描述		讲解

	ng_app		*定义应用程序的根元素。*	指令
	ng_app		*定义应用程序的根元素。*	指令

	ng_bind		绑定 HTML 元素到应用程序数据。	简介
	ng_bind		绑定 HTML 元素到应用程序数据。	简介


	ng_click		*定义元素被单击时的行为。*	HTML 事件


	ng_controller		*为应用程序定义控制器对象。*	控制器
	ng_controller		*为应用程序定义控制器对象。*	控制器

	ng_disabled		*绑定应用程序数据到* HTML		的	HTML DOM
				disabled *属性。*

	ng_init			*为应用程序定义初始值。*			指令
	ng_init			*为应用程序定义初始值。*			指令


	ng_model			*绑定应用程序数据到* HTML 元素。			指令

	ng_repeat			*为控制器中的每个数据定义一个模板。*			指令
	ng_repeat			*为控制器中的每个数据定义一个模板。*			指令


	ng_show			*显示或隐藏* HTML 元素。			HTML DOM

1. ng_app		ng_bind ng_model {{}}案例演示

ng_app：

ng-app 指令定义了 AngularJS 应用程序的根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

稍后您将学习到 ng-app 如何通过一个值（比如 ng-app="myModule"）连接到代码模块。

ng-model 指令：

ng-model 指令绑定 HTML 元素到应用程序数据。

ng-model 指令也可以：

为应用程序数据提供类型验证（number、email、required）。为应用程序数据提供状态（invalid、dirty、touched、error）。

为 HTML 元素提供 CSS 类。

绑定 HTML 元素到 HTML 表单。

ng_bind 指令等同于{{}}

绑定 HTML 元素到应用程序数据。

示例 1：

<!DOCTYPE html> <html>

<body>

前端栈开发

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ionic项目简介以及Angularjs 基础

第二讲 html5 框架+Crosswalk 打包 app 以及 Angularjs 基础（初步认识了解 Angularjs）学习要点： 1. html5框架+Crosswalk打包 app 2. 什么是angularjs 3. Angularjs之前问什么要学 ionic 4. 开发工具介绍以及Hello
复制链接

扫一扫