什么是AngularJS

AngularJS是Google开源的一款JavaScript MVC框架，弥补了HTML在构建应用方面的不足，

  • 其通过使用指令（directives）结构来扩展HTML词汇，使开发者可以使用HTML来声明动态内容，从而使得Web开发和测试工作变得更加容易。
  • 通过表达式绑定数据到 HTML

AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。

AngularJS指令

AngularJS可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。 通过 ng-directives 扩展了 HTML 属性，带有前缀 ng-。主要的有：

  • ng-app 指令定义一个 AngularJS 应用程序。
  • ng-model 指令把元素值（比如输入域的值）绑定到应用程序。
  • ng-bind 指令把应用程序数据绑定到 HTML 视图。与表达式{{ expression}}有相同的效果

AngularJS表达式

AngularJS 表达式写在双大括号内：{{ expression }}。

AngularJS 表达式把数据绑定到 HTML，这与 ng-bind 指令有异曲同工之妙。AngularJS 将在表达式书写的位置"输出"数据。

简单AngularJS示例

<!DOCTYPE html>

<html>

<body>

<div ng-app="">

  <p>在输入框中尝试输入：</p>

  <p>姓名：<input type="text" ng-model="name"></p>

  <p ng-bind="name"></p>

</div>

<script src="//www.w3c/try/angularjs/1.2.5/angular.min.js"></script>

</body>

</html>

AngularJS控制器

AngularJS 控制器控制 AngularJS 应用程序的数据，是常规的 JavaScript 对象。

  • ng-controller 指令用来生成应用程序控制器，并且同时创建了一个新的作用域关联到相应的DOM元素上。
  • 控制器是 JavaScript 对象，由标准的 JavaScript 对象的构造函数 创建。
  • 控制器的 $scope 是把一个DOM元素连结到控制器上的JavaScript对象，指向应用程序作用域内的所有HTML元素和执行上下文。

控制器不仅声明属性，也有方法

<div ng-app="" ng-controller="MyController">

     Your name:

     <input type="text" ng-model="username">

     <button ng-click="sayHello()">打招呼</button>

     <hr>

     {{greeting}}

</div>

<script>

function MyController($scope) {

  $scope.username = 'World';

  $scope.sayHello = function() {

    $scope.greeting= 'Hello ' + $scope.username + '!';

  };

}

</script>

参考

  • 汇智网 3w.hubwiz.com/course/?type=database

[AngularJS] 入门的更多相关文章

  1. AngularJS入门心得4——漫谈指令scope

    上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...

  2. AngularJS入门心得3——HTML的左右手指令

    在<AngularJS入门心得1——directive和controller如何通信>我们提到“AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文 ...

  3. AngularJS入门心得2——何为双向数据绑定

    前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...

  4. AngularJS入门心得1——directive和controller如何通信

    粗略地翻了一遍<JavaScript DOM编程艺术>,就以为可以接过AngularJS的一招半式,一个星期过去了,我发现自己还是Too Young,Too Simple!(刚打照面的时候 ...

  5. （一）Angularjs - 入门

    AngularJS进行应用开发的一个重要的思维模式: 从构造声明式界面入手 ng-app: 这个指定定义并且关联了使用angularJS的HTML页面部分 ng-model: 这个指定定义并绑定Ang ...

  6. AngularJS入门教程：日期格式化

    AngularJS入门教程:日期格式化[转载] 本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | d ...

  7. 【转载】图灵AngularJS入门教程

    摘自图灵的AngularJS入门教程:http://www.ituring.com.cn/article/13471 感觉非常不错,所以推荐到首页一下! (一)Hello World! 开始学习Ang ...

  8. 《AngularJS入门与进阶》图书简介

    一.图书封面 二.图书CIP信息 图书在版编目(CIP)数据 AngularJS入门与进阶 / 江荣波著. – 北京 : 清华大学出版社, 2017 ISBN 978-7-302-46074-9 Ⅰ. ...

  9. 跟我学AngularJs:AngularJs入门及第一个实例

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:主要给大家介绍了AngularJs及其特性,并以3个实例来做说明. 本教程使用Angul ...

  10. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

随机推荐

  1. python 生成器和递归

    生成器 1.定义 问题:python会把对象放到内存中,我们每次定义变量.列表等都会在内存中占用对应的地址块,所以当内存容量一定时,列表的容量会受到内存的限制,而且假如我们创建了一个包含200万个元素 ...

  2. [Android] View.setTag(key,Object) (java.lang.IllegalArgumentException: The key must be an application-specific resource id.)

    转自: http://blog.csdn.net/brokge/article/details/8536906 setTag是android的view类中很有用的一个方法,可以用它来给空间附加一些信息 ...

  3. Appium for IOS testing on Mac

    一:环境 1.Mac OS X 10.9.1 2.Xcod 5.0.2 3.Appium 1.3.6 下载地址:https://bitbucket.org/appium/appium.app/down ...

  4. 【Alpha阶段】第7.5次Scrum例会

    会议信息 时间:2016.10.31 21:30 时长:10min 地点:大运村1号公寓5楼楼道 类型:日常Scrum会议 NXT:2016.11.01 21:30 个人任务报告 姓名 今日已完成Is ...

  5. CF570D：Tree Requests

    传送门 DFS重标号+二分 打比赛的时候想了很多方法..DFS序,BFS序,倍增什么的都考虑了一遍,但是几乎要么是可以维护两个区间但是代码复杂度爆炸,要么就是只能维护单一维度的信息. 这道题的具体做法 ...

  6. Jquery 基本知识(一)

    1. DOM对象:通过例如getElementById方法获取到DOM树中的元素就是DOM对象 jQuery对象:通过jQuery包装DOM对象后产生的对象 --- 注意:jQuery对象和DOM对象 ...

  7. /etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc 的区别（转）

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行并从/etc/profile.d目录的配置文件中搜集shell的设置. /etc/bashrc:为每一个运 ...

  8. 《CSS3实战》读书笔记 第2章 层叠样式表（CSS）

    ## 层叠样式表 本章将阐述CSS的基本规则. ### 解构CSS 所谓CSS,由选择器(selector)和声明块(declaration block)组成.再进一步细分,每个声明包括了属性和值. ...

  9. Codeforces 697A - Pineapple Incident

    题目链接:http://codeforces.com/problemset/problem/697/A 题目大意: 输入三个数 t,s,x; 判断x是否合适 合适的位置位 t , t+s, t+s+1 ...

  10. pickle模块简单使用

    import pickle with open("school_info","wb") as school: user_input = str(input(&q ...