Angularjs基础(一)

(一) 模型——视图——控制器     端对端的解决方案,AngularJS 试图成为WEB 应用中的一种段对端的解决方案。AngylarJS 的出众       之处如下:数据绑定,基本模板标识符,表单验证,路由,深度连接,组件重用,依赖注入。测试包括       单元测试,段对端测试,模拟和自动化测试框架。

Hello World

		    <Doctype html>
		    <html ng-app>
			      <head lang="en">
				         <meta charset="UTF-8">
   				         <title></title>
    				        <script src="angular.min.js"></script>
			      </head>
			      <body>
				        Hello {{'World'}}
			      </body>
		    </html>
		    当加载页面的时候,标记ng-app 告诉AngularJS处理整个HTML页并引导应用。
			      <html ng-app>
		        注意,使用双大括号标记{{}}的内容是问候语中绑定的表达式,这个表达式是一个简单的字符串‘World。
 Hello {{'World'}}
	    Hello AngularJS World
		      <Doctype html>
		      <html ng-app>
			        <head lang="en">
				            <meta charset="UTF-8">
   				            <title></title>
    				           <script src="angular.min.js"></script>
			        </head>
			        <body>
				          Your name:<input type="text" ng-model="yourname" placeholder="world">
    				          <hr>
    				          Hello {{yourname || 'World'}}!
			      </body>
		    </html>

      文本输入指令<input ng-model="yourname"/> 绑定到一个叫 yourname 的模型变量       双大括号标记将yourname 模型变量添加到问候语文本。 AngularJS 应用的解析     模板(Templates)       模板是您用HTML 和 CSS 编写的文件,展现应用的视图。您给HTML天机新的元素,属性标记,作为AngularJS       编译器的指令,Angular JS编译器是完全可扩展的。这意味着通过AngularJS 编译器是完全可扩展的,这意味着       AngularJS您可以在HTML 中构建自己的HTML标记!

    应用程序逻辑(Logic)和行为(Behavior)       应用程序逻辑和行为是您用JavaScrip 定义的控制器。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>都是AngularJS脚本作用域,开发者也在         局部使用ng-app 指令,如<div ng-app>,则AngurJS 脚本仅在该<div>中运行。     Angular JS 脚本标签:         <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 应用       通过ngApp指令来自动引导AngularJS应用是一种简洁的方式,适合大多数情况。 AngularJS应用引导过程有3个重点:     1.注入器(injector)将用于创建此应用程序的依赖注入(dependency injection)     2.注入器将会创建根作用域中的DOM,     3.AngularJS将会连接跟作用域中的DOM,从用ngApp标记的HTML 标签开始,逐步处理DOM中的指令和捆绑。   一旦AngularJS 应用引导完毕,他讲继续侦听浏览器的HTML触发事件,如鼠标点击数事件,按键事件,HTTP     传入响应等改变DOM模型的事件,这类事件一旦发生,AngularJS 将会自动检测变化,并作出相应的处理更新。   模型和控制器     在PhoneListCtrl 控制器里面初始化了数据模型(这里只不过是一个包含了数组的函数,数组中存储的对象是手机数据列表)

		        function PhoneListCtrl($scope){
				          $scope.Phones = [
					                {"name":"Nexus S","snippet":"Fast just got faster with Nexus S."
						              },
					                {"name":"Motorola XOOM with Wi - Fi","snippet":"The Next,Next Generation tablet."
						              }
					                {"name":"MOTOROLA XOOM","snippet":"The Next, Next Generation tablet"
						              }
            ];
			          }

      PhoneListCtrl——控制器方法的名字,(在JS文件controllers.js中)和<body>标签里面的ngController指令的值相匹配。       手机的数据此时与注入到我们控制器函数的作用域($scope)相关联。当应用启动之后,会有一个跟作用域创建出来,       而控制器的作用域的一个典型后继。这个控制器的作用域对所有的<body ng-controller="PhoneListCtrl">标记内部的       数据绑定有效。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏章鱼的慢慢技术路

Go语言实践_实现一(客户端)对一(服务器端)聊天室

1,首先启动服务器端,使用listen_socket函数监听IP地址上的客户端连接;

14330
来自专栏性能与架构

JS如何实现多线程?

单线程的问题 javascript是单线程执行的,在处理运算过程中,浏览器不能执行其它javascript脚本,UI渲染线程也会被挂起,从而导致浏览器进入僵死...

1.1K50
来自专栏Aloys的开发之路

Linux乱码问题解决方案

linux系统中文件名内容为urf8编码, windows系统中文件名默认为gbk编码, 多数文档使用gbk编码,系统采用utf8编码 无中文输入法导致的乱码 ...

56780
来自专栏用户2442861的专栏

webStorm 3.0配置使用主题背景色等

http://www.cnblogs.com/jikey/archive/2012/01/16/2323590.html

29210
来自专栏java沉淀

Maven、Webx、Velocity学习总结

17930
来自专栏前端下午茶

JS throttle与debounce的区别

一般在项目中我们会对input、scroll、resize等事件进行节流控制,防止事件过多触发,减少资源消耗;在vue的官网的例子中就有关于lodash的deb...

22530
来自专栏守望轩

Visual Studio 2008 每日提示(二十三)

#221、在对象浏览器中按对象和成员排序 原文链接:You can sort objects and members in the Object Browse...

38960
来自专栏林德熙的博客

win10 uwp 资源字典 资源的key所有的元素都可以定义资源合并资源字典主题资源共享的资源用户控件资源定义

本文主要翻译ResourceDictionary and XAML resource references - UWP app developer ,里面的代码...

13810
来自专栏猫哥学前班

99%的程序都没有考虑的网络异常

绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中。

41080
来自专栏小特工作室

Navi.Soft31.开发工具(含下载地址)

1系统简介 1.1功能简述 在软件开发过程中,我们需要经常对字符串、文件、数据库操作。有时需要浏览Json格式串,有时需要浏览Xml格式串,有时需要读取txt或...

25190

扫码关注云+社区

领取腾讯云代金券