一、调用angular

  1. 加载angular.js库（可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js，也可以下载到本地，楼主我就是下载到本地来引入代码的）
  2. 使用ng-app指令告诉angular应该管理dom中的哪一部分。

二、使用ng-app申明angular的边界

你可以使用ng-app指令告诉angular应该管理页面的哪一块，如果你正在构建一款纯angular应用，那么你应该把ng-app指令写在<html>标签中。

Eg:<html ng-app></html>

或者可以让angular只管理页面中的一部分

Eg:<html><div ng-app></div></html>

现在写一个简单的列子

<!DOCTYPE html>

<html ng-app = 'myApp'>

<head>

     <title></title>

     <meta name="name" content="content" charset="utf-8">

     <script src="angular-1.4.2/angular.js" type="text/javascript"></script>

     <script type="text/javascript">

     angular.module('myApp',[]).controller('textController',function($scope){

          $scope.someText = 'you have started your journey';

     })

     </script>

</head>

<body ng-controller="textController">

<p>{{someText}}</p>

</body>

</html>

在页面中会显示 you have started your journey。

三、显示文本

在angular中，数据绑定有2种实现方法，一种是前面写的{{}}花括号的形式，另外一中就是使用ng-bind属性的指令形式。<p ng-bind=”someText”></p>

在书写中，我们会推荐使用第二种数据绑定的方法,原因如下：

  1. 在使用花括号的时候，第一个加载的页面，也就是应用中的index.html，其未被渲染的模板可能被用户看到。而使用第二种方法的视图就不会遇到这个问题了。（原因是：浏览器需要首先加载html页面，渲染他，然后angular才有机会把他解释成你期望看到的页面）

四、表单输入

我们可以使用ng-model属性把元素绑定到你的模型属性上

<form ng-controller="some">

     <input type="checkbox" ng-model="youcheck">

</form>
  1. 当用户选中了复选框之后，some中的$socpe.youcheck=true,而反选复选框会让$socpe.youcheck=false;
  2. 如果你在some中把$socpe.youcheck的值设置为true,那么UI中的复选框就会变成选中的状态，反之就不会选中。

举一个列子

<form ng-controller="startUp">

     Strat: <input type="text" ng-change="number()" ng-model="startnum">

     add : {{needed}}

</form>

 <script type="text/javascript">

     angular.module('myApp',[]).controller('startUp',function($scope){

         $scope.startnum = 0;

         $scope.number = function(){

               $scope.needed = $scope.startnum * 10;

         }

     })

     </script>

当我们在文本框输入值的时候，我们会看到add的值是随时改变的。但是这样的话，就会出现一个问题，即如果还有其他输入框也绑定到模型中的这个属性上，会怎样呢？

我们可以引入$scope中的$watch()的函数----可以调用$watch()函数来监视一个表达式，当这个表达式发生改变时就会调用一个回调函数。

下面我们用这一技术重写

<script type="text/javascript">

     angular.module('myApp',[]).controller('startUp',function($scope){

         $scope.startnum = 0;

        number = function(){

               $scope.needed = $scope.startnum * 10;

         }

        $scope.$watch('startnum',number);

     })

     </script>

在某些情况下，你不想一有变化就立刻做出反应，直到用户告诉你他已经准备好了，列如发出一条确认信息之后（如下所示，是在form表单上面使用的列子，当表单提交的时候可以执行这个函数）

<form ng-controller="form" ng-submit="request()">

     start:<input ng-change="computer()" ng-model="startform">

     add: {{addform}}

     <button>click me</button>

</form>

<script type="text/javascript">

    angular.module('myApp',[]).controller('form', function ($scope) {

         $scope.computer = function () {

              $scope.addform = $scope.startform * 10;

         }

         $scope.request = function () {

              window.alert('sorry');

         }

    })

     </script>

同时，在提交表单的时候，ng-submit还会自动阻止浏览器执行默认的post操作

onclick ----ng-click      ondbclick-----ng-dbclick

