AngularJS的相关应用

一.【AngularJS常用指令】
        1、ng-app:声明Angular所管辖的区域。一般写在body或html上,原则上一个页面只有一个;
           <body ng-app=""></body>
           
        2、ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中。
           <input type="text" ng-model="name"/>
           
        3、ng-bind:把应用程序变量中的数据绑定到 HTML视图中。可用表达式{{ }}替代;
           <div ng-bind="name"></div>
           <div>{{name}}</div>
           
        4、ng-init:初始化 AngularJS应用程序中的变量。
           <body ng-app="" ng-init="name=123">
               
        5、表达式: {{}} 绑定表达式,可以包含文字、运算符和变量。但表达式在网页加载瞬间会看到{{}},所以可以用ng-bind=""替代
           {{ 5 +""+ 5 + ‘,Angular‘}}
           
  二.【服务Service】
          1、内置服务:
            >>> 使用内置服务,必须在Controller中通过函数的参数注入进来!!!!!
            $location:返回当前页面的 URL地址。
            $http:向服务器发送请求,应用响应服务器传送过来的数据,类似于Ajax
            $timeout:相当于setTimeout();
            $interval:相当于setInterval();

三.AngularJS中,过滤器可以使用一个管道字符(|)添加到表达式和指令中。
         >>> 系统内置过滤器:
         currency    格式化数字为货币格式。
         filter    从数组项中选择一个子集。
         lowercase    格式化字符串为小写。
         orderBy    根据某个表达式排列数组。
         uppercase    格式化字符串为大写。

四  AngularJS中select和表格

使用数组作为数据源。
            其中,x表示数组的每一项。
            默认会将x直接绑定到option的value中。
            而option显示的内容,有前面的x for... 决定
        -->
        <!--<select ng-model="name" ng-options="x.site for x in sites">
        </select>-->
        
        <!--
            使用对象作为数据源.
            其中,(x,y)表示键值对,x为键,y为值。
            默认会将值y绑定到option的value中.
            而option显示的内容,有前面的x for... 决定

时间: 2024-12-13 16:02:47

AngularJS的相关应用的相关文章

ionic angularJS input 相关指令 以及定时器 的使用

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="../angular.min.js"&

向标签添加angularjs的相关属性以及事件

<!DOCTYPE html><html><head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.m

Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解

Angularjs 事件指令 input 相关指令 和样式指令DOM 操作指令详解学习要点:1. AngularJs 事件指令2. input 相关指令3. 样式指令4. DOM 操作指令5. ngBind/ngBindHtml/ngBindTemplate 重点6. ng-init ng-mode ng-model-options ng-controler 1. Angularjs 事件指令自己研究:ng-click/dbclickng-mousedown/upng-mouseenter/le

AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解

1.AngularJS 事件指令 (1)ng-click 鼠标点击事件 [html] <button ng-click="count = count + 1" ng-init="count=0"> Increment  </button> <span>  count: {{count}}  </span> (2)ng-dblclick 鼠标双击事件 [html] <button ng-dblclick="

使用 AngularJS &amp; NodeJS 实现基于 token 的认证应用(转)

认证是任何 web 应用中不可或缺的一部分.在这个教程中,我们会讨论基于 token 的认证系统以及它和传统的登录系统的不同.这篇教程的末尾,你会看到一个使用 AngularJS 和 NodeJS 构建的完整的应用. 一.传统的认证系统 在开始说基于 token 的认证系统之前,我们先看一下传统的认证系统. 用户在登录域输入 用户名 和 密码 ,然后点击 登录 : 请求发送之后,通过在后端查询数据库验证用户的合法性.如果请求有效,使用在数据库得到的信息创建一个 session,然后在响应头信息中

使用 AngularJS & NodeJS 实现基于 token 的认证应用

传统的认证系统 在开始说基于 token 的认证系统之前,我们先看一下传统的认证系统. 用户在登录域输入 用户名 和 密码 ,然后点击 登录 : 请求发送之后,通过在后端查询数据库验证用户的合法性.如果请求有效,使用在数据库得到的信息创建一个 session,然后在响应头信息中返回这个 session 的信息,目的是把这个 session ID 存储到浏览器中: 在访问应用中受限制的后端服务器时提供这个 session 信息: 如果 session 信息有效,允许用户访问受限制的后端服务器,并且

AngularJS开发指南16:AngularJS构建大型Web应用详解

AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇blog,分享了如何使用AngularJS构建大型Web应用的经验.这些经验对于使用其他JS框架构建大型应用的开发者也极具借鉴意义. 这篇blog特别关注的是大型应用程序,作者首先给出的建议是,尽量不要让应用变得太巨大.而应该编写小型.功能专注的.模块化的部分,然后逐渐把它们组合起来,变得越来越大,

AngularJS 常见面试问题

ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是,ng-if 在后面表达式为 true 的时候才创建这个 dom 节点,ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示. 第二点区别是,ng-if 会(隐式地)产生新作用域,ng-switch . ng-include 等会动态创建一块界面的也是如此. 这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 中把此 model 绑定给

“高三”笔记之动态JS、动态样式

拜读<JavaScript高级程序设计> --- 站在巨人的肩上 动态JS.动态样式就是页面加载时不存在,但将来通过DOM操作动态添加的脚本:包括加载外部文件和添加内部代码块两种:动态加载的外部文件能够立即运行,而动态添加的代码块却不能如愿的立即执行:下面将主要以JS为例,小小的探索下动态脚本的加载.执行以及jQuery的做法.Angularjs的相关做法: 1.动态加载外部文件 因为动态加载的外部JS会立即执行,也没什么浏览器兼容性问题,这个好处理:这里的重点是怎么知道脚本已加载完成呢?呵呵