随笔 - 36  文章 - 0  评论 - 80  阅读 - 53万
  2015年7月6日

AngularJS是什么?

既然能找到这篇日志,证明大家已经了解AngularJS了我这里也就不长篇大论的说了。

其实AngularJS就是,使用JavaScript编写的客户端技术。和Web技术( HTML、 CSS 和JavaScript)配合使用,使Web应用开发比以往更简单、更快捷。

刚开始学习,咱们得有学的工具,这里建议推荐使用vs,版本无所谓 后面的demo ,我这里基本上都会使用vs2013来进行开发。

说了这么多,一起来写一个小demo,开始咱们神奇的AngularJS之旅吧。
1.先下载包:https://files.cnblogs.com/files/xiaowei0705/angular.min.js

2新建一个页面,写入以下代码:
<!doctype html>
<html ng-app>
<head>
    <script src="Scripts/angular.min.js"></script>
</head>
<body>
    姓名: <input type="text" ng-model="yourname" placeholder="请输入姓名">
    <hr>
    你好: {{yourname || '小伟'}}!
</body>
</html>

运行结果: 咱们页面没有做任何的js处理,居然能自动改变!

该示例有一下几点重要的注意事项:

  • 文本输入指令<input ng-model="yourname" />绑定到一个叫yourname的模型变量。
  • 双大括号标记将yourname模型变量添加到问候语文本。
  • 你不需要为该应用另外注册一个事件侦听器或添加事件处理程序!

现在试着在输入框中键入您的名称,您键入的名称将立即更新显示在问候语中。 这就是AngularJS双向数据绑定的概念。 输入框的任何更改会立即反映到模型变量(一个方向),模型变量的任何更改都会立即反映到问候语文本中(另一方向)。

AngularJS应用的解析

本节描述AngularJS应用程序的三个组成部分,并解释它们如何映射到模型-视图-控制器设计模式:

模板(Templates)

模板是您用HTML和CSS编写的文件,展现应用的视图。 您可给HTML添加新的元素、属性标记,作为AngularJS编译器的指令。 AngularJS编译器是完全可扩展的,这意味着通过AngularJS您可以在HTML中构建您自己的HTML标记!

应用程序逻辑(Logic)和行为(Behavior)

应用程序逻辑和行为是您用JavaScript定义的控制器。AngularJS与标准AJAX应用程序不同,您不需要另外编写侦听器或DOM控制器,因为它们已经内置到AngularJS中了。这些功能使您的应用程序逻辑很容易编写、测试、维护和理解。

模型数据(Data)

模型是从AngularJS作用域对象的属性引申的。模型中的数据可能是Javascript对象、数组或基本类型,这都不重要,重要的是,他们都属于AngularJS作用域对象。

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变,AngularJS会立即刷新反映在视图界面中,反之亦然。

此外,AngularJS还提供了一些非常有用的服务特性:

  1. 底层服务包括依赖注入,XHR、缓存、URL路由和浏览器抽象服务。
  2. 您还可以扩展和添加自己特定的应用服务。
  3. 这些服务可以让您非常方便的编写WEB应用。

代码在做什么呢?

ng-app指令:

<html lang="en" ng-app>

ng-app指令标记了AngularJS脚本的作用域,在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。开发者也可以在局部使用ng-app指令,如<div ng-app>,则AngularJS脚本仅在该<div>中运行。

AngularJS脚本标签:

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

这行代码载入angular.js脚本,当浏览器将整个HTML页面载入完毕后将会执行该angular.js脚本,angular.js脚本运行后将会寻找含有ng-app指令的HTML标签,该标签即定义了AngularJS应用的作用域。

双大括号绑定的表达式:

<p>Nothing here {{'yet' + '!'}}</p>

这行代码演示了AngularJS模板的核心功能——绑定,这个绑定由双大括号{{}}和表达式'yet' + '!'组成。

这个绑定告诉AngularJS需要运算其中的表达式并将结果插入DOM中,接下来的步骤我们将看到,DOM可以随着表达式运算结果的改变而实时更新。

AngularJS表达式Angular expression是一种类似于JavaScript的代码片段,AngularJS表达式仅在AngularJS的作用域中运行,而不是在整个DOM中运行。

源码:https://files.cnblogs.com/files/xiaowei0705/Web_Demo_001.rar

posted @ 2015-07-06 11:35 xiaowei0705 阅读(3348) 评论(4) 推荐(6) 编辑
  2013年11月11日
摘要: 这一节准备安装开发环境。1.首先先下载软件包:http://pan.baidu.com/s/1imYVv 4.2版本2.下载完后,解压会看到两个文件(运行第二个安装包)3.准备安装,这里直接上图了。这里全选,里面包括运行媒体之类的。这里自己选择安装目录。如果你C盘空间不够,可以选择其他盘开始安装了,等待几分钟安装成功,去掉勾选Run暂时不需要启动。直接finish咱们打开刚才下载的激活文件(win7 ,8以管理员方式运行)点击Browse选择你刚才安装的Unity文件夹下的Editor 点击确定。然后点击Patch 弹出 Patched,点击确定,退出激活程序。先断网,然后运行Unity3d. 阅读全文
posted @ 2013-11-11 20:12 xiaowei0705 阅读(16441) 评论(6) 推荐(1) 编辑
摘要: Unity是由Unity Technologies开发的一个让玩家轻松创建诸如三维视频游戏、建筑可视化、实时三维动画等类型互动内容的多平台的综合型游戏开发工具,是一个全面整合的专业游戏引擎。Unity类似于Director,Blender game engine, Virtools 或 Torque Game Builder等利用交互的图型化开发环境为首要方式的软件其编辑器运行在Windows 和Mac OS X下,可发布游戏至Windows、Mac、Wii、iPhone和Android平台。也可以利用Unity web player插件发布网页游戏手机游戏,支持Mac 和Windows的网. 阅读全文
posted @ 2013-11-11 19:41 xiaowei0705 阅读(2861) 评论(0) 推荐(2) 编辑
  2013年9月24日