Angular随笔第一课的更多相关文章

  1. Angular随笔第二课

    一.  列表表格以及其它迭代型元素 ng-repeat 可能是最有用的angular指令了,它可以根据集合中的项目一次创建一组元素的多份拷贝.不管在什么地方,只要你想创建一组事物的列表,你就可以使用这 ...

  2. Spark 3000门徒第一课随笔

    昨晚听了王家林老师的Spark 3000门徒系列课程的第一课,把scala基础过了一遍,对ArrayBuffer有了新的认识: Array本身创建后不可修改ArrayBuffer可修改import s ...

  3. vue.js学习（第一课）

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  4. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一．Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  5. <-0基础学python.第一课->

    初衷:我电脑里面的歌曲很久没换了,我想听一下新的歌曲,把他们下载下来听,比如某个榜单的,但是一首一首的点击下载另存为真的很恶心 所以我想有没有办法通过程序的方式来实现,结果还真的有,而且网上已经有有人 ...

  6. 留念 C语言第一课简单的计算器制作

    留念 C语言第一课简单的计算器制作 学C语言这么久了.  /* 留念 C语言第一课简单的计算器制作 */   #include<stdio.h>  #include<stdlib.h ...

  7. MFC学习-第一课 MFC运行机制

    最近由于兴趣爱好,学习了孙鑫的MFC教程的第一课.看完视频了,自己便用visual studio 2010尝试了MFC编程,其中遇到了一些问题. 1.vs2010不像vs6.0那样可以新建一个空的MF ...

  8. OpenCV 第一课(安装与配置)

    OpenCV 第一课(安装与配置) win10,opencv-2.4.13, 安装, vs2013, 配置 下载安装软件 官网OpenCV下载地址下载最新版本,我下载的是opencv.2.4.13,然 ...

  9. 【第一课】神奇的Context

    初学Android的困惑 初学Android跳转页面的时候,往往教程里是这么写的: Intent intent = new Intent(); //MyActivity就是当前的Activity,It ...

随机推荐

  1. 关于ajax post请求跨域问题的解决心得

    最近啊,公司有个项目,需要做一个手机端APP的后台管理系统.所以用到了度文本编辑框,经过了好好一番周折,终于弄好了,带到上线的时候发现啊,只能使用ip去访问网页的时候上能穿图片他不会报跨域的问题,而使 ...

  2. 分离你的spring配置文件，让结构更清晰

    前言 接着上一篇的,这次框架的改变也成功分离了spring的配置文件. 以前,spring的配置文件从一开始的一点,到后面的逐渐变多,慢慢的,在一个spring的配置文件中就包含了好几块不同的bean ...

  3. 20+个很棒的Android开源项目

    20+个很棒的Android开源项目 本文摘自文章: 20+ Awesome Open-Source Android Apps To Boost Your Development Skills. 考虑 ...

  4. require.js疑惑

    昨天小颖分享了一篇require.js入门 ,今天小颖发现了一个很郁闷的问题,希望大神们帮小颖解释下到底是什么原理才能出现以下的现象,其实小颖昨天也有问过园友里的一位帅锅,只是他解释的小颖没太明白.嘻 ...

  5. FPGA中将十进制数在数码管中显示（verilog版）--二进制转换为BCD码

    这周有朋友问怎样在fpga中用数码管来显示一个十进制数,比如1000.每个数码管上显示一位十进制数.如果用高级语言来分离各位,只需要分别对该数做1000,100,10对应的取商和取余即可分离出千百十个 ...

  6. Unity 相机的聚焦功能

    摘要:本文原创,转载请注明出处 需求: 在游戏的任务编辑场景进行编辑的时候,摄像机需要在多个需要编辑的物体之间来回切换,如果只是用摄像机的移动旋转,对于相对位置较近的物体还好说,当相对位置过远的时候, ...

  7. 【Android】再来一篇Fragment懒加载（只加载一次哦）

    效果 老规矩,先来看看效果图 没错,我又入坑了,又重新做了个 Gank 客户端,因为之前那个代码写得太烂了,这次有好好的考虑了下架构之类的事,代码应该会更容易读懂了点了,吧.哈哈,再次欢迎来 star ...

  8. Python 面向对象之一

    Python 面向对象之 类与属性 今天接触了一下面向对象,发现面向对象和之前理解的简直就是天壤之别,在学Linux的时候,一切皆文件,现在学面向对象了,so,一切皆对象. 之前不是一直在学的用面向函 ...

  9. ASP.Net零碎

    ASP.Net零碎 ServerPush 什么是ServerPush,服务器向客户端浏览器“推送”,其实就是“长连接”. 只有浏览器请求服务器端,服务器端才有给浏览器响应数据,不会主动向浏览器推送数据 ...

  10. yum 安装vim编辑器

    在我们使用的vi编辑器中没有配色不是很好用,我们安装一个vim富文本编辑器方便我们的文本编辑. [root@localhost ~]# yum install vim -y已加载插件:fastestm ...