摘要: 1、使数据库变为紧急模式:ALTER DATABASE 数据库名 SET EMERGENCY2、使数据库变为单用户模式:ALTER DATABASE 数据库名 SET SINGLE_USER3、修正数据库日志重新生成,此命令检查的分配,结构,逻辑完整性和所有数据库中的对象不正确。当您指定“REPAIR_ALLOW_DATA_LOSS”作为DBCC CHECKDB命令参数,该程序将检查和修正报告的不正确。但是,这些修正可能会导致一些数据丢失。执行: DBCC CheckDB (数据库名 , REPAIR_ALLOW_DATA_LOSS)4、使数据库变回为多用户模式:ALTER DATABASE 阅读全文
posted @ 2013-09-24 09:28 xiaowei0705 阅读(1708) 评论(0) 推荐(0) 编辑
  2012年6月18日
摘要: 解决办法:主要是在IIS里面配置的修改,就是IIS里的HTTP头的MIME类型映射的设置,添加.xaml application/xaml+xml 和 .xap application/octet-stream加好后重启下IIS就可以了。 阅读全文
posted @ 2012-06-18 16:31 xiaowei0705 阅读(416) 评论(0) 推荐(0) 编辑
  2012年1月7日
摘要: Windows Phone 开发教学系列视频之四天玩转 Windows Phone 开发第一天(1)系列简介(2)安装 Visual Studio 2010 Express for Windows Phone(3)编写您的第一个 Windows Phone 7 应用程序(4)Windows Phone 7 仿真器概述(5)详解您编写的第一个应用程序(6)管理项目文件并理解编译和部署(7)Visual Studio 2010 Express for Windows Phone IDE 概述(8)使用项目(9)声明变量和赋值(10)从文本框中接受输入和赋值(11)if 判断语句(12)运算符、表达 阅读全文
posted @ 2012-01-07 11:08 xiaowei0705 阅读(264) 评论(0) 推荐(0) 编辑
摘要: 简介最近在选择Windows Phone 7的本地数据库,把经验记录下来。数据库的选择,我考虑以下几点:?性能,?稳定性,?footprint(占用文件和内存大小),费用(许可证类型),易用性(访问方式,是否提供管理工具等)。下面讲述Windows Phone下我所了解到的一些数据库实现以及其优缺点。Windows Phone 7 databasehttp://winphone7db.codeplex.com/Windows Phone 7 database是一个基于Isolated Storage (独立存储)来实现的数据库,发布在codeplex的开源数据库,使用MS开源许可证,可以自由使 阅读全文
posted @ 2012-01-07 11:05 xiaowei0705 阅读(326) 评论(1) 推荐(0) 编辑
摘要: 界面和交互的设计决定了应用程序在移动设备上的用户体验,控件是界面的重要组成部分,也是和用户交互的主要接口。本文将详细介绍Windows Phone 7常用的布局和控件,以及控件外观自定义的方法。正如任何一个C#程序都会以Main()方法为程序入口点一样,本文的入口点从创建一个新的Windows Phone Application开始。本文的内容正确实践之前,要确保已经安装Microsoft Visual Studio 2010 Express for Windows Phone Beta。Windows Phone应用程序页面创建完Windows Phone Application以后,在解决 阅读全文
posted @ 2012-01-07 11:03 xiaowei0705 阅读(311) 评论(0) 推荐(0) 编辑
摘要: 首先打开Microsoft Visual Studio 2010 Express for Windows Phone.在File里选择New Project…,新建一个工程,在弹出的窗口中,设置可参考下图所示:065609BPZ.jpg(79.39 K)2011/12/29 16:04:07点击OK按钮后,将进入工程开发,在这里简单介绍一个该开发环境,我们可以看到在左侧有三行小标签,分别是Toolbox, Document Outline, Data Sources,其中主要的是Toolbox,点击在弹出的列表中,我们可以看到该工具箱为我们开发提供很多控件,在这就不一一列举了。另两个标签是文档 阅读全文
posted @ 2012-01-07 11:01 xiaowei0705 阅读(325) 评论(0) 推荐(0) 编辑
摘要: WP的开发套件其实很早就已经发布了,相关开发资料也有了很多,不过最近才开始关注这个平台,有朋友已经拿到了WP7的真机,HTC的,到处宣扬这牛机强悍的触控体验,绝对是IP4的重量级对手。不过鉴于国内的环境,WP7在短期内可能无法引进,即便引进了,几个关键性的应用估计也要被残废。不过我相信半年内肯定会有一个解决方案出来,提早储备技术。目前中文资料不多,不过几天前,Windows Phone 7的中文开发网站上线。在上面能够下载到一套经过汉化的开发实验包。从今天起,计划每天完成一个实验例子,逐步认识WP7的开发过程。大概有个概念后,找两本鸟语书开始系统研究。WP7开发工具微软已经打包好了,直接下载安 阅读全文
posted @ 2012-01-07 10:59 xiaowei0705 阅读(442) 评论(0) 推荐(0) 编辑
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示